其他筆記:

此筆記內容:

CSS筆記

CSS 語法

github 語法：選擇器（標記）{屬性：值；屬性：值}。

註解

CSS的註解可以用/* */，最好不要使用//。

ID

加井字號（#）代表是ID，最好不要重複。ID可以指定某一個元素修改樣式。 
範例:
這是深藍色!
#p3 { color: darkblue; } <p id="p3">這是深藍色!</p>

Class

加點（.）代表是class可以指定很多元素修改樣式，class可以多個同時使用。 
範例:
此筆記這個灰色的外框就是Class!
.box{ margin: auto; background-color: darkgray; } <p class="box">此筆記這個的外框就是Class!</p>

星號

使用星號（*）代表全部套用。 
範例:
將所有文字向左對齊。
*{ text-align: left; }

背景圖片

可以使用background-image來設定背景圖， background-repeat可以設定x軸或y軸重複圖片， background-attachment可以決定背景圖片是否固定，fixed不會跟著捲動。 body { background-image: url("圖片"); background-repeat: repeat-x; background-attachment: fixed; }

文字邊線

可以使用border-style來設定文字邊線， border-width決定線條寬度， border-radius決定邊角圓度。 
範例:

A dotted border.

p.dotted {border-style: dotted;}

A dashed border.

p.dashed {border-style: dashed;}

A solid border.

p.solid {border-style: solid;}

A double border.

p.double {border-style: double;}

A groove border.

p.groove {border-style: groove;}

A ridge border.

p.ridge {border-style: ridge;}

An inset border.

p.inset {border-style: inset;}

An outset border.

p.outset {border-style: outset;}

No border.

p.none {border-style: none;}
p.hidden {border-style: hidden;}

A mixed border.

p.mix {border-style: dotted dashed solid double;}

Roundest border

border-radius: 12px;

文字對齊

可以使用text-align來設定文字向哪邊對齊。 
範例:

向左邊對齊

向中間對齊

向右邊對齊

.center { text-align: center; } .left{ text-align: left; } .right { text-align: right; }

文字裝飾

可以使用text-decoration來設定文字的裝飾線。 
範例:

這是上面的線

這是刪除線

這是底線

這是雙線

.overline { text-decoration-line: overline; } .line-through { text-decoration-line: line-through; } .underline { text-decoration-line: underline; } .overline-underline { text-decoration-line: overline underline; }

文字轉換

可以使用text-transform來轉換文字的大小寫。 
範例:

This can converts the text to uppercase.

This can converts the text to lowercase.

This can converts the first text to uppercase.

.uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; }

文字間隙

可以使用letter-spacing來轉換文字的大小寫。 
範例:

這是正常的文字間隙

這是8px的文字間隙

.spacing { letter-spacing: 8px; }

超鏈結顏色

超鏈接可以根據狀態來改變顏色。 
範例:google

還沒拜訪過時是link，拜訪過後是visited，滑鼠在上面是hover，active是正選是正選著。
a:link { color: red; } a:visited { color: green; } a:hover { color: hotpink; } a:active { color: blue; }

展示

display屬性可以決定顯示塊狀(會換行)或同一行或不顯示。 
範例:display: none = 不顯示，
    display: inline = 在同一行，
    display: block = 塊狀(換行)。

Box Model

可以使用margin來設定線條外大小， border-width決定線條大小， padding設定線條裡的大小， 也可以指定上下左右的寬度。 
例如:margin: 25px 50px 75px 100px;
          margin: (上) (左) (下) (右);
    或    margin: 25px 50px;
          margin: (上左) (下右);
github