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

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

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

5673eba50f3c1

这些代码是干吗用的?,给所有的链接都加上下划线的(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;}

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

(0)
上一篇 2022年8月4日 下午12:30
下一篇 2022年8月4日 下午12:30

相关推荐

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部