tags: `上課筆記`

HTML&CSS

簡介

HTML是一種標記語言，非程式語言。

標記語言：描述網站的結構
程式語言：有邏輯判斷在裡面

CSS用來給網頁的內容進行樣式上的編輯

HTML常用標籤

20200221作業

CSS

樣式表 style

網頁內含樣式表

第一種方式style 標籤樣式:寫在<style></style>

該網頁文件專屬樣式，無法被其他網頁使用

原始碼
在Head裡建立樣式表，在Body裡面指定h1標籤的時候就會改變樣式









<style>
    h1{
        color: brown;
        background-color: burlywood;
        font-size: 42px;
        }
</style>
...
<h1>Lorem ipsum dolor sit amet.</h1>

結果

Lorem ipsum dolor sit amet.

連結外部樣式表

第二種方式使用<link>連結外部樣式表

優點可以減少CSS原始碼，不需要每個HTML重複寫CSS，檔案較小。
設計專題或工作時，使用外部樣式表。
外部樣式表不只有一份，可能會有樣式被覆蓋的問題，因為瀏覽器在閱讀網頁時，由上至下閱讀每份外部樣式表。

原始碼




<link rel="stylesheet" href="style.css">
...
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus consequatur fugit dolorem.
</p>

同個資料夾下建立style.css，並裡面寫好樣式
結果

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus consequatur fugit dolorem.

行內樣式

第三種方式：style屬性樣式，被稱為行內樣式，寫在標籤裡面

原始碼


<p style="color: hotpink;">Lorem ipsum dolor sit amet.</p>

結果

Lorem ipsum dolor sit amet.

樣式表寫入順序

如果有重複的選擇器，瀏覽器在閱讀(從第一行開始)的時候會把最後讀到的樣式作為最終呈現。
行內樣式優先權最高，因為style是標籤的屬性，不會被內嵌(style)標籤、外部樣式表影響

顏色使用方式

使用顏色名稱


<p style="color: red;">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

使用HEX 16進位碼


<p style="color: #0000ff;">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

使用rgb()


<p style="color: rgb(0, 255, 0);">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

選擇器 Selector

Class 類別選擇器

class是CSS樣式最常被使用的選擇器，具有重複使用的特性，往後學習 Bootstrap時，可以看到大量樣式被設計成class

命名前面一定要加個半形句點(.)
只允許字元、數字、連字、減號(-)，底線(_)
句點後必須以字源開始，不能用數字開頭、中文命名
類別、ID的名稱有大小寫區分









<style>
    .a{
        color: red;
    }
</style>
...
<body>
    <div class="a"></div>
</body>

ID選擇器

在一份文件裡面，只能有一個獨一無二的ID，具有唯一的特性，通常作為網頁邏輯區塊名稱，或是js、jq控制元素的選擇器(簡單來說就是可以直接被程式呼叫使用)。

命名前面要加個井字符號(#)















<style>
    #btn{
        color: blue;
    }
</style>
...
<body>
    <div id="btn"></div>
</body>
...
<script> 
$('#btn').click(function(){
    /* do something */
})
</script>

後代選擇器與子代選擇器

















<style>
    /* 後代選擇器，選擇後代子孫，nav裡面的所有p */
    nav p{
        color: blue;
    }
    /* 子代選擇器，只選擇兒子，nav下一層的p */
    nav>p{
        color: red;
    }
</style>
...
<nav>
    <p>Lorem ipsum dolor sit amet.</p>
    <div>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</nav>

Font與Text常用屬性

Font

文字尺寸：文字尺寸單位:px,em,rem
font-size: 28px;

斜體
font-style: italic;

粗體
font-weight: bold;

文字全部變大寫，並且第一個文字再加大
font-variant: small-caps;

指定字形
font-family: 微軟正黑體;

Text

對齊
text-align: left;

底線
text-decoration: underline;

縮排
text-indent: 60px;

文字呈現：uppercase全大寫、lowercase全小寫、capitalize每個單字開頭大寫
text-transform: capitalize;

陰影：x軸 y軸模糊半徑色碼
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.527);

背景 Background

單色背景顏色
background-color: #FFA;

背景圖片
background-image: url("...");

背景水平重複填滿
background-repeat: repeat-x;

背景垂直重複填滿
background-repeat: repeat-y;

背景不重複填滿
background-repeat: no-repeat;

背景圖片等比例縮放，背景圖片會填滿整個盒子
background-size: cover;

背景圖片等比例縮放，圖片一邊碰到盒子一邊，另一邊停止縮放
background-size: contain;

