WP Theme 教程 #10：十六进制颜色代码和样式化链接

June 17th, 2007 at 01:23am 雪山飞猪 浏览: 5,596

继续昨天介绍 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:link 和 a:visited这两个选择器应用 text-decoration: underline; 和 color: #336699; 这两个属性的时候。可以使用逗号来区分。

第2步：

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

a:hover{
text-decoration: none;
}

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

如果你不想在默认情况下有下划线而是在当你把指针移到链接上面的时候出现下划线，那么就在 a:link 和 a: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 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。

作者：雪山飞猪
原文链接：WP Theme 教程 #10：十六进制颜色代码和样式化链接
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。

PR: 3 / del.ici.ous it / Technorati: 3