CSS語法規范
- CSS規則由兩個主要的部分構成：選擇器以及一潭訓多條宣告，
p{
color: red;
font-size: 12px;
}
CSS代碼風格
-
樣式格式書寫
-
緊湊格式
-
h3 {color: deeppink;font-size:20px} -
展開格式
-
h3 { color: deeppink; font-size:20px } -
推薦展開格式書寫，因為直觀
-
-
樣式大小寫風格
-
h3 { color: deeppink; } -
h3 { COLOR: deeppink; } -
推薦樣式選擇器、屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外
-
-
樣式空格風格
-
h3 { color: deeppink; } -
- 屬性值前面，冒號后面，保留一個空格
- 選擇器（標簽）和大括號中間保留空格
-
CSS基礎選擇器
-
CSS選擇器的作用
-
<div>我是div</div> <p>我是段落</p> -
根據不同的需求把不同的標簽選出來這就是選擇器的作用，簡單來說就是選擇標簽用的
-
CSS做兩件事
- 找到所有選擇的標簽
- 設定這些標簽的樣式
-
-
選擇器分類
-
選擇器分為基礎選擇器 和復合選擇器 兩大類
-
基礎選擇器是由單個選擇器組成
-
基礎選擇器包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器
-
標簽選擇器
-
標簽名{ 屬性1：屬性值1； 屬性2：屬性值2； 屬性3：屬性值3； } -
作用：可以把某一類標簽全部選擇出來，
-
優點：能快速為頁面中同型別的標簽統一設定樣式
-
缺點：不能設計差異化樣式，只能選擇全部的當前標簽
-
類選擇器
-
.類名{ 屬性1：屬性值1； 屬性2：屬性值2； 屬性3：屬性值3； } -
類選擇器口訣：
- 樣式點定義，結構類（class）呼叫，一個或多個，開發最常用
-
【注意】
- 類選擇器使用"."進行標識，后面緊跟類名（自定義）
- 可以理解為給這個標簽起一個名字
- 長名稱或者詞組可以使用中橫線來為選擇器命名
- 不要使用純數字、中文等命名，盡量使用英文字母來表示
- 命名要有意義，盡量使別人一眼就知道這個類名的目的
-
-
類選擇器——多類名
-
多類名使用方式
-
<div >艾希</div>- 【注意】：
- 在標簽class屬性中寫 多個類名
- 多個類名中間必須用空格分開
- 這個標簽就可以分別具有這些類名的樣式
- 【注意】：
-
使用場景
- 可以把一些標簽相同的元素放在一個類里
- 這些標簽就可以呼叫這個公共的類，然后在呼叫自己獨有的類
-
-
id選擇器
-
HTML元素以id屬性來設定id選擇器，CSS中id選擇器以“#”來定義
-
語法：
#id{ 屬性1：屬性值1； 屬性2：屬性值2； 屬性3：屬性值3； } -
【注意】樣式#定義，結構id呼叫，只能呼叫一次，不能被別的標簽呼叫
-
與類選擇器的區別
- 類選擇器好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用
- id選擇器好比人的身份證號碼，全國唯一
- id選擇器和類選擇器最大的區別在使用次數上
- 類選擇器在修改樣式中用得最多，id選擇器一般用于頁面唯一性元素上，經常和js搭配呼叫
-
-
通配符選擇器
-
在CSS中，通配符選擇器使用“*”定義，他表示選取頁面中所有的元素
-
語法
*{ 屬性1：屬性值1； 屬性2：屬性值2； 屬性3：屬性值3； } -
【注意】
- 通配符選擇器不需要呼叫，自動就給所有的元素使用樣式
-
-
-
-
| 基礎選擇器 | 作用 | 特點 | 使用情況 | 用法 |
|---|---|---|---|---|
| 標簽選擇器 | 可以選出所有相同 的標簽 | 不能差異化選擇 | 較多 | 標簽名{屬性：屬性值；} |
| 類選擇器 | 可以選出一個或多個標簽 | 可以根據需求選擇 | 非常多 | .類名{屬性：屬性值；} |
| id選擇器 | 一次只能選擇一個標簽 | ID屬性只能在每個HTML檔案中出現一次 | 一般和js搭配 | #id{屬性：屬性值；} |
| 通配符選擇器 | 選擇所有 的標簽 | 選擇的太多，有部分不需要 | 特殊情況使用 | *{屬性：屬性值；} |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113687.html
標籤：Html/Css
上一篇：從頁面加載到首屏渲染時機