背景圖片定位:x軸 y軸
background-position: 50% 50%;

背景圖片直線漸層(上到下)
background-image: linear-gradient(red, yellow, white);

背景圖片直線漸層(左到右)
background-image: linear-gradient(90deg, red, yellow, white);

背景圖片直線漸層(左下到右上)
background-image: linear-gradient(to right top, #fff 0%, lightblue 25%, #fff 50%, lightblue 75%, #fff 100%);

背景圖片圓形漸層(由內而外)
background-image: radial-gradient(white, #FFFFAA, pink);

半透明背景:帶透明的顏色漸層放在圖片上
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(20, 150, 0, 0.2)), url("...");

在圖片上左側漸層到右側
background-image: linear-gradient(to right, #fff 0%,transparent 15%,transparent 85%,#000 100%), url("...");

可以使用縮寫，但要注意background-size 一定要緊接在 background-position 之後，必須要用斜線分隔(/)
background: url("...") no-repeat center center/cover;

盒模型 Box model

一個盒子由內而外的層級

盒子相關屬性

margin 盒子的外距，可做負數設定(margin:auto預設8px)
padding 盒子的內距，不可負數
border 盒子的邊框，不可負數
outline 外框，不會影響布局，只作為外觀呈現。顯示在border以外
border-radius 盒子圓角
box-shadow 盒子陰影

四個圓角都50%
border-radius:50%;

左上左下圓角都10rem(左上右上右下左下)
border-radius: 10rem 0 0 10rem;

盒子內陰影(inset)，可以疊好幾個
box-shadow: inset 0px 0px 10px #0f0,inset 0px 0px 15px #f00;

盒子外框下面要畫一條黑線
border-bottom:1px solid #000;

兩box之間如果margin(外距)垂直重疊，大外距會吃小外距，以大外距為主
margin可照寬度分配盒子的位置


width: 500px;
margin: auto;

計算盒子的寬度

width + padding-left + padding-right + margin-left + margin-right + border-left + border-right

改變盒子計算寬度的方式：padding、border 都會計算在 width，只考慮盒子width、margin設定
box-sizing: border-box;

畫一個圓









.circle{
    /* 畫圓，寬、高須為正方形 */
    width: 500px;
    height: 500px;
    border:10px solid #aaaaaa;
    /* 設定50%為圓形 */
    border-radius: 50%;
    margin: auto;
}

區塊盒與行內盒 block and inline

區塊盒 block

區塊盒前後斷行，填滿整個父元素，無法與其他元素並排
可以正常使用width、height、margin與padding屬性
區塊標籤：div、h1、p、ul



<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>

Lorem ipsum dolor sit amet.

行內盒 inline-block

行內盒前後不斷行，寬度以本身的內容寬度為主，width、height不會有任何作用
行內標籤：span、a、em、strong



<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.

轉型 display

可以用Display設定其他類型的盒子
轉型後可使用不同類型盒子的屬性

區塊轉行內區塊
display: inline-block;

行內區塊轉區塊
display: block;

浮動 Float

讓區塊可以靠左靠右做排版

float

靠左浮動
float: left;

靠右浮動
float: right;

clear

不要靠左浮動
clear: left;

不要靠右浮動
clear: right;

不要靠兩邊浮動
clear: both;

float會把沒內容的父區塊的背景吃掉，需要用一些手段把區塊獨立出來，背景才會正常的顯示。

解法：
被吃掉的區塊的class裡加上下列其一屬性

overflow: hidden;
display: table;

或，新增一個偽元素給該區塊使用

定位 Position

定義區塊的位置

相對定位

會保留原本自己的位置，根據原本位置相對移動(從原本的位置定位)
position:relative;

絕對定位

脫離原本的正常流向獨立出來，被設定絕對定位的元素會往外找定位點，若沒有定位點會再往外找，都找不到的話，最後會以瀏覽器左上角為定位點。(從父元素開始定位)
position:absolute;

固定定位

頁面滑動的時候仍固定在定位點上，不會改變位置(從瀏覽器畫面開始定位)
position: fixed;

position的層級會大於float，所以被設定成position的元素會壓在flaot的區塊上
使用absolute，要確保父元素有定位點

骰子練習

解題方法

結構先出來
設定樣式
設定定位樣式
把樣式指定回去

圖層順序，預設0
z-index:1;

全域樣式







<!-- 全域樣式，可以自訂預設的樣式 -->
<style>
*{
    /* 把排序的點點拿掉 */
    list-style: none;
}
</style>

語意化標籤
其實沒甚麼意思，只是早期都是用<div>去作區塊，現在html5有更多類似用法的標籤，可以幫助辨識區塊內容，例如<section>或<article>

Transform 移動

視窗高度
height:100vh;

視窗寬度
width: 100vh;

偏移量(x軸,Y軸) xy正值:右下/xy負值:左上
transform: translate(50px, 100px);

若使用%，實際長度會以元素本身尺寸計算，ex:width: 300px; => 50%(150px)

可設定單軸X移動
transform: translateX(50px);
可設定單軸Y移動
transform: translateY(50px);

縮放:數值為倍數，也可以是負數(倒影)
transform: scale(2);

改變區塊的原點:center center是預設，為Box的中心點，也可以是百分比
transform-origin: center center;
transform-origin: 50% 50%;

旋轉:數值為角度，要加單位
transform: rotate(45deg);

傾斜:數值為角度，要加單位(x軸,y軸)
transform: skew(45deg, 30deg);

多屬性的應用:先寫的效果先做，要用空格分開
transform: translate(100px) rotate(45deg) scale(2);

屬性由左至右套用，作用順序十分重要，改變順序會產生不同的結果。原因是作用後原點位置會不一樣。

選擇區塊nth-child(n)











<style>
    /* odd奇數 */
    section:nth-child(odd) {
        background: rgb(191, 255, 255);
    }

    /* even偶數 */
    section:nth-child(even) {
        background: rgb(255, 255, 199);
    }
</style>

Transition 轉場

兩個樣式之間漸進式的轉換過程
一個起始樣式，另一個是結束的樣式，瀏覽器會將兩個樣式之間的變化形成補間動畫(Tween)
必須要有觸發動作，最常見的是:hover

滑鼠指到後要做的效果hover





<style>
    .box:hover {
        background: red;
    }
</style>

轉場屬性
transition-property: background;

持續時間
transition-duration: 3s;

轉場速率 ease、linear、ease-in、ease-out、ease-in-out
transition-timing-function: ease;

延遲時間
transition-delay: 1s;

transition的縮寫















<style>
.box{
    /* 縮寫 */
    transition:
        background 0.3s,
        width 1s,
        height 1s,
        transform 1s ease-in-out 1.5s,
        top 1s,
        left 1s;
    /* 或是寫成這樣，意思是全部屬性都1秒做完  */
    transition: 1s;
    
}
</style>

transition 可控制屬性

[Transform 變形]
translate
rotate
scale
skew

[顏色]
color
background-color
border-color

[文字]
font-size
opacity
line-height
letter-spacing
word-spacing

[盒模型]
width
height
margin
padding
border

[定位]
top
right
bottom
left

Animation 動畫

Transition
1.需要觸發條件(:hover)，兩種樣式狀態之間的漸進改變。
2.無法在網頁載入時自動發生，而且是一次性，必須重新再觸發一次。

Animation
1.產生更複雜的動畫，可以設定關鍵影格(keyframes)控制動畫進度。
2.網頁載入時自動撥放，且可以重複來回撥放。

建立動畫 animation
步驟一，必須建立一組關鍵影格(keyframes)，並設定動畫名稱(自訂義)











<style>
@keyframes animaiton{
    from{
        ...
    }

    to{
        ...
    }
}
</style>

from、to也可以寫作0%、100%，也可以拆成0%、10%、80%、100%

步驟二，套用動畫到各種選擇器或創建一個動畫專用的class，設定動畫各種屬性

















<style>
.animation{
animation-name: animation;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-direction:alternate;
animation-delay:0s;
animation-fill-mode:forwards;
}
</style>
...
<body>
<div class="animation">
    ...
</div>
</body>

動畫名稱
animation-name: animation;

持續時間
animation-duration: 1s;

播放次數:預設1次，infinite無限次
animation-iteration-count: infinite;

播放速率預設ease、linear、ease-in、ease-out、ease-in-out
animation-timing-function: linear;

播放方向
animation-direction: normal; 正向播放(預設)
animation-direction: reverse; 反向播放
animation-direction: alternate; 交替播放，奇數正向播放，偶數反向播放 0~100% => 100%~0%
animation-direction: alternate-reverse; 交替播放，奇數反向播放，偶數正向播放 100%~0% => 0%~100%

延遲時間
animation-delay: 0s;

播放後的狀態
animation-fill-mode: forwards; 保留動畫結束後的樣式
animation-fill-mode: backwards; 返回動畫一開始的樣式

縮寫
animation: animation 5s infinite 0s ease alternate forwards;

選顏色的網站
ColorSpace
uiGradient
EvaDesignColor

Filter 濾鏡

模糊:值越大越模糊
filter: blur(0px);

亮度:值越大越亮 0%黑色 100%正常 100%以上強烈
filter: brightness(0%);

對比:值越大對比度越高 0%灰色 100%正常 100%以上強烈
filter: contrast(0%);

drop-shadow 可以顯示物件形狀的陰影，包含邊框周圍(內、外)、文字外框等陰影
filter: drop-shadow(0px 0px 5px #f00);

灰階:0%正常 100%完全灰階
filter: grayscale(0%);

色相旋轉霓虹燈效果
filter: hue-rotate(360deg);

負片 0%正常 100%負片
filter: invert(100%);

透明 0%透明 100%正常
filter: opacity(0%);

飽和度 0%不飽和 100%正常
filter: saturate(0%);

泛黃相片 0%正常 100%泛黃
filter: sepia(100%);

頁面布局練習

結構先出來
可以把分好的區塊用註解包起來，這樣看起來會很清楚喔
把標籤樣式重設
Eric Meyer’s “Reset CSS” 2.0
建立自己的css

外部字形
google免費字形

display:inline-block;在排版上可能會有4px的距離產生

這個時候只要在父元素裡面，把字的大小改成0

偽元素偽類

屬性選擇器










<style>
/* 偽元素 */
input::placeholder{
    padding-left: 1rem;
}
/* 屬性選擇器 */
input[type='search']:focus{
    filter: drop-shadow(0px 0px 10px rgba(12,121,0));
}
</style>

Font Awesome (用在css的免費icon圖庫)
Download>下載FreeforWeb>解壓縮>留下css及webfonts資料夾，其他砍掉>css資料夾裡留下all.min.css，其他砍掉>將css及webfonts資料夾放到自己的專案內

css瀏覽器樣式前綴
把背景的樣式弄到文字上(支援chrome/safari)
-webkit-background-clip: text;

可以用這個屬性嗎?
查詢各大瀏覽器支援的屬性











<style>
/* 選擇器 hover 到 a 的時候， i 要做變化 */
#navbar .menu a:hover i{
    font-size: 1.3rem;
    background: linear-gradient(73deg,rgb(101, 74, 255),rgb(255, 237, 74));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
</style>

選擇器參考手冊

滑鼠指標變成點選的樣式
cursor: pointer

進階選擇器

對文件做一個reset的動作





*{
    margin: 0;
    padding: 0;
    list-style: none;
}

屬性選擇器

































/* 單屬性 */
a[title="google"] {
    color: green;
}

a[title="yahoo"] {
    color: red;
}

/* 多屬性 */
a[href="http://www.google.com"][title="google"] {
    color: goldenrod;
}

/* 屬性中，包含 '/100/100/' 字串的元素，用 *= 找 */
img[src*="/100/100/"] {
    border: 5px solid green;
}

/* 屬性中，開頭是 'https://picsum.photos' 字串的元素，用 ^= 找 */
img[src^="https://picsum.photos"] {
    outline: 5px solid yellow;
}

/* 屬性中，結尾是 'random=3' 字串的元素，用 $= 找 */
img[src$="random=3"] {
    width: 150px;
}

/* 屬性中，前後有空白的 'two' 字串的元素，用 ~= 找  */
img[class~="two"] {
    margin-right: 0.5rem;
}

兄弟選擇器











/* 屬性中，選擇 h2 同一層的第一個 p，用 + 找 */
.case1 h2+p {
    color: red;
}

/* 屬性中，選擇 h2 同一層的全部的 p，用 ~ 找 */
.case2 h2~p {
    color: blue;
}

虛擬類別(偽類) 選擇器:(單冒號)





























/* 虛擬類別(偽類) */
input[type="text"]:focus {
    width: 350px;
}

h1:focus {
    color: blue;
}

input[type="text"]:enabled {
    color: white;
    background: black;
}

input[type="password"]:disabled {
    background: red;
}

input[type="password"]::placeholder {
    color: white;
    text-align: right;
    padding-right: 0.5rem;
}

/* :checked */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    filter: drop-shadow(0 0 3px rgb(212, 0, 255));
}

nth-child

child 適合用在單一類型的元素項目

:first-child第一個兒子
:last-child最後一個兒子
:nth-child(n)第幾個兒子
:nth-child(odd)奇數
:nth-child(even)偶數
:nth-child(XN+n)第n個兒子開始，重複XN再做一次選擇，例如:2N+3 指從第3個開始選擇，接著每第2個選擇一次
:nth-last-child(n) 可以從最後面開始選擇第n個


































/* first-child第一個子元素 */
#child :first-child {
    color: red;
}

/* last-child最後一個子元素 */
#child :last-child {
    color: red;
}

