CSS

CSS

層疊樣式表
css是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(标準通用标記語言的一個應用)或XML(标準通用标記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜态地修飾網頁,還可以配合各種腳本語言動态地對網頁各元素進行格式化。CSS為HTML标記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。CSS能夠對網頁中元素位置的排版進行像素級精确控制,支持幾乎所有的字體字号樣式,擁有對網頁對象和模型樣式編輯的能力。[1]
  • 中文名:層疊樣式表
  • 外文名:Cascading Style Sheets
  • 别名:
  • 外語縮寫:CSS
  • 其他稱呼:級聯樣式表

發展曆程

1990年,Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年,Web真正走出實驗室。

從HTML被發明開始,樣式就以各種形式存在。不同的浏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML隻包含很少的顯示屬性。

随着HTML的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是随着這些功能的增加,HTML變的越來越雜亂,而且HTML頁面也越來越臃腫。于是CSS便誕生了。

1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯(Bert Bos)正在設計一個名為Argo的浏覽器,于是他們決定一起設計CSS。

其實當時在互聯網界已經有過一些統一樣式表語言的建議了,但CSS是第一個含有“層疊”豐意的樣式表語言。在CSS中,一個文件的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式,在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計,混合每個人的愛好。

哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議,1995年的www網絡會議上CSS又一次被提出,博斯演示了Argo浏覽器支持CSS的例子,哈肯也展示了支持CSS的Arena浏覽器。

同年,W3C組織(World WideWeb Consortium)成立,CSS的創作成員全部成為了W3C的工作小組并且全力以赴負責研發CSS标準,層疊樣式表的開發終于走上正軌。有越來越多的成員參與其中,例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon),他的努力最終令Internet Explorer浏覽器支持CSS标準。哈坤、波斯和其他一些人是這個項目的主要技術負責人。1996年底,CSS初稿已經完成,同年12月,層疊樣式表的第一份正式标準(Cascading style Sheets Level 1)完成,成為w3c的推薦标準。

1997年初,W3C組織負責CSS的工作組開始讨論第一版中沒有涉及到的問題。其讨論結果組成了1998年5月出版的CSS規範第二版。

編程開發

編程工具

記事本:使用Windows系統自帶的記事本可以編輯網頁。隻需要在保存文檔時,以.html為後綴名進行保存即可。

Dreamweaver:它與Flash、Fireworks并稱網頁三劍客。Dreamweaver是集網頁制作和管理網站于一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特别開發的視覺化網頁開發工具,利用它可以輕而易舉地制作出充滿動感的網頁。

語言特點

CSS為HTML标記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來說,CSS具有以下特點:

豐富的樣式定義

CSS提供了豐富的文檔樣式外觀,以及設置文本和背景屬性的能力;允許為任何元素創建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素内容間的距離;允許随意改變文本的大小寫方式、修飾方式以及其他頁面效果。

易于使用和修改

CSS可以将樣式定義在HTML元素的style屬性中,也可以将其定義在HTML文檔的header部分,也可以将樣式聲明在一個專門的CSS文件中,以供HTML頁面引用。總之,CSS樣式表可以将所有的樣式聲明統一存放,進行統一管理。

另外,可以将相同樣式的元素進行歸類,使用同一個樣式進行定義,也可以将某個樣式應用到所有同名的HTML标簽中,也可以将一個CSS樣式指定到某個頁面元素中。如果要修改樣式,我們隻需要在樣式列表中找到相應的樣式聲明進行修改。

多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都可以将其引用。這樣就可以實現多個頁面風格的統一。

層疊

簡單的說,層疊就是對一個元素多次設置同一個樣式,這将使用最後一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式将對前面的樣式設置進行重寫,在浏覽器中看到的将是最後面設置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網站中,往往需要大量或重複的表格和font元素形成各種規格的文字樣式,這樣做的後果就是會産生大量的HTML标簽,從而使頁面文件的大小增加。而将樣式的聲明單獨放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時使用的時間也會大大的減少。另外,CSS樣式表的複用更大程度的縮減了頁面的體積,減少下載的時間。

