爲什麼「rgb（224，226，213）」屬性值無效？

爲什麼任何瀏覽器都不能應用此顏色rgb規則？爲什麼「rgb（224，226，213）」屬性值無效？

HTML

<header> 
    <h1>Header</h1> 
</header>

CSS

header h1 { 
    background-color: red; 
    color: rgb (224, 226, 213); 
}

Chrome的Web開發工具，是告訴我，這是一個無效的屬性值，但我不明白爲什麼。你可以在JSFiddle看到結果。

來源

2012-12-14 Pigueiras

rgb後面有空格 – Esailija

雖然這是一個錯字問題，但我認爲這不太可能幫助未來的讀者。這是一個非常常見的問題，我的回答也暗示了這一點。 – BoltClock

你有rgb和(之間的空間，這是不允許的：

header h1 { 
    background-color: red; 
    color: rgb(224, 226, 213); 
}

不，我是認真的，不是這樣的。

與許多編程語言不同，CSS明確禁止在函數名稱和左括號之間留有空格。這不僅適用於rgb()和rgba()，還適用於其他功能值，如url()和attr()以及功能僞類，如:nth-child(),:lang()和:not()。

參見section 4.3.6 of CSS2.1，其中指出：

在功能表示法的RGB值的格式爲「RGB（」後面是逗號分隔的三個數值（無論是3的整數值或三個列表百分比值），然後是'）'。 [...]在數字值周圍允許有空白字符。

，也指Appendix G的語法，正是下列標記化，這清楚地表明，不希望空白的標識符和左括號之間：

{ident}"("  {return FUNCTION;}

來源

2012-12-14 10:51:43 BoltClock

這對我來說是一個驚喜，但CSS 2.1語法確實以這種方式定義了函數符號，甚至「rgb（...）」的散文描述也清楚地表明瞭這一點（並且還明確指出空間可以在這些數字意味着在符號中不允許有空格）。 –

解決此類錯誤的最簡單方法是驗證它。你可以在[W3C驗證器]中驗證你的css（http://jigsaw.w3.org/css-validator/#validate_by_input）。 –

儘管拼圖驗證程序可以爲您發現錯誤，但在向您展示如何修復它們時，這是非常不可靠的。例如，它實際上並沒有告訴你，空間的存在是造成問題的原因（因爲它沒有將空間看作是一個開始的問題）。對於習慣於允許空間的語言編程的人來說，它不會立即顯而易見。如果提問者在發佈他們的問題之前確實通過Jigsaw運行了他們的CSS（這並不是說我相信他們這麼做了，但即使他們這麼做了，我也不會感到驚訝，如果他們最終發佈了）。 – BoltClock

你需要rgb後刪除空格rgb(224, 226, 213)

來源

2012-12-14 10:53:33

爲什麼「rgb（224，226，213）」屬性值無效？

回答

相關問題