/* nth-child 第幾個子元素 */
#nth-child :nth-child(1) {
    color: blue;
}

/* nth-last-child 倒數第幾個子元素 */
#nth-child :nth-last-child(1) {
    color: blue;
}

/* odd 奇數 */
#nth-child-2 :nth-child(odd) {
    color: green;
}

/* even 偶數 */
#nth-child-2 :nth-child(even) {
    color: purple;
}

/* nth-child(Xn+n) */
#nth-child-3 :nth-child(3n+3) {
    color: red;
}

type

混和許多元素項目時，使用type

:first-of-type選擇同類型中的第一個元素
:last-of-type選擇同類型中的最後一個元素















#type div:first-of-type {
    color: red;
}

#type p:first-of-type {
    color: green;
}

#type div:last-of-type {
    color: red;
}

#type p:last-of-type {
    color: green;
}

nth-of-type

:nth-of-type(n)選擇同類型中的第n個元素
:nth-last-of-type(n)可以從最後面開始選擇類型的第n個
:nth-of-type(odd)奇數
:nth-of-type(even)偶數























#nth-of-type div:nth-of-type(1) {
    color: red;
}

#nth-of-type p:nth-of-type(1) {
    color: green;
}

#nth-of-type div:nth-last-of-type(1) {
    color: red;
}

