了解3種CSS樣式

內聯,嵌入式和外部樣式表:以下是您需要了解的內容

前端網站的開發往往表現為三腳凳。 這些腿如下:

這個凳子的第二段,CSS或層疊樣式表,就是我們今天在這裡看到的。 具體來說,我們想要解決您可以添加到文檔中的3種樣式。

  1. 內聯樣式
  2. 嵌入式樣式
  3. 外部樣式

每種CSS樣式都有其優點和缺點,因此讓我們分別深入了解每種CSS樣式。

內聯樣式

內聯樣式是直接寫在HTML文檔標籤中的樣式。 內聯樣式僅影響其應用於的特定標籤。 以下是適用於標準鏈接或錨點標籤的內聯樣式示例:

這個CSS規則會將標準下劃線文字修飾從這個鏈接中移除。 但是,它不會更改頁面上的任何其他鏈接。 這是內聯樣式的限制之一。 由於它們只針對特定項目進行更改,因此您需要使用這些樣式來處理HTML,以實現實際的頁面設計。 這不是最佳做法。 事實上,這是從“字體”標籤和網頁中結構和風格的混合中消除的一步。

內聯樣式也具有非常高的特異性。

這使得他們很難用其他非內聯樣式進行覆蓋。 例如,如果您希望使網站響應並通過使用媒體查詢更改某個元素查看某些斷點的方式,則元素上的內聯樣式將很難做到這一點。

最終,內聯樣式實際上只適用於非常謹慎的使用。

事實上,我很少在我的網頁上使用內聯樣式。

嵌入式樣式

嵌入式樣式是嵌入在文檔頭部的樣式。 嵌入式樣式只影響嵌入頁面中的標籤。這種方法再一次否定了CSS的優點之一。 由於每個頁面都會有樣式

,如果您想進行網站範圍的更改(如將鏈接的顏色從紅色更改為綠色),則需要在每個頁面上進行此更改,因為每個頁面都使用嵌入式樣式表。 這比內聯樣式更好,但在許多情況下仍然存在問題。

添加到的樣式表

的文檔還會向該頁面添加大量的標記代碼,這也可能會使頁面在將來難以管理。

嵌入式樣式表的好處在於即時加載頁面本身,而不需要加載其他外部文件。 這可以從下載速度和性能角度獲益。

外部樣式表

今天的大多數網站都使用外部樣式表。外部樣式是用單獨的文檔編寫的樣式,然後附加到各種Web文檔中。 外部樣式表可以影響他們所連接的任何文檔,這意味著如果您有一個20頁的網站,每個頁面使用相同的樣式表(這通常是如何完成的),您可以對每個網頁進行可視化更改通過簡單地編輯該樣式表就可以找到這些頁面

這使得長期的網站管理變得更容易。

外部樣式表的缺點是它們需要頁面來獲取和加載這些外部文件。 不是每個頁面都會使用CSS表單中的每種樣式,因此很多頁面會加載比實際需要的更大的CSS頁面。

誠然,外部CSS文件的性能受到影響,但它當然可以最小化。 實際上,CSS文件只是文本文件,所以它們通常不是很大。 如果您的整個站點使用1個CSS文件,您還可以在最初加載後緩存該文檔的好處。

這意味著在第一頁有些訪問可能會有輕微的性能下降,但後續頁面將使用緩存的CSS文件,因此任何訪問都將被取消。 外部CSS文件是我如何構建我的所有網頁。