CSS的簡(jiǎn)介
CSS：Cascading Style Sheets）是層疊樣式表用來(lái)定義網(wǎng)頁(yè)的顯示效果。可以解決html代碼對(duì)樣式定義的
重復(fù)，提高了后期樣式代碼的可維護(hù)性，并增強(qiáng)了網(wǎng)頁(yè)的顯示效果功能。
作用：CSS將網(wǎng)頁(yè)內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。
CSS與HTML的結(jié)合方式
利用標(biāo)簽中style屬性來(lái)改變每個(gè)標(biāo)簽的顯示樣式。
例：
<p style="background-color:#FF0000; color:#FFFFFF"> p標(biāo)簽段落內(nèi)容。 </p>
該方式比較靈活，但是對(duì)于多個(gè)相同標(biāo)簽的同一樣式定義比較麻煩，適合局部修改。
在head標(biāo)簽中加入style標(biāo)簽，對(duì)多個(gè)標(biāo)簽進(jìn)行統(tǒng)一修改。
<head> <style type="text/css"> p { color:#FF0000;} </style> </head>
該方式可以對(duì)單個(gè)頁(yè)面的樣式進(jìn)行統(tǒng)一設(shè)置，但對(duì)于局部不夠靈活。
前提是已經(jīng)存在一個(gè)定義好的CSS文件。網(wǎng)頁(yè)的一部分樣式需要用到，那么就用到這種方式。
例：
<style type="text/css"> @import url(css_3.css); div { color:#FF0000;} </style>
定義一個(gè)外部的CSS文件（.css）結(jié)尾的。
@import url("css文件的地址");需要寫(xiě)在<style>標(biāo)簽的內(nèi)部
注：url括號(hào)后面必須要用分號(hào)結(jié)束。如果導(dǎo)入進(jìn)來(lái)的樣式與本頁(yè)面定義的樣式重復(fù)，以本頁(yè)定義樣式為準(zhǔn)。
通過(guò)head標(biāo)簽中l(wèi)ink標(biāo)簽來(lái)實(shí)現(xiàn)，前提也是先要有一個(gè)已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" />
<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，
不能寫(xiě)在<style>內(nèi)部，寫(xiě)在<head>標(biāo)簽的內(nèi)部。
rel：代表當(dāng)前的文件和引入文件的關(guān)系。
type：類(lèi)型
href：CSS的地址
注：可以通過(guò)多個(gè)link標(biāo)簽鏈接進(jìn)來(lái)多個(gè)CSS文件。重復(fù)樣式以最后鏈接進(jìn)來(lái)的CSS樣式為準(zhǔn)。
?。ㄒ话闱闆r下）從上到下，由外到內(nèi)，優(yōu)先級(jí)從低到高的。
特殊情況：標(biāo)簽名選擇器 < class選擇器 < ID選擇器 < style屬性
?。?）選擇器名稱(chēng){屬性名:屬性值;屬性名:屬性值;...}
?。?）屬性與屬性之間用 分號(hào) 隔開(kāi)
（3）屬性與屬性值直接按用 冒號(hào) 連接
?。?）如果一個(gè)屬性有多個(gè)值，值與值直接用空格隔開(kāi)
例子
div{border:值1 值2 值3}
編寫(xiě)的CSS代碼作用在哪個(gè)標(biāo)簽上。
（1）標(biāo)簽名選擇器
每一個(gè)標(biāo)簽都定義了class屬性和id屬性。用于對(duì)標(biāo)簽進(jìn)行標(biāo)識(shí)，方便對(duì)標(biāo)簽進(jìn)行操作。
在定義的中，多個(gè)標(biāo)簽的class屬性值可以相同，而id值要唯一，因?yàn)镴avaScript中經(jīng)常用。
?。?）class選擇器：（常用的）
在標(biāo)簽中定義class屬性并賦值。通過(guò) 標(biāo)簽名.class值 對(duì)該標(biāo)簽進(jìn)行樣式設(shè)置。
例：
相同標(biāo)簽設(shè)置不同樣式的時(shí)候，用class進(jìn)行區(qū)分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class="pclass_1">P標(biāo)簽樣式</p> <p class="pclass_2">P標(biāo)簽樣式</p>
不同標(biāo)簽進(jìn)行相同設(shè)置的時(shí)候，用class進(jìn)行統(tǒng)一定義。
.classname {color:#00FF00;} <p class="classname">P標(biāo)簽樣式</p> <div class="classname">DIV標(biāo)簽樣式</div>
?。?）id選擇器：
與class選擇器類(lèi)似，但格式不同，選擇器的名稱(chēng)為：#id值。
例：
#pid { color:#0000FF;} <p id="pid">P標(biāo)簽樣式</p>
注：多個(gè)標(biāo)簽同樣可以定義相同的id值，但是對(duì)于JavaScript對(duì)標(biāo)簽元素的獲取就會(huì)出錯(cuò)。
所以形成習(xí)慣，確保id值的唯一性對(duì)于以后的數(shù)據(jù)庫(kù)設(shè)計(jì)也很有好處。
優(yōu)先級(jí)（特殊）：
標(biāo)簽名選擇器 < class選擇器 < ID選擇器 < style屬性
?。?）關(guān)聯(lián)選擇器：多個(gè)標(biāo)簽之間產(chǎn)生關(guān)系。
標(biāo)簽是可以嵌套的，要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式，就可以用此選擇器?！ ?/p>
例：
p { color:#00FF00;} p b { color:#FF000;} <p>P標(biāo)簽<b>劉德華</b>段落樣式</p> <p>P標(biāo)簽段落</p>
注：中間用空格隔開(kāi)
（2）組合選擇器：對(duì)多個(gè)不同的選擇器設(shè)置相同的樣式
p,div { color:#FF0000;} <p>P標(biāo)簽顯示段落。</p> <div>DIV標(biāo)簽顯示段落</div>
注：中間用逗號(hào)隔開(kāi)
（3）偽元素選擇器：CSS定義好的選擇器
如果使用超鏈接的4個(gè)狀態(tài)，使用的順序： L V H A
其實(shí)就在html中預(yù)先定義好的一些選擇器。稱(chēng)為偽元素。是因?yàn)镃SS的術(shù)語(yǔ)。
格式：標(biāo)簽名：偽元素。類(lèi)名 標(biāo)簽名。類(lèi)名：偽元素。都可以。
a:link 超鏈接未點(diǎn)擊狀態(tài)。 text-decoration: none;
a:visited 被訪問(wèn)后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）。
a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。
使用順序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個(gè)字母。
p:focus 具有焦點(diǎn)的元素。IE6瀏覽器不支持，在FireFox中可以看到效果。
CSS的簡(jiǎn)單練習(xí)（查閱文檔）
table {
font-family: 隸書(shū);
font-size:14px;
color:black;
border-width: 1px;
border-color: gray;
border-collapse: collapse;
width: 200px;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gray;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gray;
background-color: #ffffff;
}
在進(jìn)行布局前需要把數(shù)據(jù)封裝到一塊一塊的區(qū)域內(nèi)，這個(gè)區(qū)域的專(zhuān)業(yè)術(shù)語(yǔ)叫盒子。
邊框（border）分為上 下 左 右
內(nèi)邊距（padding）分為上 下 左 右
外邊距（margin）分為上 下 左 右
float（漂浮）
none : 默認(rèn)值。對(duì)象不飄浮
left : 文本流向?qū)ο蟮挠疫?br>
right : 文本流向?qū)ο蟮淖筮?/p>
clear（清除）
none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left : 不允許左邊有浮動(dòng)對(duì)象
right : 不允許右邊有浮動(dòng)對(duì)象
both : 不允許有浮動(dòng)對(duì)象
position
static : 默認(rèn)值。無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則
absolute : 將對(duì)象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對(duì)
于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù) body 對(duì)象。
而其層疊通過(guò) z-index 屬性 relative : 對(duì)象不可層疊，但將依據(jù) left ， right ， top ， bottom 等
屬性在正常文檔流中偏移位置
【 微信掃一掃 】