#nth-of-type p:nth-last-of-type(1) {
    color: green;
}

#nth-of-type-2 div:nth-of-type(odd) {
    color: red;
}

#nth-of-type-2 p:nth-of-type(even) {
    color: green;
}

not

:not()否定掉括號中的條件，其他都要。



.menu2 li:not(.no) {
    color: blue;
}

虛擬元素(偽元素)::雙冒號

偽元素家族有::first-letter、::first-line、::selection、::placeholder，另外，還有兩個最重要的::before、::after

::first-letter、::first-line、::selection

::first-letter 第一個字
::first-line 第一行
::selection 反白的時候














#pseudo-element::first-letter {
    font-size: 5rem;
    float: left;
    padding: 0 1rem;
}

#pseudo-element::first-line {
    color: blue;
}

#pseudo-element::selection {
    color: yellow;
    background-color: green;
}

height屬性如果用%去設定，在沒有指定外層的高度時，通常只會有內容的高度。

繼承瀏覽器的高度






<style>
html,body
{
    height:100%
}
</style>

Before After

::before、::after的display預設是inline，如果需要box屬性，就要指定Display:block;

有指定Position:absolute的時候，該元素會自動是display: block;

::before、::after 啟動條件與功用特性

必須、一定要有 content:'';(至少一定要有空內容)。
剛誕生的::before、::after為 inline 特性。
主要輔助本體，產生更多層次的樣式效果。
無法使用在置換元素(replaced element)，例如img、input

