CSS入門篇之傳智播客學(xué)習(xí)
2024-07-11 08:45:45
供稿：網(wǎng)友
再接下來的時間似乎再也沒有光顧那個文件夾了，現(xiàn)在非常后悔當(dāng)初沒有將他好好保存，一次意外，我的電腦和那個裝有四十多個G學(xué)習(xí)資料的硬盤永遠的離開了我，所以在此提醒大家，好東西一定要備份。記得后來又有一次接觸到css這個詞，好像是在和一個我的學(xué)生聊天，為了滿足學(xué)生的好奇心，我百度了一下，最后告訴學(xué)生是層疊樣式表，不過還好學(xué)生沒有繼續(xù)問下去，因為我只是知道他的中文翻譯，現(xiàn)在想想真可謂是一個笑話了。今天我終于又一次接觸到了css，這一次一定將它徹底搞明白，我相信再有人問我什么是css，我想我不會回答層疊樣式表了。雖然我們主要是做web開發(fā)，但是畢老師為了將知識面擴寬一些，依舊不改他的認真的風(fēng)范，依舊非常仔細的將css講解一天。
一、定義以及其作用
CSS是層疊樣式表（Cascading Style Sheets）用來定義網(wǎng)頁的現(xiàn)實效果。可以解決HTML代碼對樣式定義的重復(fù)，提高了后期樣式代碼的可維護性，并增強了網(wǎng)頁的現(xiàn)實效果功能。
二、如何將樣式表加入到HTML文件中？
1.style屬性方式
利用標(biāo)簽中style屬性來改變每個標(biāo)簽的顯示樣式。
2.style標(biāo)簽方式
在head標(biāo)簽中加入style標(biāo)簽，對多個標(biāo)簽進行統(tǒng)一修改。注意一定要用<stytle>標(biāo)簽，用來啟動css引擎。例如：
<head>
<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>
3.導(dǎo)入方式
前提是已經(jīng)存在一個定義好的CSS文件。網(wǎng)頁的一部分樣式需要用到，那么就用到這種方式。
例如：我們定義好了一個div.css文件。
<style type="text/css">
@import url(div.css);
</style>
注意：url括號后面必須要用分號結(jié)束。如果導(dǎo)入進來的樣式與本頁面定義的樣式重復(fù)，以本頁定義樣式為準。
4.鏈接方式
通過head標(biāo)簽中l(wèi)ink標(biāo)簽來實現(xiàn)，前提也是先要有一個已定好的CSS文件。
例如：我們已經(jīng)將需要導(dǎo)入的語句都放在1.css中了。
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
注意：可以通過多個link標(biāo)簽鏈接進來多個CSS文件。重復(fù)樣式以最后鏈接進來的CSS樣式為準。
小結(jié)：如果要設(shè)置局部樣式，則使用第一種方式，如果要多個區(qū)域修改相同樣式，用第二種方式，如果需要改多個頁面，多個頁面的樣式一樣，我們可以用導(dǎo)入方式，但是如果我們需要新增加一塊區(qū)域，需要在每一個頁面都導(dǎo)入css文件，不現(xiàn)實，所以我們可以將導(dǎo)入語句放到一個css文件中，利用最后的一種方式來實現(xiàn)。其優(yōu)先級是1>2>3
三、選擇器
就是指定CSS要作用的標(biāo)簽，那個標(biāo)簽的名稱就是選擇器。每一個標(biāo)簽都定義了class屬性和id屬性。用于對標(biāo)簽進行標(biāo)識，方便對標(biāo)簽進行操作。
1.HTML標(biāo)簽選擇器
2.class選擇器
在標(biāo)簽中定義class屬性并賦值。通過 標(biāo)簽名.class值 對該標(biāo)簽進行樣式設(shè)置。例如我們希望多個div區(qū)域中一個區(qū)域以及span區(qū)域中一個區(qū)域一樣樣式，我們可以設(shè)置如下：
.name {color:blue;}代碼放在頭文件的style標(biāo)簽中
下面代碼放在body中
<div class=”name”>div區(qū)域一</div>
<span class=”name”>span區(qū)域二</span>
而我們想讓一個div區(qū)域里面第一和第三塊區(qū)域不一樣樣式，我們可以設(shè)定如下：
下面代碼放在頭文件的style標(biāo)簽中
div.d1 {color:orange;}
div.d3 {color:green;}
下面代碼放在body中
<div class=”d1”>區(qū)域一</div>
<div class=”d3”>區(qū)域三</div>
3.id選擇器
與class選擇器類似，但格式不同，選擇器的名稱為：#id值。
小結(jié)：在定義的中，多個標(biāo)簽的class屬性值可以相同，而id值要唯一，所以當(dāng)要設(shè)定跨區(qū)域具有相同樣式，但是同一區(qū)域不同樣式的時候，我們選擇class選擇器，而要是設(shè)置一個區(qū)域具有獨立的樣式，選擇id選擇器。
4.關(guān)聯(lián)選擇器
實際就是標(biāo)簽中嵌套標(biāo)簽，主要用于要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式
例：我們想讓段落中的部分文字具有特殊樣式，代碼如下：
p b { color:yellow}
<p><b>2009年11月10日</b>北京下了一場大雪</p>
5.組合選擇器
對多個不同選擇器進行相同樣式設(shè)置的時候應(yīng)用此選擇器。
span,div { color:white}
<span>2009年11月11日</span>
<div>光棍節(jié)快樂</div>
注意：多個不同選擇器要用逗號分隔開。
6.偽元素選擇器
是指對同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容。
格式：標(biāo)簽名：偽元素。類名 標(biāo)簽名。類名：偽元素。都可以。例如我們設(shè)置a標(biāo)簽的各種不同狀態(tài)：
a:link 超鏈接未點擊狀態(tài)。
a:visited 被訪問后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點擊）。
a:active 點擊超鏈接時的狀態(tài)。
如下為我們設(shè)置段落的各種不同狀態(tài)
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個字母。
