根據W3school CSS教程的部分總結

優先順序

1. 行內樣式（在 HTML 元素中<h1 style="color:red;">CSS</h1>）
2. 外部和內部樣式表（在 head 部分）
3. 瀏覽器預設樣式

如果在不同樣式表中為同一選擇器（元素）定義了一些屬性，則將使用最後讀取的樣式表中的值。

註釋

位於style元素內的 CSS 註釋，以 /* 開始，以 */ 結束

<!--...--> 語法在 HTML 原始碼中添加註釋

CSS背景

background屬性簡寫：

background: #ffffff url("tree.png") no-repeat right top;
}
 

CSS邊框

border 屬性指定元素邊框的樣式、寬度和顏色。

border-radius 屬性設定圓角邊框。

border屬性簡寫：

border: 5px solid red;

/*可以指定上下左右*/
border-left: 6px solid red;

border-top-style: dotted;

border-style 屬性允許以下值：

border-radius 屬性用於向元素新增圓角邊框：

border-radius: 5px;

CSS框模型

元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

css外邊距

CSS margin 屬性用於在任何定義的邊框之外，為元素周圍建立空間。

margin可指定上右下左（順時針）外邊距。

margin-top / margin-right / margin-bottom / margin-left

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

CSS內邊距

CSS padding 屬性用於在任何定義的邊界內的元素內容周圍生成空間。

內邊距和元素寬度

CSS width 屬性指定元素內容區域的寬度。內容區域是元素（盒模型）的內邊距、邊框和外邊距內的部分。

在指定元素寬度的情況下，設定內邊距會使元素實際寬度增加。

要保持元素寬度，可設定box-sizing屬性border-box，但元素的可用內容空間會減少。

Box Sizing屬性

定義元素寬度和高度的計算方式：它們是否應包含內邊距（padding）和邊框。

* {
  box-sizing: border-box;
}

CSS設定高度和寬度

height 和 width 屬性用於設定元素的高度和寬度，不包括內邊距、邊框或外邊距。它設定的是元素內邊距、邊框以及外邊距內的區域的高度或寬度。

max-width可設定元素的最大寬度。

CSS輪廓

輪廓是在元素周圍繪製的一條線，在邊框之外，以凸顯元素。

簡寫outline屬性：

outline: 5px solid yellow;

注意：輪廓與邊框不同！不同之處在於：輪廓是在元素邊框之外繪製的，並且可能與其他內容重疊。同樣，輪廓也不是元素尺寸的一部分；元素的總寬度和高度不受輪廓線寬度的影響。

CSS文字

字型

通用字型族

字型屬性

簡寫font屬性：

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

圖示

使用圖示庫將指定的圖示類的名稱新增到任何行內 HTML 元素（如 i 或 span），以下為bootstrap圖示和Google圖示

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<i class="glyphicon glyphicon-cloud"></i>


<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<i class="material-icons">cloud</i>

連結

連結有四種狀態，可根據連結狀態設定不同的連結樣式。

列表 list-style

簡寫屬性：

ul {
  list-style: square inside url("sqpurple.gif");
}

表格