第一節我們簡介了一下CSS的工作流程,我相信讀者會有一個大體的認識,那么接下來我們將會深入的研究一下CSS的細節問題,這些問題的涉及將會使我們的工作更加完善。
*************注釋************
1.CSS也是需要注釋的,注釋中的內容不會被解釋執行,它也和C語言一樣,用/*開頭,用*/結尾,其中的內容會被當做注釋,我們想怎么寫就怎么寫。
2.下面給個例子:
p{ color: green; /* 我們在這里書寫注釋 * 辛星CSS,與博客園共同成長 */ font-size: 14px; text-align: center;}
****************選擇器**************
1.我們第一節就介紹了CSS的基礎語法了,其中就說到了選擇器,在CSS中有兩類稍微特殊點的選擇器,我們稱之為id選擇器和class選擇器。
2.先說id選擇器,我們在HTML的元素中,每一個元素都可以設置一個屬性,該屬性就是id,然后我們在CSS中使用#號外加這個id的數值型來作為選擇器,后面的聲明就和普通的寫法一樣。
3.光說是有點抽象的,我們下面給個例子:
首先新建一個my.html文件,書寫內容如下:
<html><head> <title>2014年辛星CSS教學夏季版</title> <link rel="stylesheet" type="text/css" href="my.css"></head><body> <p id = "para">辛星CSS,分享知識,傳遞溫情</p></body></html>
然后我們在my.css中這么寫就可以了:
#para{ color: green; font-size: 14px; text-align: center;}
上面我們就通過在HTML文件中指定了p標簽的id,然后在css文件中根據id來設置了它的屬性。
4.所謂id,那就是唯一的,在同一個HTML文件中,不能有兩個id都是para,這樣會導致混亂,我們可以用下面的class來解決。
5.如果說id是用來描述單個的樣式,那么,class則用于描述一組標簽的樣式,class可以用在多個元素中使用。
6.id使用#號來加上屬性值,而class則使用.號加上屬性值,由于兩者的使用及其的類似,我就不贅述了,想必聰明的讀者已經可以仿造出來了。
*************偽類***************
1.CSS中的選擇器是比較靈活的,比較常用的還有偽類的說法,下面我來解釋一下,偽類的使用官方給出的語法格式是這樣的:
selector:pseudo-class {PRoperty:value;}
2.什么意思呢,就是selector就是選擇器嘛,而pseudo-class就是相應的偽類了,后面跟的就是它的屬性和值。
3.其實偽類的最經典的例子之一就是超鏈接,比如我們可以書寫如下代碼:
首先是創建一個my.html文件,代碼如下:
<html><head> <title>2014年辛星CSS教學夏季版</title> <link rel="stylesheet" type="text/css" href="my.css"></head><body> <a href="#">博客園辛星</a></body></html>
然后就是my.css文件,代碼如下:
a:link{color:red;}a:visited{color: green;}a:hover{color:blue;}a:active{color:black;}
4.上面的css文件中我們就設置了當我們沒有點擊超鏈接的時候是紅色的,當我們的鼠標經過的時候是藍色的,當我們的鼠標點擊它而又沒有松開的時候,它是黑色的,當我們訪問過的連接,它會呈現綠色。
5.而且a:hover必須被放到a:link和a:visited之后,才會有效。
6.而a:active必須被當道a:hover之后,才有效。
7.我們還可以讓偽類與上面提到的class選擇器一起用,我感覺不是很常用,就不介紹了。
8.還有一個child偽類,但是對瀏覽器的兼容性上不好,因此也不介紹了。
9.此外還有偽元素的說法,如果大家做的事英文網站,還是比較重要的,但是對于漢語網站來說,意義不大,因此也就不說了。
*************其他選擇器*********
1.CSS還支持幾種其他的選擇器類型,第一種就是后代選擇器,比如我們把a插入到一個div里面去,那么可以用div a這樣的選擇器來表示a的樣式。
2.第二種就是子元素選擇器,它會選擇父元素中的所有子元素,比如div>a,即它和第一個的區別就是把空格換成了大于號。
3.另外的相鄰兄弟選擇器和普通相鄰兄弟選擇器,總體感覺意義不大,只會增加記憶量和學習的難度,實用性并不高。
4.CSS還支持屬性選擇器,但是由于也是對瀏覽器的兼容性上不好,也就不介紹了。
5.還有所謂的群組選擇器的說法,是指幾個選擇器使用同一個樣式,它用逗號把各個選擇器進行區分,并且連接起來,就像我們C語言中函數的參數列表中的多個參數一樣,示例:
p,td,li{color: red;}
6.還有通用選擇器的說法,就是用一個*表示,如下代碼:
p*{color: red;}
會把所有的段落的顏色都設置為紅色。
***************小結************
1.本小節我們講述了CSS選擇器和注釋。
2.CSS常用的選擇器就是標簽選擇器、id選擇器、class選擇器和偽類選擇器,其他選擇器的方式都可以用上面這幾種方式來搞定。
新聞熱點
疑難解答