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

用户投稿 • 2022年9月7日 am1:05 • 建站教程 • 阅读 76

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

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

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

这些代码是干嘛用的？，给所有的链接都加上下划线的（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;
}

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 523000381@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.51m1.com/17465.html

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

第1步：添加链接颜色

第2步：添加链接悬停颜色

相关推荐