继续昨天介绍 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 在 a:link 样式中。
- a:visited 用于样式化已经点击过的链接(访问过的链接)因此 Visited 在 a:visited 样式中。
-
另外一种输入方式:
a:link{
text-decoration: underline;
color: #336699;
}
和
a:visited{
text-decoration: underline;
color: #336699;
}
- 你使用 逗号 来区分 a:link and a:visited 当给两个选择器应用 text-decoration: underline; 和 color: #336699; 着两个属性的时候。
第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;
}
请查看教程目录:WordPress 主题教程系列
翻译自:WP Theme Lesson #10: Hex Codes and Styling Links
创建 WordPress 主题系列教程均为本站翻译,如要转载,请注明:转载自我爱水煮鱼和本文地址。
Orignal From: WP Theme 教程 #10:十六进制颜色代码和样式化链接