填滿box的兩種設定方式


    width: 100%;
    height: 100%;




    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

tags: 上課筆記

HTML&CSS

簡介

HTML是一種標記語言，非程式語言。

CSS用來給網頁的內容進行樣式上的編輯

HTML常用標籤

CSS

樣式表 style

網頁內含樣式表

連結外部樣式表

行內樣式

顏色使用方式

使用顏色名稱

使用HEX 16進位碼

使用rgb()

選擇器 Selector

Class 類別選擇器

ID選擇器

後代選擇器與子代選擇器

Font與Text常用屬性

Font

Text

背景 Background

盒模型 Box model

一個盒子由內而外的層級

盒子相關屬性

計算盒子的寬度

畫一個圓

區塊盒與行內盒 block and inline

區塊盒 block

行內盒 inline-block

轉型 display

浮動 Float

float

clear

定位 Position

相對定位

絕對定位

固定定位

骰子練習

Transform 移動

Transition 轉場

Animation 動畫

Filter 濾鏡

頁面布局練習

進階選擇器

屬性選擇器

兄弟選擇器

虛擬類別(偽類) 選擇器:(單冒號)

nth-child

type

nth-of-type

not

虛擬元素(偽元素)::雙冒號

::first-letter、::first-line、::selection

Before After

tags: `上課筆記`