級聯樣式單的基本使用

2021-09-25 01:16:14 字數 945 閱讀 8173

cascading style sheet(級聯樣式單),縮寫css,又稱層疊樣式單。其主要用於網頁的風格設計,使傳統的web網頁變得更富有表現力。

樣式單同樣有許多突出優點:

例如表達效果豐富、文件體積小、便於資訊檢索、可讀性好等。

css樣式單可以控制html文件的顯示。但是控制文件之前,首先應在需要顯示的html文件中匯入css樣式單。為了在html文件中使用css樣式單,有如下四種使用樣式單的方式:鏈結外部樣式檔案、匯入外部樣式檔案、使用內部樣式定義、使用行內樣式。

1、鏈結外部樣式檔案

html文件中使用元素來引入外部樣式檔案,引入外部樣式檔案應在元素中增加如下子元素:

在上面的語法格式中,type和rel表面該頁面使用了css樣式單,href屬性的值則是指向css樣式單檔案的位址,此位址可以是相互位址也可以為絕對位址。

2、使用內部css樣式

內部css樣式,控制某些css樣式僅對某個頁面有效,而不會影響整個站點。

內部css樣式需要放在

style="property1:value1;property2:value2..."
4、匯入外部樣式單

匯入外部樣式單的功能與鏈結外部樣式單的功能差不多,只是語法上存在差別。匯入外部樣式單需要在那麼問題來了,既然鏈結外部樣式單與匯入外部樣式單功能差不多,為何還要支援兩種語法?那是因為以前的很多瀏覽器都不支援@import匯入,因此開發人員會把那一些瀏覽器可能不支援的高階css屬性放在外部樣式單中匯入。但實際上,由於某些瀏覽器會在匯入外部樣式單時導致「屏閃」,所以開發者應盡量避免使用@import匯入外部樣式單。

除此之外,還有乙個問題。那就是當上面的幾種樣式單同時工作時,要以哪種樣式單為基礎呢?

這就需要引入另外乙個名詞——優先順序;計算機會根據優先順序的不同去進行優先順序最高的工作,而上面這幾種樣式單的優先順序為:行內樣式>內部樣式>外部樣式

級聯樣式單與選擇器

鏈結外部樣式檔案 這種方式將樣式檔案徹底與html文件分離,樣式檔案需要額外引入。在這種方式下,一批樣式可控制多份文件。使用link元素來引入外部樣式檔案 匯入外部樣式檔案 這種方式與上一種方式類似,只是使用 import來引入外部樣式單。import 使用內部樣式定義 這種方式是通過在html文件...

使用級聯樣式表選擇器

存檔日期 2019年5月15日 首次發布 2002年9月1日 使用級聯樣式表 css 頁面作者可以更精確地控制內容的外觀。css規則由乙個選擇器組成,該選擇器確定規則適用的內容以及設定的屬性和值。雖然大多數開發人員習慣於使用基於標籤名稱的選擇器,但css實際上提供了幾個不同的選項,可以實現更大的控制...

CSS樣式權重的級聯cascade的概念深入理解

我們知道,firefox在眾多瀏覽器中是對css 2高度相容的一款瀏覽器,那是我能夠編寫乙個中型b2b 的時候 並不能說是我遇到過的難題 在禪意花園中看到的乙個案例,說的是某個選單在css中定義了以後只能在firefox中正常顯示。因為那個css涉及的濾鏡太多,而且還有css中 級聯 cascade...