顏色

2024-04-27 15:09:38

字體：大中小

來源：轉載

供稿：網友

關于: 顏色

到目前為止，在這個系列中，都很少用到用名字命名的顏色屬性。CSS2支持17種名字的顏色。其中有一些可能不像你期望的那樣，如下圖：

black	gray	silver	white
主要的	red	lime	blue
次要	yellow	aqua	fuchsia
	maroon	orange	olive	purple	green	navy

對于更多地顏色，你可以使用代表紅，綠，藍三個顏色的16進制數字來表示。16進制數字的范圍0-9，a-f。其中a-f代表的數值就是10-15：

黑	`#000`
純紅	`#f00`
純綠	`#0f0`
純藍	`#00f`
白	`#fff`

要得到瀏覽器能夠呈現的所有的顏色，你就得使用兩個16進制來表示（也就是6位）:

黑	`#000000`
純紅	`#ff0000`
純綠	`#00ff00`
純藍	`#0000ff`
白	`#ffffff`

你能夠從你的畫圖程序或者其他的工具上得到6位的顏色數值.

例如

可以通過調整3位數字來得到不同的顏色:

從純紅開始:	`#f00`
讓它淡一點，加一些綠色和藍色:	`#f77`
讓它更偏橙色一些，多加一些綠色:	`#fa7`
讓它更深一些，所有的顏色部分，紅，綠，藍都要減少:	`#c74`
讓它的飽和度更低一些，所有的顏色值都調整到差不多大小:	`#c98`
如果所有的顏色值都相等，那么就變成了灰色:	`#ccc`

更多細節

還能夠通過RGB值（0-255或者是百分比值），來得到顏色

比如，下面是深紅色的RGB表示法:

rgb(128, 0, 0)

對于如何指定顏色的所有信息，可以參看 CSS規范中的: Colors 部分.

更多關于系統顏色的說明，比如菜單、樹等，可以參看CSS規范中得: CSS2 System Colors 部分.

顏色屬性

你已經在文本中使用了 color 屬性.

同樣可以使用background-color 屬性來改變元素的背景色.

背景色可以設置 transparent 屬性來移除掉所有的顏色，呈現出父元素的背景色

例如

在本指南中，例如文本框使用了淡黃色來表示背景色：

background-color: #fffff4;

更多細節 文本框使用了下面的淡灰色 :

background-color: #f4f4f4;

實踐: 使用顏色代碼

編輯你的CSS文件.

下面用粗體顯示的部分，表示首字母用淡藍色顯示. (The layout and comments in your file PRobably differ from the file shown here. Keep the layout and comments the way you prefer them.)

/*** CSS 手冊: 顏色頁面 ***//* 頁面字體 */body {font: 16px "Comic Sans MS", cursive;}/* 段落 */p {color: blue;}#first {font-style: italic;}/* 首字母 */strong { color: red; background-color: #ddf; font: 200% serif; }.carrot {color: red;}.spinach {color: green;}

保存文件，刷新瀏覽器看結果.