Themes

WP主题教程#10：十六进制代码和样式化链接 (Hex Codes and Styling Links)

Filed under by Jeehon

继续昨天的介绍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是红色，#550000是深红色，#220000是更深的红色（好纠结啊），#00ff00是绿色，#0000ff是蓝色。等等，黄色不是主要的颜色吗？黄色的十六进制代码是什么呢？#ffff00是黄色，#ff00ff是紫色。

在body{}选择器的下面输入下面的代码：

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

上面的代码是干什么用的？你给你的链接加上了下划线(text-decoration:underline)并且将它的颜色设置为蓝色(color:#336699)。这是一种不同色调的蓝色，说它是蓝色是因为最后两个代表蓝色的数字比其它数字都大。
a:link是用来样式化链接。当你想把一个单词变成链接时，你将会怎么做？你会使用 ** **标签，因此样式化链接就是给 ****标签添加样式。
a:visited是用来样式化被点击过的链接。
你可以通过下面这种方式给a:link和a:visited添加样式： a:link{ text-decoration:underline; color:#336699; }
```
a:visited{
      text-decoration:underline;
      color:#336699;
}
```
在之前的代码中，你在给a:link和a:visited两个选择器添加样式text-decoration:underline和color:#336699时，你用逗号将它们俩隔开，这样就可以同时给它们两个添加相同的样式了。

在a:link,a:visited{}的下面输入下面的代码：

a:hover{
        text-decoration:none;
}

上面的代码是干什么的？当你将鼠标停留在链接上时，链接的下划线将会消失。

如果你想当鼠标停留在链接上才显示出下划线而不是默认情况下显示下划线，就请交换一下a:link和a:hover的text-decoration值。

如果你想改变鼠标停留在链接上时链接的颜色，那就就给a:hover加上color:属性，并且赋一个你想要的颜色的十六进制代码。例如：

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