------ 本文為回顧復(fù)習(xí)熄诡，只記錄部分內(nèi)容，僅供參考 ------
本文包括以下css內(nèi)容:
id和class的區(qū)別偽類選擇器導(dǎo)入外部樣式樣式的繼承和優(yōu)先級標(biāo)記的顯示模式盒子模型Float, Clear屬性Others
id和class的區(qū)別
id只能被調(diào)用一次史汗，class可以被調(diào)用多次尝蠕。如果id被多次調(diào)用仁热，則在id的調(diào)用上會出現(xiàn)問題初橘。
偽類選擇器
標(biāo)簽:link標(biāo)簽:visited標(biāo)簽:hover標(biāo)簽:active (注:用于鼠標(biāo)活動)
更多查看菜鳥教程- css - 偽類
導(dǎo)入外部樣式
Link標(biāo)簽只能用于HTML中：
<link rel="stylesheet" href="css/test.css">
import url('css文件路徑');
在style中可使用import導(dǎo)入外部樣式。在此樣式中，可以直接繼承外部導(dǎo)入的樣式薄疚。例如.aa。
<style>
@import url('css/test.css');
.aa{
font-size:14px;
}
</style>
另外赊琳，在css文件中可以直接引入外部樣式街夭，同樣可繼承外部樣式。用法如下：
@import url('css/test.css');
樣式的繼承和優(yōu)先級
1. 元素的繼承
子元素繼承父元素的樣式躏筏，如果子元素?fù)碛邢嗤臉邮桨謇觯瑯?biāo)簽則使用子元素的樣式。
例如下列語句趁尼，則最終文本顯示的字體顏色為green：
<p style = "color:red"><b style="color=green">This is test.</b></p>
2. 行內(nèi)樣式的優(yōu)先級
行內(nèi)(style)樣式 > 內(nèi)嵌樣式 > 外部樣式
3. 內(nèi)嵌樣式優(yōu)先級：
id > class > 標(biāo)簽樣式
...
<style>
p{
color:red;
}
.aa{
color:yellow;
}
#bb{
color:green;
}
</style>
...
<p class="aa" id="bb" style="color:blue">This is the test.</p>
4. 強(qiáng)制優(yōu)先級（不建議使用）
強(qiáng)制優(yōu)先級可以手動指定埃碱，只需要在樣式后面加!important。例如上文內(nèi)嵌樣式優(yōu)先級中的<style>標(biāo)簽：
...
<style>
p{
color:red !important;
}
.aa{
color:yellow;
}
#bb{
color:green;
}
</style>
...
<p class="aa" id="bb" style="color:blue">This is the test.</p>
最終顯示的p標(biāo)簽的字體顏色為red酥泞。
標(biāo)記的顯示模式
標(biāo)記的顯示模式分為 “行顯示標(biāo)記” 和 “塊顯示標(biāo)記”砚殿。
1. 行顯 示標(biāo)記
行顯示標(biāo)記不能設(shè)置高度和寬度，例如a標(biāo)簽芝囤，從左到右排列似炎。
2. 塊 顯示標(biāo)記
例如p標(biāo)簽， 從上到下排列悯姊。
通過使用margin-left:auto;和margin-right:auto;可將塊顯示標(biāo)記居中
3. 顯示標(biāo)記 轉(zhuǎn)換
使用display:block;方法將 行顯示標(biāo)記 轉(zhuǎn)換為 塊顯示標(biāo)記羡藐。
使用display:inline-block;方法將 行顯示標(biāo)記 轉(zhuǎn)換為 可設(shè)置寬高度的行顯示標(biāo)記。
盒子模型
Margin(外邊距) - 清除邊框外的區(qū)域悯许，外邊距是透明的仆嗦。Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域岸晦，內(nèi)邊距是透明的欧啤。Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像启上。
Float, Clear屬性
在使用了float進(jìn)行排版的時(shí)候會出現(xiàn)一些重疊的問題, 此時(shí)需要在樣式中使用clear來進(jìn)行屬性的清楚邢隧。但是在樣式中使用了clear屬性之后無法使用margin屬性來調(diào)整邊距, 因?yàn)?code>clear同樣會清除該屬性。而排版量大的布局注定無法在每個(gè)class或者id中添加clear來實(shí)現(xiàn)逐個(gè)清楚冈在。因此, 慣用的做法是在幾個(gè)div中單獨(dú)添加一個(gè)帶clear:both;屬性的div作為分割來完成塊的布局倒慧。
Others
- (鼠標(biāo)動作)
cursor:pointer;: 當(dāng)光標(biāo)移動到標(biāo)簽的時(shí)候鼠標(biāo)變?yōu)槭值男螤睢?/li> - (表格邊框)
border-collapse:collapse;將td之間的邊框去掉一個(gè)。 - (背景圖片)
background-repeat:no-repeat(repeat-x/y);不平鋪背景圖片(橫/縱向平鋪)。
持續(xù)更新中......
2020年2月1日
