欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」WordPress主题开发教程十九:十六进制颜色代码和样式化链接

作者 : 自学哈 本文共1284个字,预计阅读时间需要4分钟 2022-11-26 共133人阅读
也想出现在这里? 联系我们

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

颜色属性,跟着的是一个十六进制代码,是用于给文本上色。如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:linka:visited用于样式化已经访问过的链接。另外一种输入方式:
a:link{
text-decoration: underline;
color: #336699;
}
a:visited{
text-decoration: underline;
color: #336699;
}
当给a:linka:visited这两个选择器应用相同的text-decoration: underline;color: #336699;这两个属性的时候。可以把它么你放在一起,使用逗号来区分。

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

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

a:hover{
text-decoration: none;
}

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

如果不想在默认情况下有下划线而是在当把指针移到链接上面的时候才出现下划线,那么就在a:linka:hover之间交换下text-decoration:的值。

如果你想更改你链接悬停时的颜色,那么就增加color:和任何你想要的十六进制代码,如:

a:hover{
text-decoration: none;
color: #ff0000;
}

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」WordPress主题开发教程十九:十六进制颜色代码和样式化链接
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号