如何構建外部樣式表

使用CSS全站

網站是風格和結構的組合,在今天的網站上,將網站的這兩個方面彼此分開是最佳做法。

HTML一直是網站的結構。 在網絡的早期,HTML也包含了風格信息。 諸如標籤之類的元素遍布HTML代碼,並在結構信息旁邊添加外觀和感覺信息。 網絡標準運動推動我們改變這種做法,而是將所有樣式信息推送到CSS或層疊樣式表中。 更進一步,目前的建議是,您使用所謂的“外部樣式表”來滿足您的網站樣式需求。

外部樣式表的優點和缺點

關於層疊樣式表最好的一點是您可以使用它們來保持整個網站的一致性。 最簡單的方法是鏈接或導入外部樣式表 。 如果您為網站的每個頁面使用相同的外部樣式表,則可以確保所有頁面都具有相同的樣式。 您還可以更輕鬆地對未來進行更改。 由於每個頁面都使用相同的外部樣式表,因此對該表單的任何更改都會影響每個網站頁面。 這比單獨更改每個頁面要好得多!

外部樣式表的優點

  • 您可以一次控制幾個文檔的外觀。
    • 如果您與一群人合作創建您的網站,這一點尤其有用。 許多風格規則可能難以記憶,雖然您可能有印刷風格指南,但不斷翻閱它以確定示例文本是否要用12點Arial字體或14點快遞方式書寫是低效和乏味的。 把所有東西都放在一個地方,並且由於這個地方也是你要做出改變的地方,所以你可以使維護變得更容易。
  • 您可以創建可用於許多不同HTML元素的樣式類。
    • 如果您經常使用某種字體樣式來強調頁面上的各種事物,則可以使用您在樣式表中設置的類屬性來獲得此外觀和感覺,而不是為每個實例定義特定的樣式重點。
  • 您可以輕鬆將您的樣式分組以提高效率。
    • 所有可用於CSS的分組方法都可以在外部樣式表中使用,這為您提供了更多的控制和靈活性。

外部樣式表的缺點

  • 外部樣式表可以增加下載時間,特別是如果它們非常大。 由於CSS文件是必須加載的單獨文檔,因此會影響執行該下載的性能。
  • 外部樣式表變得非常快,因為當樣式不再被使用時很難分辨,因為當頁面被移除時它不會被刪除。 正確管理你的CSS文件是很重要的,特別是如果多人在使用同一個文件。
  • 如果您只有一個單頁網站,則可能不需要為CSS提供外部文件,因為您只有一個樣式的頁面。 只有一個頁面站點時,外部CSS的許多優點都會丟失。

如何創建外部樣式表

使用與文檔級樣式表類似的語法創建外部樣式表。 然而,你需要包括的是選擇器和聲明。 就像在文檔級樣式表中一樣,規則的語法是:

選擇器{property:value;}

將這些規則保存為擴展名為.css的文本文件。 這不是必需的,但這是一個很好的習慣,因此您可以立即在目錄列表中識別您的樣式表。

一旦你有一個樣式表文件,你需要將它鏈接到你的網頁 。 這可以通過兩種方式完成:

  1. 鏈接
    1. 為了鏈接樣式表,您使用HTML標籤。 這具有屬性reltypehref 。 rel屬性告訴你連接的是什麼(在本例中是一個樣式表),類型定義了瀏覽器的MIME類型,而href是.css文件的路徑。
  2. 輸入
    1. 您可以在文檔級樣式表中使用導入的樣式表,以便您可以導入外部樣式表的屬性,同時不會丟失任何特定於文檔的樣式表。 您以類似的方式調用鏈接的樣式表,只有在文檔級樣式聲明中調用該樣式表時才需要調用它。 您可以根據需要導入任意數量的外部樣式表,以維護您的網站。

Jennifer Krynin的原創文章。 由傑里米吉拉德在8/8/17編輯