工作原理

CSS是一種定義樣式結構如字體、顔色、位置等的語言,被用于描述網頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網頁或者單獨的樣式單文件。無論哪一種方式,樣式單包含将樣式應用到指定類型的元素的規則。外部使用時,樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。

樣式規則是可應用于網頁中元素,如文本段落或鍊接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。内部樣式單直接放在網頁中,外部樣式單保存在獨立的文檔中,網頁通過一個特殊标簽鍊接外部樣式單。

名稱CSS中的“層疊(cascading)”表示樣式單規則應用于HTML文檔元素的方式。具體地說,CSS樣式單中的樣式形成一個層次結構,更具體的樣式覆蓋通用樣式。樣式規則的優先級由CSS根據這個層次結構決定,從而實現級聯效果。

語言基礎

屬性和屬性值

屬性

屬性的名字是一個合法的标識符,它們是CSS語法中的關鍵字。一種屬性規定了格式修飾的一個方面。例如:color是文本的顔色屬性,而text-indent則規定了段落的縮進。

要掌握一個屬性的用法,有六個方面需要了解。具體叙述如下:

①該屬性的合法屬性值(legal value)。顯然段落縮進屬性text-indent隻能賦給一個表示長度的值,而表示背景圖案的background.image屬性則應該取一個表示圖片位置鍊接的值或者是關鍵字none表示不用背景圖案。

②該屬性的默認值(initial value)。當在樣式表單中沒有規定該屬性,而且該屬性不能從它的父級元素那兒繼承的時候,則浏覽器将認為該屬性取它的默認值。

③該屬性所适用的元素(Applies to)。有的屬性隻适用于某些個别的元素,比如white-space屬性就隻适用于塊級元素。white-space屬性可以取normal、pre和nowrap三個值。當取normal的時候,浏覽器将忽略掉連續的空白字符,而隻顯示一個空白字符。當取pre的時候,則保留連續的空白字符。而取nowrap的時候,連續的空白字符被忽略,而且不自動換行。

④該屬性的值是否被下一級繼承(inherited)。

⑤如果該屬性能取百分值(percentage),那麼該百分值将如何解釋。也就是百分值所相對的标準是什麼。如margin屬性可以取百分值,它是相對于margin所存元素的容器的寬度。

⑥該屬性所屬的媒介類型組(media groups)。

屬性值

①整數和實數

這和普通意義上的整數和實數沒有多大區别。在CSS中隻能使用浮點小數,而不能像其他編程語言那樣使用科學記數法表示實數,即1.2E3在CSS中将是不合法的。下面是幾個正确的例子,整數:128、-313,實數:12.20、1415、-12.03。

②長度量

一個長度量由整數或實數加上相應的長度單位組成。長度量常用來對元素定位。而定位分為絕對定位和相對定位,因而長度單位也分為相對長度單位和絕對長度單位。

相對長度單位有:em——當前字體的高度,也就是font.size屬性的值;ex——當前字體中小寫字母x的高度;Dx——一個像素的長度,其實際的長度由顯示器的設置決定。

另一一點值得注意的是,子級元素不繼承父級元素的相對長度值,隻繼承它們的實際計算值。

③百分數量(percentages)

百分數量就是數字加上百分号。顯然,百分數量總是相對的,所以和相對長度量一樣,百分數量不被子級元素繼承。

選擇器

類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器),可以向這種元素類型的每個實例上應用聲明。例如,以下簡單規則的選擇器是H1,因此規則作用于文檔中所有的H1元素:

1

H1{color:red}

簡單屬性選擇器

CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY内的所有元素都有CLASS屬性。從本質上講,可以使用CLASS屬性來分類元素,在樣式表中創建規則來引用CLASS屬性的值,然後浏覽器自動将這些屬性應用到該組元素。

類選擇器以标志符(句點)開頭,用于指示後面是哪種類型的選擇器。對于類選擇器,之所以選擇句點是因為在很多編程語言中它與術語“類”相關聯。翻譯成英語,标志符表示“帶有類名的元素”。

