# 常用的 CSS 選擇器與屬性 ###### tags: `CSS` `前端` 快速連結: [文字相關](#文字相關)、[邊界](#邊界)、[水平置中](#水平置中)、[display呈現方式](#display呈現方式) ## 簡介 階層式樣式表(Cascading Style Sheets)，簡稱 CSS。 用途是為 HTML 結構增添樣式，基本的結構如下 ```css=1 選擇器 { 屬性: 設定值; 屬性: 設定值; } ``` 如果要看英文文件的話： * 選擇器 = selector * 屬性 = attribute ## 種類 常見的 CSS 選擇器有三種分類： * 標籤選擇器 * 擬態選擇器 * 類別選擇器 ### 標籤選擇器 以 HTML 標籤為對象，一次更改所有標籤的樣式。 下面這個 css 就會將網頁中所有的 h2 變成棕色；將所有的 p 變成灰色 ```css=1 h1{ color: blue; } h2{ color: brown; } p{ color: gray } ``` ### 擬態選擇器 以「狀態」為對象更改樣式，最常使用的情境是在連結 **\<a>**，提高使用者體驗 ```css=1 a{ color: red; } a:hover { color: pink; } ``` 將滑鼠游標移動到連結上，連結就會變成粉紅色 ![](https://i.imgur.com/uAtYYZR.png) (win10 截圖太智慧，會自動幫我移除游標..總之就是游標移動到連結上，連結會變色) ### 類別選擇器 以自行定義的「類別」為對象更改樣式，應該是最常使用的選擇器了。 假設我有這樣的 HTML，我想讓第一段 \<p> 改變顏色，但其他段落不改，因此我幫第一個段落加上類別，也就是 ==class="first"== ```htmlmixed=1 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>我是網站標題</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>標題</h1> <p class="first"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam ullam totam, praesentium est dicta incidunt asperiores veniam obcaecati eaque. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam ullam totam, praesentium est dicta incidunt asperiores veniam obcaecati eaque. </p> </body> </html> ``` 接著在 css 加入類別選擇器(用符號 "." 加上類別名稱) ```css=1 .first { color: blue; } ``` 結果如下 ![](https://i.imgur.com/iJvQhsQ.png) ### 後代選擇器 這裡的「後代」指的是父類別、子類別當中的子類別，我可以用這種選擇器選取某個類別/元素底下的子元素。 基本語法是： ```css=1 父元素/類別 子元素/類別 { } ``` 下面舉個例子 ```htmlmixed=1 <div class="box"> <h1>標題</h1> <p class="first">段落</p> <p>段落</p> </div> ``` ```css=1 .box { color: blue; } ``` ![](https://i.imgur.com/R2VWpra.png) 如果我只希望 h1 變顏色，我可以將 css 改成下面這樣 ```css=1 .box h1{ color: blue; } ``` ![](https://i.imgur.com/3exL2fZ.png) 在更進一步，我只希望第一個段落變色，可以這樣寫 ```css=1 .box .first{ color: blue; } ``` ![](https://i.imgur.com/UVO5c5L.png) ## 常用的屬性 ### 文字相關 ### font-family 更改字體。常用的字體有 Verdana, Geneva, Tahoma, sans-serif；微軟正黑體 ### font-size 更改文字大小 ### font-weight 更改文字粗細。可用 ==bold== 加粗文字或是用數字 100-1000 設定粗細 ### line-height 更改行高。瀏覽器本身有預設值，以 Edge 來說是 1.25，常用的是 1.5。 數字的意思是「字體大小的 X 倍」。 也可以指定固定長度例如 27px 這樣。 ### text-align 文字對齊方向，預設是 left，可設定 right, center。 作用的對象是「子元素」，也就是包在自己裡面的 div, 文字, 圖片等等 [參考置中](#水平置中) ### text-indent 用來設定一個段落的第一行要有多少縮排，通常會設定兩個字的長度。 如果一個字是 16px，這個值就會設定為 32px ### text-decoration 底線: text-decoration: underline 畫線: text-decoration: line-through 備註: 可偷學新聞網站的 css 文字設定：字體、大小、行距 --- ### 邊界 ### border 為標籤周圍加上邊界，基本的寫法如下: ```css=1 h1{ border: 5px solid blue; /* 粗細 樣式 顏色*/ } ``` * 樣式通常只會用到 solid(實線)，其他樣式還有 dashed(虛線)、dotted(點點) * 只有樣式是必填欄位。粗細不指定預設是 3px；顏色部分會套用選擇器的顏色 --- ### 水平置中 這裡講的是「元素」的水平置中，語法如下 ```css=1 .box { margin-left: auto; margin-right: auto; } ``` 效果是無論瀏覽器的寬度如何改變，元素都會在瀏覽器的正中間 ![](https://i.imgur.com/vr60SJ7.png) 如果要置中的是「文字」則是用 **text-align: center** 這個屬性，但要注意作用的範圍，下面舉例： ```htmlmixed= <div class="box"> <p>段落</p> </div> ``` ```css= .box { width: 200px; height: 200px; border: 10px solid; margin-left: auto; margin-right: auto; text-align: center; /*嘗試將段落置中*/ } ``` ![](https://i.imgur.com/iMA7e3c.png) 如果我將 text-align 加在 .box 當中是不會起作用的，必須加在真正持有文字的 p 才有作用。 --- ### display(呈現方式) 改變元素的呈現方式，常用的有 * display: inline 將元素轉為行內元素 * display: block 將元素轉為區塊元素 * display: none 將元素從畫面上移除 --- 想嘗試更多選擇器可到 w3cschool 的文件挖掘 [連結](https://www.w3schools.com/cssref/css_selectors.asp)