如何使用 CSS 更改链接颜色 |
您所在的位置：网站首页 › 怎么改变超链接文字颜色 › 如何使用 CSS 更改链接颜色 |
| 如何更改超链接下划线和锚文本的颜色 要更改下划线颜色，首先需要将 text-decoration 属性的“none”值去掉，并设置“none”值，然后添加带宽度的 border-bottom 属性（在这种情况下，用作超链接下划线宽度）和边框样式（实线、点线或者虚线）属性。 对于锚文本颜色，请使用 color 属性。 更改超链接下划线和锚文本颜色的示例： 文档的标题 a { text-decoration: none; } a:link { color: #000; border-bottom: 1px solid #ff0000; } a:visited { color: #e600e6; border-bottom: 1px solid #b3b3b3; } a:hover { color: #2d8653; border-bottom: 1px solid #000099; }访问 onitroad. 使用上述方法的样式链接示例： 文档的标题 a.one:link { color: #ccc; } a.one:visited { color: #095484; } a.one:hover { color: #8ebf42; } a.two:link { color: #ccc; } a.two:visited { color: #095484; } a.two:hover { font-size: 150%; } a.three:link { color: #ccc; } a.three:visited { color: #095484; } a.three:hover { background: #8ebf42; } a.four:link { color: #ccc; } a.four:visited { color: #095484; } a.four:hover { font-family: monospace; } a.five:link { color: #095484; text-decoration: none; } a.five:visited { color: #095484; text-decoration: none; } a.five:hover { text-decoration: overline underline; }把鼠标放到链接上，查看它们的变化 This link changes color This link changes font-size This link changes background-color This link changes font-family This link changes text-decoration 现在，我们将演示另一个示例，其中我们使用带有“继承”值的颜色属性。这将使元素采用其父元素的颜色。 使用 color 属性的“继承”值更改链接颜色的示例： 文档的标题 p { color: green; } p a { color: inherit; } Example onitroad.com访问 onitroad.com onitroad. 使用 CSS text-decoration-color 属性的样式链接示例： 文档的标题 a { text-decoration-color: grey; } a:link { color: #777777; } a:hover { color: #2d8653; }访问onitroad. |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |