WordPress主题开发教程XIX:十六进制颜色代码和风格化链接(WordPress字体颜色)

Wordpress7个月前更新 SUYEONE
1.7K 0 0

今天,我们将探索如何运用颜色和十六进制颜色代码来美化你的网页。颜色代码通常跟在CSS属性后面,比如`color`或`background`,以设定文本或背景的色彩。例如,`body { color: #000000; }`会让页面主文本显示为黑色,而`body { background: #ffffff; }`则会给页面设置一个白色背景。

十六进制颜色代码由一个井号 (#) 开头,后面跟着六个十六进制数字,它们的范围从白色 (#ffffff) 到黑色 (#000000)。还有一些常见的颜色代码,比如红色 (#ff0000),深红色 (#550000),绿色 (#00ff00),以及蓝色 (#0000ff)。黄色的十六进制代码是 #ffff00,紫色(紫罗兰色)是 #ff00ff。

为了改变链接的样式,你可以使用以下代码:
“`CSS
a:link, a:visited {
text-decoration: underline;
color: #336699;
}
“`
这里的`a:link`用于未访问的链接,`a:visited`用于已访问过的链接。`text-decoration: underline;`会为链接添加下划线,而`color: #336699;`定义了链接的颜色。如果你想创建一个链接,你会使用 `` 和 `` 标签

如果你希望已访问过的链接与未访问的链接有相同的样式,你可以这样写:
“`css
a:link, a:visited {
text-decoration: underline;
color: #336699;
}
“`
使用逗号分隔选择器可以让它们共享相同的属性

接下来,我们可以添加链接悬停时的样式:
“`css
a:hover {
text-decoration: none;
}
“`
这会在鼠标悬停在链接上时移除下划线。若你想在悬停时改变颜色,只需添加`color`属性,比如:
“`css
a:hover {
text-decoration: none;
color: #ff0000;
}
“`
这将使链接在悬停时变为红色。

© 版权声明

相关文章

暂无评论

暂无评论...
☺一键登录开启个人书签等功能!