票友山

WordPress 主题制作系列教程#10：十六进制颜色代码与链接样式

原文地址：http://www.wpdesigner.com/2007/03/10/wp-theme-lesson-10-hex-codes-and-styling-links/
翻译:票友山

昨天介绍了CSS ，今天我们继续。我们需要很多的色彩coloring 并学习更多的十六进制颜色代码。色彩属性，后面跟着一个十六进制代码，是用来为文本着色的。比如：body { color: #000000;} 代表所有在body 段的文本都为黑色。

背景属性，后面紧着一个十六进制颜色代码，是用来为所有非文本着色。比如：body{ background: #ffffff; } 代表boy 段北京为白色。

十六进制颜色代码

• 十六进制颜色代码有六位数，且每个代码前都有个# 号。这些数字从#ffffff （白色）一直变化到#000000 （黑色）。
• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
• 前两位用来表现红色（R），中间两位用来表现绿色（G），后两位用来表现蓝色（B）。#ff0000 表示红，#550000 表示暗红，#220000 表示更暗的红，#00ff00 表示绿，#0000ff 表示蓝。等等，难道黄色不是一个原色？ 哪个十六进制颜色代码代表黄色？ #ffff00 正是黄色。 #ff00ff 是紫色。

步骤 1

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

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

• 这些代码什么意思？你确认了所有连接都有下划线（text-decoration: underline;）并且是粉蓝色的（color: #336699;）。这个是很淡的蓝色，但是我们还是把它称为蓝色因为它最后两位数字（代表蓝色）最大。
• a:link 用来将连接风格化；当你想把一段文本变成链接，该使用什么？ <a> 和</a> 标签，至此以后，A 被a:link 所控制。
• a:visited 用来风格化一个已经被点击过的链接，支持以后，点击过的链接 由a:visited 控制。

• 换一种方式：
  a:link{
  text-decoration: underline;
  color: #336699;
  }

  还有

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

• 当应用text-decoration: underline; 和color: #336699; 到两个选择符的时候，你使用逗号 来分开a:link 和a:visited。

步骤 2

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

a:hover{
text-decoration: none;
}

有什么意义？当鼠标悬停在一个超链接上的时候，下划线不显示了。至此以后，Hover 由a:hover 控制。

如果你在默认情况在不想显示下划线，而是在鼠标悬停的时候才显示，那么交换a:link 和a:hover的text-decoration: 值。

如果你想改变悬停时链接的颜色，请加color: 并给它赋任意你想要的十六进制颜色代码。比如：

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

版权说明

无特殊说明均为原创文章，转载请注明。
本文链接地址: http://sunxun.info/2009/07/wp-theme-10-link-hex-code/