十六進位制顏色程式碼和款式化連結是從零開端創立 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;
}