一. css語法:
- 格式:
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
…
}
二. 選擇器:篩選具有相似特徵的元素
* 注意:屬性的寫法需要注意了
每一對屬性需要使用分號“;”隔開,最後一對屬性可以不加分號“;”
A.選擇器分類:
1. 基礎選擇器
- id選擇器:選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
- 語法:#id屬性值{}
- 元素選擇器:選擇具有相同標籤名稱的元素
- 語法: 標籤名稱{}
- 注意:id選擇器優先級高於元素選擇器
- 類選擇器:選擇具有相同的class屬性值的元素。
- 語法:.class屬性值{}
- 注意:類選擇器選擇器優先級高於元素選擇器
2. 擴展選擇器:
- 選擇所有元素:
- 語法: *{}
- 並集選擇器:
- 選擇器1,選擇器2{}
- 子選擇器:篩選選擇器1元素下的選擇器2元素
- 語法: 選擇器1 選擇器2{}
- 父選擇器:篩選選擇器2的父元素選擇器1
- 語法: 選擇器1 > 選擇器2{}
- 屬性選擇器:選擇元素名稱,屬性名=屬性值的元素
- 語法: 元素名稱[屬性名=“屬性值”]{}
- 僞類選擇器:選擇一些元素具有的狀態
B.css常用屬性
- 字體、文本
- font-size:字體大小
- color:文本顏色
- text-align:對其方式
- line-height:行高
- 背景
- background:
- 邊框
- border:設置邊框,符合屬性
- 尺寸
- width:寬度
- height:高度
- 盒子模型:控制佈局
- margin:外邊距
- padding:內邊距
– 默認情況下內邊距會影響整個盒子的大小- box-sizing: border-box; 設置盒子的屬性,讓width和height就是最終盒子的大小
- float:浮動
– left
– right