ID屬性

ID屬性的操作類似于CLASS屬性,但有一點重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是,ID選擇器的标志符是散列符号(#)。标志符用來提醒浏覽器接下來出現的是ID值。

STYLE屬性

盡管在選擇器中可以使用CLASS和ID屬性值,STYLE屬性實際上可以替代整個選擇器機制。不是隻具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值),STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下,使用CSS,設計者将把所有的樣式規則置于一個樣式表中,該樣式表位于文檔頂部的STYLE元素内(或在外部進行鍊接)。但是,使用STYLE屬性能夠繞過樣式表将聲明直接放置到文檔的開始标記中。

組合選擇器類型

可以将類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更複雜的選擇器。通過組合選擇器,可以更加精确地處理希望賦予某種表示的元素。例如,要組合類型選擇器和類選擇器,一個元素必須滿足兩個要求:它必須是正确的類型和正确的類以便使樣式規則可以作用于它。

外部信息:僞類和僞元素

在CSS1中,樣式通常是基于在HTML源代碼中出現的标記和屬性。對于很多設計情景而言這種做法完全可行,但是它無法實現設計者希望獲得的一些常見的設計效果。

設計僞類和僞元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中,使用僞類可以根據一些情況改變文檔中鍊接的樣式,如根據鍊接是否被訪問,何時被訪問以及用戶和文檔的交互方式來應用改變。借助于僞元素,可以更改元素的第一個字母和第一行的樣式,或者添加源文檔中沒有出現過的元素。

僞類和僞元素都不存在于HTML;也就是說,它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充;也就是說實現更多的效果。

語言标準

在CSS 2.1規範中,識别符(包括選擇符中的元素名、類、ID)隻能包含A~Z、a~z、0~9等字符,加上連字符“-”、下劃線“_”。識别符不能以數字開頭,以連字符和下劃線開頭也是不允許的。隻有屬性、屬性值、單位、僞類、僞元素和“@”規則可以由連字符“-”開頭。同時,其他元素名稱、類和ID标識符也不允許用連字符開頭。

CSS的識别符也需要用反斜杠“”規避特殊字符,這些規避字符遵循IS010646規範。特殊字符的規避方法有兩種:第一種方法是遇到特殊字符則在這些字符前直接添加反斜杠,例如,“AT&T”變為“AT&T”;另一種方法為用反斜杠和Unicode或IS010646等值的十六進制數值一起,規避特殊字符,例如,“AT&T”變為“AT26T”。

技術應用

在HTML文件裡加一個超級鍊接,引入外部的CSS文檔。這個方法最方便管理整個網站的網頁風格,它讓網頁的文字内容與版面設計分開。隻要在一個CSS文檔内(擴展名為CSS)定義好網頁的風格,然後在網頁中加一個超級鍊接連接到該文檔,那麼網頁就會按照在CSS文檔内定義好的風格顯示出來。

語言評價

層疊樣式表(Cascading Style Sheet,CSS)有助于實現負責任的Web設計。CSS對開發者構建Web站點的影響很大,并且這種影響可能是無止境的。将網頁的大部分甚至是全部的表示信息從(X)HTML文件中移出,并将它們保留在一個樣式表中有諸多優點,如降低文件大小、節省網絡帶寬以及易于維護等。此外,站點的表現信息和核心内容相分離,使得站點的設計人員能夠在短暫的時間内對整個網站進行各種各樣的修改。

CSS簡化了網頁的格式代碼,外部的樣式表還會被浏覽器保存在緩存裡,加快了下載顯示的速度,也減少了需要上傳的代碼數量(因為重複設置的格式将被隻保存一次)。隻要修改保存着網站格式的CSs樣式表文件就可以改變整個站點的風格特色,在修改頁面數量龐大的站點時,顯得格外有用。這就避免了一個個網頁的修改,大大減少了工作量。

相關詞條

相關搜索

其它詞條