更新時(shí)間:2021-01-20 來源:黑馬程序員 瀏覽量:
CSS英文全稱為Cascading Style Sheet,幾個(gè)單詞拆開翻譯,Cascading有大量的意思,Style有風(fēng)格樣式的意思,Sheets有表格的意思,整合在一起中文譯為“層疊樣式表”。
CSS主要是對HTML標(biāo)記的內(nèi)容進(jìn)行更加豐富的裝飾,并將網(wǎng)頁表現(xiàn)樣式與網(wǎng)頁結(jié)構(gòu)分離的一種樣式設(shè)計(jì)語言。可以使用CSS控制HTM頁面中的文本內(nèi)容、圖片外形以及版面布局等外觀的顯示樣式。
20世紀(jì)90年代初,HTML語言誕生,各種形式的樣式表也隨之出現(xiàn)。但隨著HTM功能的增加,外來定義樣式的語言變得越來越?jīng)]有意義了。1994年,哈坤·利提出CSS的最初建議,伯特·波斯(Bert Bos)當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器,它們決定一合作設(shè)計(jì)CSS。發(fā)展至今,CSS已經(jīng)出現(xiàn)了4個(gè)版本,具體介紹如下:
(1)CSS1.0
19912月W3C發(fā)布了第一個(gè)有關(guān)樣式的標(biāo)準(zhǔn)CSS1.0。這個(gè)版本中,已經(jīng)包含了的相關(guān)font的相關(guān)屬性、顏色與背景的相關(guān)屬性、文字的相關(guān)屬性、box的相關(guān)屬性等。
(2)CSS2.0
1985年5月,CSS2.0正式推出。這個(gè)版本推薦的是內(nèi)容和表現(xiàn)效果分離的方式,并開始使用樣式表結(jié)構(gòu)。
(3)CSS2.1
2004年2月,CSS2.1正式推出。它在CSS2.0的基礎(chǔ)上略微做了改動(dòng),刪除了許多不被瀏覽器支持的屬性。
(4)CSS3
早在2001年,W3C就著手開始準(zhǔn)備開發(fā)CSS第三版規(guī)范。雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒有塵埃落定,但是各主流瀏覽器已經(jīng)開始支持其中的絕大部分特性。
使用HTML進(jìn)行標(biāo)記網(wǎng)頁內(nèi)容時(shí),需要遵從一定的規(guī)范,CSS亦如此。要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾,首先要了解CSS樣式規(guī)則,具體格式如下:
選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3; …}
上述樣式規(guī)則中,選擇器用于指定需要改變樣式的HTML標(biāo)記,花括號(hào)內(nèi)是一條或多條聲明。每條聲明由一個(gè)屬性和屬性值組成,以“鍵值對”的形式出現(xiàn)。
屬性是對指定的標(biāo)記設(shè)置的樣式屬性,例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號(hào)“:”連接,多個(gè)“鍵值對”之間用英文分號(hào)“;”進(jìn)行分隔。例如,圖如所示為CSS樣式規(guī)則的結(jié)構(gòu)示意圖。
在書寫CSS樣式時(shí),除了要遵循CSS樣式規(guī)則,還必須注意CSS代碼中的幾個(gè)特點(diǎn),具體介紹如下。
CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫,而聲明不區(qū)分大小寫,按照書寫習(xí)慣一般點(diǎn),具體介紹如下。將選擇器、聲明都采用小寫的方式。
多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開,最后一個(gè)屬性后的分號(hào)可以省略但是為了便于增加新樣式最好保留。
如果屬性的屬性值由多個(gè)單詞組成且中間包含空格,則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如:
p{font-family: "Times New Roman";}
在編寫CSS代碼時(shí),為了提高代碼的可讀性,可使用“/*注釋語句*/”進(jìn)行注釋,例如上面的樣式代碼可添加如下注釋:
p{font-family:"TimesNewRoman";} /*這是CsS注釋文本,有利于方便查找代碼,此文本不會(huì)顯示在瀏覽器窗口中*/
在CSS代碼中空格是不被解析的,花括號(hào)以及分號(hào)前后的空格可有可無。因此,可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進(jìn)行排版,即所謂的格式化CS代碼,這樣可以提高代碼的可讀性。例如:
代碼段1
h1{color: green; font-size: 14PX;}
代碼段2
h1{ color: green; /*定義顏色屬性 */ font-size: 14PX; /*定義字體大小屬性 */ }
上述兩段代碼所呈現(xiàn)的效果是一樣的,但是第二種書寫方式的可讀性更高。需要注意的是,屬性值和單位之間是不允許出現(xiàn)空格的,否則瀏覽器解析時(shí)會(huì)出錯(cuò)。例如下面這行代碼就是錯(cuò)誤的。
h1{font-size: 14 px;} /*14和單位px之間有空格,瀏覽器解析時(shí)會(huì)出錯(cuò)*/
猜你喜歡: