十六進制顏色代碼和款式化鏈接是從零開端創立 WordPress 主題系列教程的第十篇。這篇繼續昨天引見 CSS 的課程,我們今天將引見如何着色和十六進制顏色代碼。

顏色屬性,跟着的是一個十六進制代碼,是用於給文本上色。如 body { color: #000000;} 意義是你頁面 body 內一切文本將是黑色的。

背景顏色屬性,跟着的是一個十六進制代碼,是給除背景上色。如 body{ background: #ffffff; } 意義是為 body 上白色背景。

十六進制代碼
•每個十六進制代碼前都有 # 號,然後跟着六位數字。這些數字的範圍是從 #ffffff(白色) 到 #000000(黑色) 。
•#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #343b49, #222222, #111111
•前兩位表示紅色,第三和第四代表綠色,而最後兩位代表藍色。 #ff0000 是紅色 (red) 。 #550000 是暗紅色 (dark red) 。 #220000 是更黑色的紅色 (darker red) 。 #00ff00 是綠色 (green) 。 #0000ff 是藍色 (blue) 。那麼哪個十六進制代碼是黃色呢? #ffff00 就是黃色 (yellow) 。 #ff00ff 是紫色 (violet) 。

第 1 步:添加鏈接顏色

body{ } 選擇器下輸入以下代碼:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

style-links.gif

  • 這些代碼是幹嗎用的?,給所有的鏈接都加上下劃線的 (text-decoration: underline;) 和上了藍色 (color: #336699;) 。這是不是純正的藍色,但它確實是藍色是因為最後兩個數字 (代表藍色) 是最高值的數字。
  • a:link 用於樣式化鏈接。當你想把一個詞轉變為鏈接的時候,用什麼實現呢?使用 <a></a> 這對標籤,因此樣式化鏈接就是樣式化 a:link
  • a:visited 用於樣式化已經訪問過的鏈接。
  • 另外一種輸入方式:
    a:link{
    text-decoration: underline;
    color: #336699;
    }

    a:visited{
    text-decoration: underline;
    color: #336699;
    }

  • 當給 a:linka:visited 這兩個選擇器應用相同的 text-decoration: underline;color: #336699; 這兩個屬性的時候。可以把它麼你放在一起,使用逗號來區分。

第 2 步:添加鏈接懸停顏色

a:link, a:visited{ } 下輸入以下代碼:

a:hover{
text-decoration: none;
}

這些代碼是幹嗎用的呀? 當把指針移到鏈接上面時候下劃線消失。

如果不想在默認情況下有下劃線而是在當把指針移到鏈接上面的時候才出現下劃線,那麼就在 a:linka:hover 之間交換下 text-decoration: 的值。

如果你想更改你鏈接懸停時的顏色,那麼就增加 color: 和任何你想要的十六進制代碼,如:

a:hover{
text-decoration: none;
color: #ff0000;
}