在線樣式在CSS中的優點和缺點

CSS或層疊樣式表是現代網站設計中用於將視覺外觀應用於頁面的內容。 雖然HTML創建了頁面的結構,而Javascript可以處理行為,但網站的外觀是CSS的領域。 在涉及這些樣式時,它們通常使用外部樣式表應用,但您也可以使用稱為“內聯樣式”的CSS樣式應用於單個特定元素。

內聯樣式是直接在頁面的HTML中應用的CSS樣式。 這種方法既有優點也有缺點。 首先,我們來看看這些樣式的寫法。

如何編寫內聯樣式

要創建內聯CSS樣式,首先要編寫樣式屬性,類似於樣式表中的樣式,但它必須全部都是一行。 使用分號分隔多個屬性,就像在樣式表中一樣。

背景:#CCC; 顏色:#FFF; 邊框:純黑1px;

將這一行樣式放置在要設置樣式的元素的樣式屬性中。 例如,如果您想將此樣式應用於HTML中的段落,則該元素如下所示:

在此示例中,此特定段落將以淺灰色背景(即#ccc將呈現的內容),黑色文本(來自#000顏色)以及圍繞段落所有四邊的1像素純黑色邊框顯示。

內聯樣式的優點

由於級聯樣式表級聯樣式的級聯在文檔中具有最高的優先級或特異性。 這意味著無論您的外部樣式表中有何內容,它們都將被應用(除了任何賦予!表單的重要聲明的樣式外,但這不是應該在生產站點中完成的)可以避免)。

唯一具有比內聯樣式更高優先級的樣式是由讀者自己應用的用戶樣式 。 如果您在應用更改時遇到問題,可以嘗試在元素上設置內聯樣式。 如果你的風格仍然不使用內聯風格顯示,你知道還有其他事情正在發生。

內聯樣式可以方便快捷地添加,因此您無需擔心編寫正確的CSS選擇器,因為您直接將樣式添加到要更改的元素(該元素實質上取代了您將在外部樣式表中編寫的選擇器)。 您不需要創建一個全新的文檔(如使用外部樣式表)或編輯文檔頭部的新元素(如使用內部樣式表)。 您只需添加幾乎在每個HTML元素上都有效的樣式屬性。 這些都是您可能會嘗試使用內聯樣式的所有原因,但您還必須了解此方法的一些非常重要的缺點。

內聯樣式的缺點

因為內聯樣式是級聯中最具體的,所以它們可以替代你不想要的東西。 他們也否定了CSS最強大的方面之一 - 能夠從一個中心CSS文件中設計大量和大量的網頁,使未來的更新和样式更改更容易管理。

如果您只需要使用內聯樣式,那麼您的文檔將很快變得臃腫並且很難維護。 這是因為內聯樣式必須應用於您想要的每個元素。 因此,如果您希望所有段落都具有“Arial” 字體系列 ,則必須為文檔中的每個

標籤添加內聯樣式。 這增加了設計人員的維護工作和讀者的下載時間,因為您需要在網站的每個頁面上更改此設置以更改該字體系列。 或者,如果您使用單獨的樣式表,則可以在一個位置更改它,並讓每個頁面都能接收到該更新。

實際上,這是網頁設計的倒退 - 退回標籤的日子!

內聯樣式的另一個缺點是不可能使用它們來設置偽元素和類。 例如,對於外部樣式表 ,您可以設置錨點標籤的訪問類型,懸停類型,活動類型和鏈接顏色的樣式,但是對於內聯樣式,所有樣式都是鏈接本身,因為這是style屬性所附帶的。

最終,我們建議您不要為您的網頁使用內聯樣式 ,因為它們會導致問題並使頁面需要更多維護工作。 我們唯一使用它們的時候是我們想要在開發過程中快速檢查風格。 一旦我們找到了適合這一元素的東西,我們將它移動到我們的外部樣式表中。

由Jennifer Krynin撰寫的原文。 由Jeremy Girard編輯。