WordPress主题开发教程十九：十六进制颜色代码和样式化链接

最后更新时间为 2022年4月22日

文章快捷目录

我们今天将介绍如何着色和十六进制颜色代码。

颜色属性，跟着的是一个十六进制代码，是用于给文本上色。如 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）。

在 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:link 和 a:visited这两个选择器应用相同的 text-decoration: underline; 和color: #336699; 这两个属性的时候。可以把它么你放在一起，使用逗号来区分。

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

a:hover{
text-decoration: none;
}

这些代码是干吗用的呀？ 当把指针移到链接上面时候下划线消失。

如果不想在默认情况下有下划线而是在当把指针移到链接上面的时候才出现下划线，那么就在 a:link 和 a:hover 之间交换下 text-decoration: 的值。

如果你想更改你链接悬停时的颜色，那么就增加 color: 和任何你想要的十六进制代码，如：

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