[TOC]
## 1. 標簽選擇器
語法:
```css
標簽名 {
屬性1: 屬性值1;
屬性2: 屬性值2;
...
}
```
標簽選擇器最大的優點是能快速為頁面中同類型的標簽統一樣式,同時這也是他的缺點,不能設計差異化樣式。
<br/>
## 2. 類選擇器
語法:類選擇器使用```.```(英文點號)進行標識,后面緊跟類名,
```css
.類名 {
屬性1: 屬性值1;
屬性2: 屬性值2;
...
}
```
類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標簽。
**技巧:**
1. 長名稱或詞組可以使用中橫線來為選擇器命名。
2. 不建議使用“_”下劃線來命名CSS選擇器。
3. 不要純數字、中文等命名, 盡量使用英文字母來表示。
<br/>
## 3. 多類名選擇器
可以在.html中為同一個標簽設置多個class選擇器。
```html
<標簽 class = "選擇器1 選擇器2 ..."/>
```
1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關系,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。
<br/>
## 4. id選擇器
id選擇器使用```#```進行標識,后面緊跟id名,基本語法如下:
```css
#id名 {
屬性1: 屬性值1;
屬性2: 屬性值2;
...
}
```
大多數HTML元素都可以定義id屬性,元素的id值是**唯一的**,只能對應于文檔中某一個具體的元素。
<br/>
## 5. 通配符選擇器
通配符選擇器用```*```號表示,他是所有選擇器中作用范圍最廣的,能匹配頁面中所有的元素。基本語法如下:
```css
* {
屬性1: 屬性值1;
屬性2: 屬性值2;
...
}
```
例如下面的代碼,使用通配符選擇器定義CSS樣式,清除所有HTML標記的默認邊距。
```css
* {
?margin: 0; ? ? ? ? ? ? ? ? ? ?/* 定義外邊距*/
?padding: 0; ? ? ? ? ? ? ? ? ? /* 定義內邊距*/
}
```
- 0 學前必讀
- CSS是什么?
- 如何引用CSS
- 內聯樣式表
- 行內式
- 外部樣式表
- 三種引用方式的比較
- CSS語法規范
- 選擇器
- 基礎選擇器
- 復合選擇器
- CSS注釋
- 字體樣式font屬性
- 標簽顯示模式display屬性
- 塊級元素
- 行內元素
- 行內塊元素
- 三種顯示模式的轉換
- 行高line-height屬性
- CSS三大特性
- 背景background屬性
- 盒子模型
- 邊框border
- 內邊距padding
- 外邊距margin
- 外邊距的合并
- content的高度和寬度
- 盒子模型布局的穩定性
- 圓角邊框border-radius
- 盒子陰影box-shadow
- 浮動float
- 普通流
- 浮動float
- 版心和布局
- 布局流程
- 常見布局方式
- 清除浮動
- 定位postion
- 定位屬性
- 疊放次序z-index
- 元素的顯示與隱藏
- 用戶界面樣式
- 溢出的文字隱藏
- CSS精靈技術
- 什么是精靈技術?
- 精靈技術的使用
- 滑動門
- web字體
- 字體圖標
- icon圖標
- BFC
- 優雅降級和漸進增強
- HTML5新增的元素和特性
- CSS3盒模型
- 過渡、變形、動畫
- 彈性布局
- 對齊
- 網站優化三大標簽