級聯樣式表的好處

通過這個CSS短期課程獲取事實

級聯樣式表具有許多優點。 它們允許您在整個網站上使用相同的樣式表。 有兩種方法可以做到這一點:

  1. 與LINK元素鏈接
  2. 使用@import命令進行導入
    1. <風格>
    2. @import url('http://www.yoursite.com/styles.css');

外部樣式表的優點和缺點

關於級聯樣式表的最好的事情之一是您可以使用它們來保持您的網站的一致性。 最簡單的方法是鏈接或導入外部樣式表。 如果您為網站的每個頁面使用相同的外部樣式表,則可以確保所有頁面都具有相同的樣式。

使用外部樣式表的一些優點包括您可以一次控制多個文檔的外觀。 如果您與一群人合作創建您的網站,這一點尤其有用。 許多風格規則可能難以記憶,雖然您可能有印刷風格指南,但要不斷翻閱它以確定示例文本是否要用12點Arial字體或14點信使書寫是很繁瑣的。

您可以創建可用於許多不同HTML元素的樣式類。 如果您經常使用特殊的Wingdings字體來強調頁面上的各種內容,則可以使用您在樣式表中設置的Wingdings類來創建它們,而不是為每個重點實例定義特定的樣式。

您可以輕鬆將您的樣式分組以提高效率。 所有可用於CSS的分組方法都可以在外部樣式表中使用,這為您提供了更多的控制和靈活性。

也就是說,也有很好的理由不使用外部樣式表。 首先,他們可以增加下載時間,如果你鏈接到很多。

每次創建新的CSS文件並將其鏈接或導入到文檔中時,都需要Web瀏覽器再次調用Web服務器來獲取文件。 而服務器調用減慢了頁面加載時間。

如果您只有少量樣式,則可能會增加頁面的複雜度。
由於樣式在HTML中不可見,因此任何查看頁面的人都必須獲取另一個文檔(CSS文件)來弄清楚發生了什麼。

如何創建外部樣式表

外部樣式表的編寫方式與嵌入式和內聯樣式表相同。 但是你需要寫的是樣式選擇器聲明 。 您不需要文檔中的STYLE元素或屬性。

與所有其他CSS一樣,規則的語法是:

選擇器{property:value; }

這些規則被寫入擴展名為.css的文本文件中。 例如,你可以命名你的樣式表styles.css。

一旦你有一個樣式表文件,你需要將它鏈接到你的網頁。 正如我上面提到的,這是通過兩種方式完成的。

鏈接CSS文件

為了鏈接樣式表,您使用LINK元素。 這具有屬性rel和href。 rel屬性告訴瀏覽器你正在鏈接的是什麼(在這裡是一個樣式表),而href屬性則保存了CSS文件的路徑。

還有一個可選的屬性類型,可用於定義鏈接文檔的MIME類型。 這在HTML5中不是必需的,但應該在HTML 4文檔中使用。

以下是您用來鏈接名為styles.css的CSS樣式表的代碼:

在HTML 4文檔中,您可以編寫:

type =“text / css” >

導入CSS樣式表

導入的樣式表放置在STYLE元素中。 如果你喜歡,你可以使用嵌入式樣式。 您還可以在鏈接的樣式表中包含導入的樣式。 在STYLE或CSS文檔中,寫入:

@import url('http://www.yoursite.com/styles.css');