1-3. CSS {屬性} 有哪些？（小字典）
CSS 是什麼？
階層式樣式表、串接樣式表（Cascading Style Sheets）簡稱：CSS，負責描述設計HTML的樣子，由 W3C 定義和維護。
認識 CSS {樣式} 語法格式
撰寫 CSS 的位置：
撰寫CSS的位置：
-
在HTML的標籤中直接設定style樣式，也稱為「行內樣式」，例如： <body style="background-color:gray;">。
撰寫CSS的位置：
-
在 </head> 的前面，加上 <style> ...... </style>，在這個標籤之中撰寫 CSS 樣式語言。
撰寫CSS的位置：
-
為了讓多個 HTML 檔案共用，或者為了優化程式碼，可以將 CSS 樣式規則另儲存在
xxxxx.css 檔案，
在 xxxxx.html 檔案中
</head> 的前面再設定
<link rel="stylesheet" href="xxxxx.css">。
在 xxxxx.html 檔案中 </head> 的前面再設定 <link rel="stylesheet" href="xxxxx.css">。
CSS 常用選取器
- 「選取器」是 CSS 樣式規則的規則名稱，也就是選擇來設計的物件。
基本選取器
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | * | * | 萬用選取器, 代表了所有的選取器。 | 2 | w3schools | runoob |
| 2 | tag標籤名稱 | body | 針對HTML標籤元素名稱當選取器。 | 1 | w3schools | runoob |
| 3 | #ID名稱 | #content | 針對HTML標籤元素設定的ID名稱當選取器。 | 1 | w3schools | runoob |
| 4 | .class類別名稱 | .container | 針對HTML標籤元素設定的class類別名稱當選取器。 | 1 | w3schools | runoob |
| 5 | 選取器 , 選取器 | div , p | 同時設定多個選取器。 | 1 | w3schools | runoob |
複合選取器
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | 選取器 選取器 | header img | 定義指定外層選取器 header 內的 "子" "孫" 元素 img 當選取器。 | 1 | w3schools | runoob |
| 2 | 選取器 > 選取器 | header > img | 定義指定外層選取器 header 內的 "子" 元素 img 當選取器。 | 2 | w3schools | runoob |
| 3 | 選取器 + 選取器 | header + div | 定義緊接在 header 後方同一層的元素 div 當選取器。 | 2 | w3schools | runoob |
| 4 | 選取器 ~ 選取器 | header ~ div | 定義在 header 後方同一層的所有元素 div 當選取器。 | 3 | w3schools | runoob |
虛擬類別選取器
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | :link | a:link | 連結標籤元素未點選存取時。 | 1 | w3schools | runoob |
| 2 | :visited | a:visited | 連結標籤元素已點選存取過。 | 1 | w3schools | runoob |
| 3 | :hover | a:hover | 連結標籤元素當滑鼠滑入上方時。 | 1 | w3schools | runoob |
| 4 | :active | a:active | 連結標籤元素當滑鼠在上方按著未放時。 | 1 | w3schools | runoob |
| 5 | :focus | a:focus | 使用滑鼠或鍵盤讓焦點停在元素上時。 | 2 | w3schools | runoob |
偽元素選取器 (所謂偽元素代表並非在DOM結構中的元素)
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | ::after | div::after | 在指定選取器 div 內的後方位置。 | 2 | w3schools | runoob |
| 2 | ::before | div::before | 在指定選取器 div 內的前方位置。 | 2 | w3schools | runoob |
| 3 | ::first-letter | p::first-letter | 在指定選取器 p 內的第一個字元。 | 1 | w3schools | runoob |
| 4 | ::first-line | p::first-line | 在指定選取器 p 內的第一行。 | 1 | w3schools | runoob |
| 5 | ::selection | ::selection | 滑鼠拖曳選取的部份。 | 3 | w3schools | runoob |
過濾挑選選取器
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | :first-child | p:first-child | 符合左側指定的元素, 並且是所屬層次中的第一個子元素。 | 2 | w3schools | runoob |
| 2 | :last-child | p:last-child | 符合左側指定的元素, 並且是所屬層次中的最後一個子元素。 | 3 | w3schools | runoob |
| 3 | :only-child | p:only-child | 符合左側指定的元素, 並且是所屬層次中的唯一子元素。 | 3 | w3schools | runoob |
| 4 | :nth-child(n) | p:nth-child(n) | 符合左側指定的元素, 並且是所屬層次中符合第 n 個子元素。（可以指定 odd奇數、even偶數、an+b） | 3 | w3schools | runoob |
| 5 | :nth-last-child(n) | p:nth-last-child(n) | 符合左側指定的元素, 並且是所屬層次中符合倒數第 n 個子元素。 | 3 | w3schools | runoob |
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | :first-of-type | p:first-of-type | 在所屬層次中符合左側指定元素的第一個元素。 | 3 | w3schools | runoob |
| 2 | :last-of-type | p:last-of-type | 在所屬層次中符合左側指定元素的最後一個元素。 | 3 | w3schools | runoob |
| 3 | :only-of-type | p:only-of-type | 在所屬層次中符合指定元素p, 並且只有一個指定元素p。 | 3 | w3schools | runoob |
| 4 | :nth-of-type(n) | p:nth-of-type(n) | 在所屬層次中符合第 n 個指定元素 p。（可以指定 odd奇數、even偶數、an+b） | 3 | w3schools | runoob |
| 5 | :nth-last-of-type(n) | p:nth-last-of-type(n) | 在所屬層次中符合倒數第 n 個指定元素 p。 | 3 | w3schools | runoob |
屬性選取器
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | [attribute屬性] | [target] | 選擇所有帶有 target 目標屬性元素。 | 2 | w3schools | runoob |
| 2 | [attribute屬性=value] | [target=_blank] | 選擇所有使用 target = "_blank" 的元素。 | 2 | w3schools | runoob |
| 3 | [attribute屬性^=value] | a [href ^= "https"] | 選擇每一個 src 屬性的值以 "https" 開頭的元素。 | 3 | w3schools | runoob |
| 4 | [attribute屬性$=value] | a [href $= ".pdf"] | 選擇每一個 src 屬性的值以 ".pdf" 结尾的元素。 | 3 | w3schools | runoob |
| 5 | [attribute屬性*=value] | a [href *= "test"] | 選擇每一個 src 屬性的值 包含 字串 "test" 的元素。 | 3 | w3schools | runoob |
其他 CSS 選取器（規則名稱）多看看多了解：
CSS 常用屬性【分類】
- background 背景屬性
- 寬高尺寸類屬性
- Padding 內邊距類屬性
- margin 外邊距類屬性
- border 邊框類屬性
- 相關內容文字類旳屬性
- list 清單類屬性
- table 表格類屬性
- float 浮動類屬性
- position 定位類屬性
- flex 彈性框類的屬性
- transform 變形類屬性
- transition 轉場過程屬性
- animation 動畫類屬性
背景類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | background | 背景類屬性合併的寫法，但 CSS3 新屬性部份不能合併。 | w3schools | runoob | |
| 2 | background-color | 背景顏色。 | w3schools | runoob | |
| 3 | background-image | 設計背景影像。 | w3schools | runoob | |
| 4 | background-repeat | 設計背景影像的重複方式，預設是完全重複。 | w3schools | runoob | |
| 5 | background-position | 設計背景影像的定位方式，預設是左上角。 | w3schools | runoob | |
| 6 | background-attachment | 設計背景影像是否與頁面同時移動，預設是 scroll 會移動，可以設定 fixed 則固定不移動。 | w3schools | runoob | |
| 7 | background-size | 設計背景影像的寬高尺寸。 | V | w3schools | runoob |
寬高尺寸類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | width | 設定框架的固定寬度。 | w3schools | runoob | |
| 2 | max-width | 設定框架的最大寬度。 | w3schools | runoob | |
| 3 | min-width | 設定框架的最小寬度。 | w3schools | runoob | |
| 4 | height | 設定框架的固定高度。 | w3schools | runoob | |
| 5 | max-height | 設定框架的最大高度。 | w3schools | runoob | |
| 6 | min-height | 設定框架的最小高度。 | w3schools | runoob |
Padding 內邊距類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | padding | 可以合併縮寫設定框架內部四周的留白邊界。 | w3schools | runoob | |
| 2 | padding-top | 設定框架內部上方留白的邊界。 | w3schools | runoob | |
| 3 | padding-right | 設定框架內部右側留白的邊界。 | w3schools | runoob | |
| 4 | padding-bottom | 設定框架內部下方留白的邊界。 | w3schools | runoob | |
| 5 | padding-left | 設定框架內部左側留白的邊界。 | w3schools | runoob |
margin 外邊距類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | margin | 可以合併縮寫設定框架外部四周的留白邊距。 | w3schools | runoob | |
| 2 | margin-top | 設定框架外部上方留白的邊距。 | w3schools | runoob | |
| 3 | margin-right | 設定框架外部右側留白的邊距。 | w3schools | runoob | |
| 4 | margin-bottom | 設定框架外部下方留白的邊距。 | w3schools | runoob | |
| 5 | margin-left | 設定框架外部左側留白的邊距。 | w3schools | runoob |
邊框類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | border | 框架邊框的設計，可以合併縮寫同時設計邊框的四周，同時設定寬度、樣式、顏色。 | w3schools | runoob | |
| 2 | border-width | 設定邊框的寬度 (也就是粗細)。 | w3schools | runoob | |
| 3 | border-style | 設定邊框的樣式。 | w3schools | runoob | |
| 4 | border-color | 設定邊框的顏色。 | w3schools | runoob | |
| 5 | 可以分別只設定一個邊， 例如：border-left、border-right、border-top、border-bottom。 |
||||
| 6 | border-radius | 設計框架四周圓角。 | V | w3schools | runoob |
| 7 | 可以分別使用，例如： border-top-left-radius 設定左上角圓角， border-top-right-radius 設定右上角圓角， border-bottom-left-radius 設定左下角圓角， border-bottom-right-radius 設定右下角圓角。 |
V | |||
| 8 | box-shadow | 設計框架的陰影。 box-shadow: 水平偏移距離 垂直偏移距離 模糊擴散範圍 顏色; |
V | w3schools | runoob |
邊框樣式 solid 實心線
邊框樣式 dashed 虛線
邊框樣式 dotted 點線
邊框樣式 double 雙線
groove 溝道狀 (凹下去再凸起來)
ridge 山脊狀 (凸上去再凹下來)
inset 凹下狀 (凹下去)
outset 凸起狀 (凸上去)
內容文字類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | color | 設定文字的顏色。 | w3schools | runoob | |
| 2 | font | 設定字體各種屬性的合併縮寫，包含 font-style, font-variant, font-weight, font-size/line-height, and the font-family。 | w3schools | runoob | |
| 3 | font-family | 設定文字字體。 | w3schools | runoob | |
| 5 | font-weight | 設定字體粗細。 | w3schools | runoob | |
| 6 | font-style | 設定字體樣式是否為斜體。 | w3schools | runoob | |
| 7 | letter-spacing | 設定文字字元間距。 | w3schools | runoob | |
| 8 | line-height | 設定文字行高。 | w3schools | runoob | |
| 9 | text-align | 設定內容文本（擁有 inline 特性的元素：文字、插圖）的水平對齊模式，有靠左、靠右、置中、靠左齊行。 | w3schools | runoob | |
| 10 | text-decoration | 設定文字的裝飾線條，有上線、下線、中間刪除線。 | w3schools | runoob | |
| 11 | text-indent | 設定段落中的首行縮排。 | w3schools | runoob | |
| 12 | vertical-align | 設定擁有 inline 特性的元素與左右物件 ( 文字、影像 … ) 垂直對齊的方式。 | w3schools | runoob | |
| 13 | white-space | 設定文字過多超過行寬時，文字之間遇空白是否會換行。 | w3schools | runoob | |
| 14 | text-overflow | 設定文字超行寬的部份以何方式呈現。 | V | w3schools | runoob |
| 15 | text-shadow | 設定文字的陰影。 | V | w3schools | runoob |
| 16 | word-break | 設定文字換行的規則。允許在單詞內換行或是只能在半形空格或連字符處換行。 | V | w3schools | runoob |
| 17 | word-wrap | 設定文字換行的規則。允許在長單詞或URL地址內部進行換行。 | V | w3schools | runoob |
清單類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | list-style | 設定 <ul> <ol> <li> 的樣式。含 list-style-type、list-style-image、list-style-position。 | w3schools | runoob | |
| 2 | list-style-type | 設定清單前方顯示的符號。 | w3schools | runoob | |
| 3 | list-style-image | 設定清單前方顯示的影像。 | w3schools | runoob | |
| 4 | list-style-position | 設定清單前方符號顯示縮排或凸排（預設：凸排）。 | w3schools | runoob |
表格類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | border-collapse | 設定是否合併表格邊框。 | w3schools | runoob | |
| 2 | border-spacing | 設定相鄰單元格邊框之間的距離。 | w3schools | runoob |
float 浮動類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | float | 定義框架的浮動排版。 float: left 靠左浮動 float: right 靠右浮動。 |
w3schools | runoob | |
| 2 | clear | 定義結束以上元素的浮動排版。 | w3schools | runoob | |
| 3 | overflow |
(1) 設定框架內容超出框架的部份該如何表現，有 visible、hidden、scroll、auto…。 (2) 如果框架沒有設定固定高度，並且內容的子元素為浮動排版，那麼框架的高度會包含所有子元素。 有關 overflow 的測試介紹，可以查看講義【1-5】的【第4個小單元】 |
w3schools | runoob | |
| 4 | overflow-x | 設定框架內容水平範圍超出框架的部份該如何表現。 | V | w3schools | runoob |
| 5 | overflow-y | 設定框架內容垂直範圍超出框架的部份該如何表現。 | V | w3schools | runoob |
position 定位類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | position | 設定框架的定位模式，有５種模式 (參考下方介紹)。 | w3schools | runoob | |
| 2 | top | 框架有定位能力時設定上方與父層的距離。 | w3schools | runoob | |
| 3 | right | 框架有定位能力時設定右側與父層的距離。 | w3schools | runoob | |
| 4 | bottom | 框架有定位能力時設定下方與父層的距離。 | w3schools | runoob | |
| 5 | left | 框架有定位能力時設定左側與父層的距離。 | w3schools | runoob | |
| 6 | z-index | 框架有定位能力時設定重疊前後的層級。 | w3schools | runoob |
flex 彈性框類的屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | flex-direction | 設定 display: flex 之後，flex-direction 決定子元素的排版方向。 | V | w3schools | runoob |
| 2 | justify-content | 設定 Flex Box 中子元素的水平對齊方式（尚未改變方向時）。 | V | w3schools | runoob |
| 3 | align-items | 設定 Flex Box 中子元素依文字的垂直對齊方式（尚未改變方向時）。 | V | w3schools | runoob |
| 4 | align-content | 設定 Flex Box 中子元素依框架的垂直對齊方式（尚未改變方向時）。 | V | w3schools | runoob |
| 5 | flex-wrap | 設定 Flex Box 中的子元素是否允許換行。 | V | w3schools | runoob |
transform 變形類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | transform | 設定物件的變形，包含 scale縮放、rotate旋轉、skew頃斜、translate偏移。 | V | w3schools | runoob |
| 2 | transform-origin | 設定物件的變形時定位不動的位置。 | V | w3schools | runoob |
transition 轉場過程屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | transition | 設定物件轉場過程，包含 transition-property、transition-duration、transition-timing-function、transition-delay … 的合併寫法。 | V | w3schools | runoob |
| 2 | transition-property | 設定物件轉場過程變化的屬性。 | V | w3schools | runoob |
| 3 | transition-duration | 設定物件轉場過程變化的時間。 | V | w3schools | runoob |
| 4 | transition-delay | 設定物件轉場過程變化的延遲時間。 | V | w3schools | runoob |
| 5 | transition-timing-function | 設定物件轉場過程變化的加減速特效函式。 | V | w3schools | runoob |
animation 動畫類屬性
| NO | 屬性 | 說明 | CSS3 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|
| 1 | @keyframes | 定義一個動畫，@keyframes 定義的動畫名稱用來被 animation-name 所使用。 | V | w3schools | runoob |
| 2 | animation | 設定物件的動畫效果，包含 animation-name、animation-duration、animation-delay、animation-iteration-count、animation-timing-function … 的合併寫法。 | V | w3schools | runoob |
| 3 | animation-name | 設定物件動畫效果時配合的 @keyframes 名稱。 | V | w3schools | runoob |
| 4 | animation-duration | 設定物件的動畫時間。 | V | w3schools | runoob |
| 5 | animation-delay | 設定物件動畫的延遲時間。 | V | w3schools | runoob |
| 6 | animation-iteration-count | 設定物件動畫的重覆次數。 | V | w3schools | runoob |
| 7 | animation-timing-function | 設定物件動畫的加減速特效函式。 | V | w3schools | runoob |
更多介紹
:nth-child vs :nth-of-type
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | :first-child | p:first-child | 符合左側指定的元素, 並且是所屬層次中的第一個子元素。 | 2 | w3schools | runoob |
| 2 | :last-child | p:last-child | 符合左側指定的元素, 並且是所屬層次中的最後一個子元素。 | 3 | w3schools | runoob |
| 3 | :only-child | p:only-child | 符合左側指定的元素, 並且是所屬層次中的唯一子元素。 | 3 | w3schools | runoob |
| 4 | :nth-child(n) | p:nth-child(n) | 符合左側指定的元素, 並且是所屬層次中符合第 n 個子元素。（可以指定 odd奇數、even偶數、an+b） | 3 | w3schools | runoob |
| 5 | :nth-last-child(n) | p:nth-last-child(n) | 符合左側指定的元素, 並且是所屬層次中符合倒數第 n 個子元素。 | 3 | w3schools | runoob |
| NO | 選取器 | 舉例 | 說明 | 版本 | 英文參考網 | 簡中參考網 |
|---|---|---|---|---|---|---|
| 1 | :first-of-type | p:first-of-type | 在所屬層次中符合左側指定元素的第一個元素。 | 3 | w3schools | runoob |
| 2 | :last-of-type | p:last-of-type | 在所屬層次中符合左側指定元素的最後一個元素。 | 3 | w3schools | runoob |
| 3 | :only-of-type | p:only-of-type | 在所屬層次中符合指定元素p, 並且只有一個指定元素p。 | 3 | w3schools | runoob |
| 4 | :nth-of-type(n) | p:nth-of-type(n) | 在所屬層次中符合第 n 個指定元素 p。（可以指定 odd奇數、even偶數、an+b） | 3 | w3schools | runoob |
| 5 | :nth-last-of-type(n) | p:nth-last-of-type(n) | 在所屬層次中符合倒數第 n 個指定元素 p。 | 3 | w3schools | runoob |
範例原始碼
<h2 style="text-align:center"> 測試 :nth-child 與 :nth-of-type </h2>
<p> 1111111111 </p>
<p class="abc"> 2222222222 </p>
<p class="abc"> 3333333333 </p>
<p> 4444444444 </p>
<p> 5555555555 </p>
<p> 6666666666 </p>
<div> 777777777777 </div>
<div class="abc"> 777777777777 </div>
<div>
<p> 111111111 </p>
<p> 2222222222 </p>
<p class="abc"> 3333333333 </p>
<p> 4444444444 </p>
<p> 5555555555 </p>
<p> 6666666666 </p>
</div>
<div class="abc"> 777777777777 </div>
<style>
div { background-color: #b4e2ff; padding: 5px; margin: 10px; }
</style>
範例測試
這是<h2>測試相關 -child 與 -of-type
這是<p>1111111111
這是<p class="abc">2222222222
這是<p class="abc">3333333333
這是<p>4444444444
這是<p>5555555555
這是<p>6666666666
這是<div>777777777777 ( 藍色區域都是 div )
這是<div class="abc">777777777777
這是<p>1111111111
這是<p>2222222222
這是<p class="abc">3333333333
這是<p>4444444444
這是<p>5555555555
這是<p>6666666666
這是<div class="abc">777777777777
文字屬性測試
測試斷字換行的設計
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
測試超出區塊寬度多餘文字隱藏換刪節符號
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.