WP Theme 教程 #10:十六進制顏色代碼和樣式化鏈接

【轉載自我愛水煮魚

繼續昨天介紹 CSS 的課程,我們今天將介紹如何着色十六進制顏色代碼

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

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

十六進制代碼

  • 每個十六進制代碼前都有 # 號,然后跟着六位數字。這些數字的范圍是從 #ffffff(白色)到 #000000(黑色)。
  • #ffffff,#eeeeee,#dddddd,#cccccc,#bbbbbb,#aaaaaa,#999999,#888888,#777777,#666666,#555555,#444444,#333333. #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;
}

  • 這些代碼是干嗎用的?給你所有的鏈接都加上下划線的(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;
}

下一篇:WP Theme 教程 #11:寬度和布局

請查看教程目錄:WordPress 主題教程系列

翻譯自:WP Theme Lesson #10: Hex Codes and Styling Links

創建 WordPress 主題系列教程均為本站翻譯,如要轉載,請注明:轉載自我愛水煮魚和本文地址。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems