CSS的color屬性並非只能用於文本顯示

標籤：style   blog   http   color   使用   width   

雖然CSS並不是一種很複雜的技術，但就算你是一個使用CSS多年的高手，仍然會有很多CSS用法/屬性/屬性值你從來沒使用過，甚至從來沒聽說過。

對於CSS的color屬性，相信所有Web開發人員都使用過。如果你並不是一個特別有經驗的程式員，我相信你未必知道color屬性除了能用在文本顯示，還可以用作其它地方。

你可以先看一下下面的示範：

HTML代碼

<img alt="Example alt text" width="200" height="200"><ul>  <li>Example list item</li></ul><ol>  <li>Example list item</li></ol><hr>

CSS代碼

body {  color: yellow;  background: #444;  font-size: 20px;  font-family: Arial, sans-serif;  text-align: center;}ul {  border: solid 2px;  text-align: left;}ol {  text-align: left;}hr {  border-color: inherit;}

 

請注意，上面的代碼裡只使用了一個color屬性，就是在body元素上，設定成了yellow。但是，你也看到了，所有這個頁面上的東西都變成了黃色，包括：

• 無法顯示的圖片的alt文字
• list元素的邊框
• 無序list元素前面的小點
• 有序list元素前面的數字
• 還有hr元素

有趣的是，這個hr元素，預設情況下它並不從body上繼承color的屬性，但我使用border-color: inherit強制讓它繼承。這是個很詭異的特徵。

在CSS規範裡是這樣說的：

這個屬性聲明了元素常值內容的前景色彩(foreground color)。除此之外，它的值還被用於其它地方間接的引用….比如，其它可以接受顏色值的屬性。