亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS入門篇之傳智播客學(xué)習(xí)

  發(fā)布時間:2009-11-13 20:58:18   作者:佚名   我要評論
結(jié)束了HTML學(xué)習(xí),接下來我終于揭開了css的真實面紗,在大學(xué)時代,一直忙碌去各處收集學(xué)習(xí)資料,記得當(dāng)時不知在那位大俠手里拷了有關(guān)css相關(guān)學(xué)習(xí)資料,代碼看了半天實在費解
再接下來的時間似乎再也沒有光顧那個文件夾了,現(xiàn)在非常后悔當(dāng)初沒有將他好好保存,一次意外,我的電腦和那個裝有四十多個G學(xué)習(xí)資料的硬盤永遠(yuǎn)的離開了我,所以在此提醒大家,好東西一定要備份。記得后來又有一次接觸到css這個詞,好像是在和一個我的學(xué)生聊天,為了滿足學(xué)生的好奇心,我百度了一下,最后告訴學(xué)生是層疊樣式表,不過還好學(xué)生沒有繼續(xù)問下去,因為我只是知道他的中文翻譯,現(xiàn)在想想真可謂是一個笑話了。今天我終于又一次接觸到了css,這一次一定將它徹底搞明白,我相信再有人問我什么是css,我想我不會回答層疊樣式表了。雖然我們主要是做web開發(fā),但是畢老師為了將知識面擴(kuò)寬一些,依舊不改他的認(rèn)真的風(fēng)范,依舊非常仔細(xì)的將css講解一天。
一、定義以及其作用
CSS是層疊樣式表(Cascading Style Sheets)用來定義網(wǎng)頁的現(xiàn)實效果。可以解決HTML代碼對樣式定義的重復(fù),提高了后期樣式代碼的可維護(hù)性,并增強(qiáng)了網(wǎng)頁的現(xiàn)實效果功能。
二、如何將樣式表加入到HTML文件中?
1.style屬性方式
利用標(biāo)簽中style屬性來改變每個標(biāo)簽的顯示樣式。
2.style標(biāo)簽方式
在head標(biāo)簽中加入style標(biāo)簽,對多個標(biāo)簽進(jìn)行統(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)入進(jìn)來的樣式與本頁面定義的樣式重復(fù),以本頁定義樣式為準(zhǔn)。
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)簽鏈接進(jìn)來多個CSS文件。重復(fù)樣式以最后鏈接進(jìn)來的CSS樣式為準(zhǔn)。
小結(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)簽進(jìn)行標(biāo)識,方便對標(biāo)簽進(jìn)行操作。
1.HTML標(biāo)簽選擇器
2.class選擇器
在標(biāo)簽中定義class屬性并賦值。通過 標(biāo)簽名.class值 對該標(biāo)簽進(jìn)行樣式設(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.組合選擇器
對多個不同選擇器進(jìn)行相同樣式設(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 段落中的第一個字母。

相關(guān)文章

最新評論