CSS學習——基礎選擇器
阿新 • • 發佈：2018-12-12
前言
前面學完了CSS的簡介和使用。我有學習了CSS的基礎選擇器，下面分享一下我的學習筆記。
選擇器
選擇器寫法
選擇器{
屬性名稱：屬性值；
屬性名稱2：屬性值2；
...
}
基礎選擇器
1.id選擇器
id選擇器是通過在html標籤中設定id屬性，在style標籤裡面用#id名稱找到id用css程式碼設定樣式。
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ color: red; } </style> </head> <body> <div id="box">這是一個盒子</div> </body> </html>
效果圖：
2.類選擇器
類選擇器是通過在html標籤中設定class屬性，在style標籤裡面用class名稱.找到class名稱用css程式碼設定樣式。
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ color: green; } </style> </head> <body> <div class="box">這是一個盒子</div> </body> </html>
效果圖：
3.標籤選擇器
標籤選擇器是通過在html頁面中，在style標籤裡面用標籤名稱.找到標籤用css程式碼設定樣式。
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: blue; } </style> </head> <body> <p>這是一個盒子</p> <p>這是一個盒子</p> <p>這是一個盒子</p> <p>這是一個盒子</p> </body> </html>
效果圖：
