CSS入門(mén)篇之傳智播客學(xué)習(xí)
發(fā)布時(shí)間：2009-11-13 20:58:18 作者：佚名 
我要評(píng)論
我要評(píng)論結(jié)束了HTML學(xué)習(xí)，接下來(lái)我終于揭開(kāi)了css的真實(shí)面紗，在大學(xué)時(shí)代，一直忙碌去各處收集學(xué)習(xí)資料，記得當(dāng)時(shí)不知在那位大俠手里拷了有關(guān)css相關(guān)學(xué)習(xí)資料，代碼看了半天實(shí)在費(fèi)解
再接下來(lái)的時(shí)間似乎再也沒(méi)有光顧那個(gè)文件夾了，現(xiàn)在非常后悔當(dāng)初沒(méi)有將他好好保存，一次意外，我的電腦和那個(gè)裝有四十多個(gè)G學(xué)習(xí)資料的硬盤(pán)永遠(yuǎn)的離開(kāi)了我，所以在此提醒大家，好東西一定要備份。記得后來(lái)又有一次接觸到css這個(gè)詞，好像是在和一個(gè)我的學(xué)生聊天，為了滿(mǎn)足學(xué)生的好奇心，我百度了一下，最后告訴學(xué)生是層疊樣式表，不過(guò)還好學(xué)生沒(méi)有繼續(xù)問(wèn)下去，因?yàn)槲抑皇侵浪闹形姆g，現(xiàn)在想想真可謂是一個(gè)笑話(huà)了。今天我終于又一次接觸到了css，這一次一定將它徹底搞明白，我相信再有人問(wèn)我什么是css，我想我不會(huì)回答層疊樣式表了。雖然我們主要是做web開(kāi)發(fā)，但是畢老師為了將知識(shí)面擴(kuò)寬一些，依舊不改他的認(rèn)真的風(fēng)范，依舊非常仔細(xì)的將css講解一天。
一、定義以及其作用
CSS是層疊樣式表（Cascading Style Sheets）用來(lái)定義網(wǎng)頁(yè)的現(xiàn)實(shí)效果?？梢越鉀QHTML代碼對(duì)樣式定義的重復(fù)，提高了后期樣式代碼的可維護(hù)性，并增強(qiáng)了網(wǎng)頁(yè)的現(xiàn)實(shí)效果功能。
二、如何將樣式表加入到HTML文件中？
1.style屬性方式
利用標(biāo)簽中style屬性來(lái)改變每個(gè)標(biāo)簽的顯示樣式。
2.style標(biāo)簽方式
在head標(biāo)簽中加入style標(biāo)簽，對(duì)多個(gè)標(biāo)簽進(jìn)行統(tǒng)一修改。注意一定要用<stytle>標(biāo)簽，用來(lái)啟動(dòng)css引擎。例如：
<head>
<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>
3.導(dǎo)入方式
前提是已經(jīng)存在一個(gè)定義好的CSS文件。網(wǎng)頁(yè)的一部分樣式需要用到，那么就用到這種方式。
例如：我們定義好了一個(gè)div.css文件。
<style type="text/css">
@import url(div.css);
</style>
注意：url括號(hào)后面必須要用分號(hào)結(jié)束。如果導(dǎo)入進(jìn)來(lái)的樣式與本頁(yè)面定義的樣式重復(fù)，以本頁(yè)定義樣式為準(zhǔn)。
4.鏈接方式
通過(guò)head標(biāo)簽中l(wèi)ink標(biāo)簽來(lái)實(shí)現(xiàn)，前提也是先要有一個(gè)已定好的CSS文件。
例如：我們已經(jīng)將需要導(dǎo)入的語(yǔ)句都放在1.css中了。
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
注意：可以通過(guò)多個(gè)link標(biāo)簽鏈接進(jìn)來(lái)多個(gè)CSS文件。重復(fù)樣式以最后鏈接進(jìn)來(lái)的CSS樣式為準(zhǔn)。
小結(jié)：如果要設(shè)置局部樣式，則使用第一種方式，如果要多個(gè)區(qū)域修改相同樣式，用第二種方式，如果需要改多個(gè)頁(yè)面，多個(gè)頁(yè)面的樣式一樣，我們可以用導(dǎo)入方式，但是如果我們需要新增加一塊區(qū)域，需要在每一個(gè)頁(yè)面都導(dǎo)入css文件，不現(xiàn)實(shí)，所以我們可以將導(dǎo)入語(yǔ)句放到一個(gè)css文件中，利用最后的一種方式來(lái)實(shí)現(xiàn)。其優(yōu)先級(jí)是1>2>3
三、選擇器
就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱(chēng)就是選擇器。每一個(gè)標(biāo)簽都定義了class屬性和id屬性。用于對(duì)標(biāo)簽進(jìn)行標(biāo)識(shí)，方便對(duì)標(biāo)簽進(jìn)行操作。
1.HTML標(biāo)簽選擇器
2.class選擇器
在標(biāo)簽中定義class屬性并賦值。通過(guò) 標(biāo)簽名.class值 對(duì)該標(biāo)簽進(jìn)行樣式設(shè)置。例如我們希望多個(gè)div區(qū)域中一個(gè)區(qū)域以及span區(qū)域中一個(gè)區(qū)域一樣樣式，我們可以設(shè)置如下：
.name {color:blue;}代碼放在頭文件的style標(biāo)簽中
下面代碼放在body中
<div class=”name”>div區(qū)域一</div>
<span class=”name”>span區(qū)域二</span>
而我們想讓一個(gè)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選擇器類(lèi)似，但格式不同，選擇器的名稱(chēng)為：#id值。
小結(jié)：在定義的中，多個(gè)標(biāo)簽的class屬性值可以相同，而id值要唯一，所以當(dāng)要設(shè)定跨區(qū)域具有相同樣式，但是同一區(qū)域不同樣式的時(shí)候，我們選擇class選擇器，而要是設(shè)置一個(gè)區(qū)域具有獨(dú)立的樣式，選擇id選擇器。
4.關(guān)聯(lián)選擇器
實(shí)際就是標(biāo)簽中嵌套標(biāo)簽，主要用于要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式
例：我們想讓段落中的部分文字具有特殊樣式，代碼如下：
p b { color:yellow}
<p><b>2009年11月10日</b>北京下了一場(chǎng)大雪</p>
5.組合選擇器
對(duì)多個(gè)不同選擇器進(jìn)行相同樣式設(shè)置的時(shí)候應(yīng)用此選擇器。
span,div { color:white}
<span>2009年11月11日</span>
<div>光棍節(jié)快樂(lè)</div>
注意：多個(gè)不同選擇器要用逗號(hào)分隔開(kāi)。
6.偽元素選擇器
是指對(duì)同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容。
格式：標(biāo)簽名：偽元素。類(lèi)名 標(biāo)簽名。類(lèi)名：偽元素。都可以。例如我們?cè)O(shè)置a標(biāo)簽的各種不同狀態(tài)：
a:link 超鏈接未點(diǎn)擊狀態(tài)。
a:visited 被訪問(wèn)后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）。
a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。
如下為我們?cè)O(shè)置段落的各種不同狀態(tài)
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個(gè)字母。
一、定義以及其作用
CSS是層疊樣式表（Cascading Style Sheets）用來(lái)定義網(wǎng)頁(yè)的現(xiàn)實(shí)效果?？梢越鉀QHTML代碼對(duì)樣式定義的重復(fù)，提高了后期樣式代碼的可維護(hù)性，并增強(qiáng)了網(wǎng)頁(yè)的現(xiàn)實(shí)效果功能。
二、如何將樣式表加入到HTML文件中？
1.style屬性方式
利用標(biāo)簽中style屬性來(lái)改變每個(gè)標(biāo)簽的顯示樣式。
2.style標(biāo)簽方式
在head標(biāo)簽中加入style標(biāo)簽，對(duì)多個(gè)標(biāo)簽進(jìn)行統(tǒng)一修改。注意一定要用<stytle>標(biāo)簽，用來(lái)啟動(dòng)css引擎。例如：
<head>
<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>
3.導(dǎo)入方式
前提是已經(jīng)存在一個(gè)定義好的CSS文件。網(wǎng)頁(yè)的一部分樣式需要用到，那么就用到這種方式。
例如：我們定義好了一個(gè)div.css文件。
<style type="text/css">
@import url(div.css);
</style>
注意：url括號(hào)后面必須要用分號(hào)結(jié)束。如果導(dǎo)入進(jìn)來(lái)的樣式與本頁(yè)面定義的樣式重復(fù)，以本頁(yè)定義樣式為準(zhǔn)。
4.鏈接方式
通過(guò)head標(biāo)簽中l(wèi)ink標(biāo)簽來(lái)實(shí)現(xiàn)，前提也是先要有一個(gè)已定好的CSS文件。
例如：我們已經(jīng)將需要導(dǎo)入的語(yǔ)句都放在1.css中了。
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
注意：可以通過(guò)多個(gè)link標(biāo)簽鏈接進(jìn)來(lái)多個(gè)CSS文件。重復(fù)樣式以最后鏈接進(jìn)來(lái)的CSS樣式為準(zhǔn)。
小結(jié)：如果要設(shè)置局部樣式，則使用第一種方式，如果要多個(gè)區(qū)域修改相同樣式，用第二種方式，如果需要改多個(gè)頁(yè)面，多個(gè)頁(yè)面的樣式一樣，我們可以用導(dǎo)入方式，但是如果我們需要新增加一塊區(qū)域，需要在每一個(gè)頁(yè)面都導(dǎo)入css文件，不現(xiàn)實(shí)，所以我們可以將導(dǎo)入語(yǔ)句放到一個(gè)css文件中，利用最后的一種方式來(lái)實(shí)現(xiàn)。其優(yōu)先級(jí)是1>2>3
三、選擇器
就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱(chēng)就是選擇器。每一個(gè)標(biāo)簽都定義了class屬性和id屬性。用于對(duì)標(biāo)簽進(jìn)行標(biāo)識(shí)，方便對(duì)標(biāo)簽進(jìn)行操作。
1.HTML標(biāo)簽選擇器
2.class選擇器
在標(biāo)簽中定義class屬性并賦值。通過(guò) 標(biāo)簽名.class值 對(duì)該標(biāo)簽進(jìn)行樣式設(shè)置。例如我們希望多個(gè)div區(qū)域中一個(gè)區(qū)域以及span區(qū)域中一個(gè)區(qū)域一樣樣式，我們可以設(shè)置如下：
.name {color:blue;}代碼放在頭文件的style標(biāo)簽中
下面代碼放在body中
<div class=”name”>div區(qū)域一</div>
<span class=”name”>span區(qū)域二</span>
而我們想讓一個(gè)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選擇器類(lèi)似，但格式不同，選擇器的名稱(chēng)為：#id值。
小結(jié)：在定義的中，多個(gè)標(biāo)簽的class屬性值可以相同，而id值要唯一，所以當(dāng)要設(shè)定跨區(qū)域具有相同樣式，但是同一區(qū)域不同樣式的時(shí)候，我們選擇class選擇器，而要是設(shè)置一個(gè)區(qū)域具有獨(dú)立的樣式，選擇id選擇器。
4.關(guān)聯(lián)選擇器
實(shí)際就是標(biāo)簽中嵌套標(biāo)簽，主要用于要讓相同標(biāo)簽中的不同標(biāo)簽顯示不同樣式
例：我們想讓段落中的部分文字具有特殊樣式，代碼如下：
p b { color:yellow}
<p><b>2009年11月10日</b>北京下了一場(chǎng)大雪</p>
5.組合選擇器
對(duì)多個(gè)不同選擇器進(jìn)行相同樣式設(shè)置的時(shí)候應(yīng)用此選擇器。
span,div { color:white}
<span>2009年11月11日</span>
<div>光棍節(jié)快樂(lè)</div>
注意：多個(gè)不同選擇器要用逗號(hào)分隔開(kāi)。
6.偽元素選擇器
是指對(duì)同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容。
格式：標(biāo)簽名：偽元素。類(lèi)名 標(biāo)簽名。類(lèi)名：偽元素。都可以。例如我們?cè)O(shè)置a標(biāo)簽的各種不同狀態(tài)：
a:link 超鏈接未點(diǎn)擊狀態(tài)。
a:visited 被訪問(wèn)后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）。
a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。
如下為我們?cè)O(shè)置段落的各種不同狀態(tài)
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個(gè)字母。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇Html/Css(新手入門(mén)第一篇必看攻略)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-01
- css 入門(mén)基礎(chǔ)，適合剛開(kāi)始學(xué)習(xí)css的朋友，最好先有一定的html編寫(xiě)經(jīng)驗(yàn)。2010-01-17
- 你是新學(xué)習(xí)CSS？在這個(gè)漂亮的學(xué)習(xí)語(yǔ)言的初始過(guò)程可能是一個(gè)有點(diǎn)驚人，有很多可以學(xué)習(xí)它有時(shí)很難找出哪里開(kāi)始。幸運(yùn)的是有寶貴的大量信息和資源，那里的網(wǎng)絡(luò)覆蓋，通過(guò)先進(jìn)2009-08-29
CSS 語(yǔ)法 學(xué)習(xí)css入門(mén)者看
CSS的定義是由三個(gè)部分構(gòu)成: 選擇符(selector)，屬性(properties)和屬性的取值(value)。 1.語(yǔ)法: selector {property: value} (選擇符 {屬性:值}) 說(shuō)明:2009-06-28css入門(mén)教程之學(xué)習(xí)網(wǎng)頁(yè)布局(1)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文：http://jorux.com/archives/layout-1-if-you-love-css/ 從本篇開(kāi)始講述如何用css實(shí)現(xiàn)網(wǎng)頁(yè)的布局，即如何用css控制網(wǎng)頁(yè)內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者2008-10-31學(xué)DIV CSS技術(shù),如何入門(mén)?
引用一本書(shū)中的一段文字：“當(dāng)我第一次開(kāi)始學(xué)習(xí)漢語(yǔ)時(shí)，我的家庭老師老王給了我一本漢英字典、一本漢語(yǔ)語(yǔ)法書(shū)和一本初級(jí)教程2008-10-17CSS入門(mén)教程:網(wǎng)頁(yè)首字下沉-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS入門(mén)教程:網(wǎng)頁(yè)首字下沉 :first-letter 版本：CSS2 兼容性：IE5.5 語(yǔ)法： Selector : first-letter { sRules } 說(shuō)明： 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的2008-10-17css是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css是什么,小編覺(jué)得挺不錯(cuò)的，詳細(xì)的介紹了css的基本入門(mén)?，F(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-23