CSS是什么意思？詳細(xì)介紹

CSS是什么？CSS全稱是什么？

CSS英文全稱為Cascading　Style　Sheet，幾個(gè)單詞拆開(kāi)翻譯，Cascading有大量的意思，Style有風(fēng)格樣式的意思，Sheets有表格的意思，整合在一起中文譯為“層疊樣式表”。

CSS的有什么用？

CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。文字的顏色、粗體、背景、行間距和左右兩列的排版等，都可以通過(guò)CSS來(lái)控制。

CSS的發(fā)展歷史

20世紀(jì)90年代初，HTML語(yǔ)言誕生，各種形式的樣式表也隨之出現(xiàn)。但隨著HTM功能的增加，外來(lái)定義樣式的語(yǔ)言變得越來(lái)越?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)效果分離的方式，并開(kāi)始使用樣式表結(jié)構(gòu)。

(3)CSS2.1

2004年2月，CSS2.1正式推出。它在CSS2.0的基礎(chǔ)上略微做了改動(dòng)，刪除了許多不被瀏覽器支持的屬性。

(4)CSS3

早在2001年，W3C就著手開(kāi)始準(zhǔn)備開(kāi)發(fā)CSS第三版規(guī)范。雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒(méi)有塵埃落定，但是各主流瀏覽器已經(jīng)開(kāi)始支持其中的絕大部分特性。

CSS樣式規(guī)則

使用HTML進(jìn)行標(biāo)記網(wǎng)頁(yè)內(nèi)容時(shí)，需要遵從一定的規(guī)范，CSS亦如此。要想熟練地使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先要了解CSS樣式規(guī)則，具體格式如下：

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3; …}

上述樣式規(guī)則中，選擇器用于指定需要改變樣式的HTML標(biāo)記，花括號(hào)內(nèi)是一條或多條聲明。每條聲明由一個(gè)屬性和屬性值組成，以“鍵值對(duì)”的形式出現(xiàn)。

屬性是對(duì)指定的標(biāo)記設(shè)置的樣式屬性，例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號(hào)“:”連接，多個(gè)“鍵值對(duì)”之間用英文分號(hào)“;”進(jìn)行分隔。例如，圖如所示為CSS樣式規(guī)則的結(jié)構(gòu)示意圖。

在書(shū)寫(xiě)CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼中的幾個(gè)特點(diǎn)，具體介紹如下。

CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，而聲明不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般點(diǎn)，具體介紹如下。將選擇器、聲明都采用小寫(xiě)的方式。

多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性后的分號(hào)可以省略但是為了便于增加新樣式最好保留。

如果屬性的屬性值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如：

p{font-family: "Times New Roman";}

在編寫(xiě)CSS代碼時(shí)，為了提高代碼的可讀性，可使用“/*注釋語(yǔ)句*/”進(jìn)行注釋，例如上面的樣式代碼可添加如下注釋：

p{font-family:"TimesNewRoman";} 
/*這是CsS注釋文本，有利于方便查找代碼，此文本不會(huì)顯示在瀏覽器窗口中*/

在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此，可以使用空格鍵、Tab鍵、回車(chē)鍵等對(duì)樣式代碼進(jìn)行排版，即所謂的格式化CS代碼，這樣可以提高代碼的可讀性。例如：

代碼段1

h1{color: green; font-size: 14PX;}

代碼段2

h1{
       color: green;  /*定義顏色屬性 */
       font-size: 14PX;     /*定義字體大小屬性 */
}

上述兩段代碼所呈現(xiàn)的效果是一樣的，但是第二種書(shū)寫(xiě)方式的可讀性更高。需要注意的是，屬性值和單位之間是不允許出現(xiàn)空格的，否則瀏覽器解析時(shí)會(huì)出錯(cuò)。例如下面這行代碼就是錯(cuò)誤的。

h1{font-size: 14 px;}    /*14和單位px之間有空格，瀏覽器解析時(shí)會(huì)出錯(cuò)*/

猜你喜歡：

CSS3如何設(shè)置顏色不透明度?

CSS結(jié)構(gòu)的特點(diǎn)有哪些?CSS樣式規(guī)則介紹

Css是什么?它的優(yōu)點(diǎn)哪些?

HTML、CSS和JavaScript分別是什么?有什么作用?

傳智教育web前端培訓(xùn)課程