我們今天將介紹如何著色和十六進(jìn)制顏色代碼。
顏色屬性,跟著的是一個十六進(jìn)制代碼,是用于給文本上色的。如 body { color: #000000;} 意思是你頁面 body 內(nèi)所有文本將是黑色的。
背景顏色屬性,跟著的是一個十六進(jìn)制代碼,是給除背景上色。如 body{ background: #ffffff; } 意思是為 body 上白色背景。
十六進(jìn)制代碼
- 每個十六進(jìn)制代碼前都有 # 號,然后跟著六位數(shù)字。這些數(shù)字的范圍是從#ffffff(白色)到 #000000(黑色)。
- #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333, #222222, #111111
- 前兩位表示紅色,第三和第四代表綠色,而最后兩位代表藍(lán)色。#ff0000 是紅色(red)。#550000 是暗紅色(dark red)。 #220000 是更黑色的紅色(darker red)。 #00ff00 是綠色(green)。 #0000ff 是藍(lán)色(blue)。那么哪個十六進(jìn)制代碼是黃色呢? #ffff00 就是黃色(yellow)。 #ff00ff 是紫色(violet)。
第1步:添加鏈接顏色
在 body{ } 選擇器下輸入以下代碼:
a:link, a:visited{
text-decoration: underline;
color: #336699;
}
- 這些代碼是干嘛用的?,給所有的鏈接都加上下劃線的(text-decoration: underline;)和上了藍(lán)色(color: #336699;)。這是不是純正的藍(lán)色,但它確實是藍(lán)色是因為最后兩個數(shù)字(代表藍(lán)色)是最高值的數(shù)字。
- a:link 用于樣式化鏈接。當(dāng)你想把一個詞轉(zhuǎn)變?yōu)殒溄拥臅r候,用什么實現(xiàn)呢?使用<a> 和 </a> 這對標(biāo)簽,因此樣式化鏈接就是樣式化 a:link。
- a:visited 用于樣式化已經(jīng)訪問過的鏈接。
- 另外一種輸入方式:
a:link{
text-decoration: underline;
color: #336699;
} 和a:visited{
text-decoration: underline;
color: #336699;
} - 當(dāng)給a:link 和 a:visited這兩個選擇器應(yīng)用相同的 text-decoration: underline; 和color: #336699; 這兩個屬性的時候??梢园阉鼈兎旁谝黄?,使用逗號來區(qū)分。
第2步:添加鏈接懸停顏色
在 a:link, a:visited{ } 下面輸入以下代碼:
a:hover{
text-decoration: none;
}
這些代碼是干嘛用的呀? 當(dāng)把指針移到鏈接上面的時候下劃線消失。
如果不想在默認(rèn)情況下有下劃線而是在當(dāng)把指針移到鏈接上面的時候才出現(xiàn)下劃線,那么就在 a:link 和 a:hover 之間交換下 text-decoration: 的值。
如果你想更改你連接懸停時的顏色,那么就增加 color: 和任何你想要的十六進(jìn)制代碼,比如:
a:hover{
text-decoration: none;
color: #ff0000;
}
未經(jīng)允許不得轉(zhuǎn)載:445IT之家 » WordPress主題開發(fā)教程十九:十六進(jìn)制顏色代碼和樣式化鏈接