[分享]css中a标签使用方法

CSS中a标签是用来定义超链接的标签。在Web页面中，经常通过a标签将不同的页面链接在一起，从而方便用户跳转到不同的页面。下面介绍一些CSS中a标签的使用方法。a { color: 333; / 设置...

CSS中a标签是用来定义超链接的标签。在Web页面中，经常通过a标签将不同的页面链接在一起，从而方便用户跳转到不同的页面。下面介绍一些CSS中a标签的使用方法。

a {
    color: #333;   /* 设置链接字体颜色 */
    text-decoration: none;   /* 取消链接下划线 */
}

a:hover {
    color: #f00;   /* 设置鼠标移到链接上时的字体颜色 */
    text-decoration: underline;   /* 设置鼠标移到链接上时的下划线 */
} 

通过上面的样式定义，我们可以将链接字体颜色设置成灰色，同时取消下划线，使页面看起来更加干净整洁。当鼠标移动到链接上时，字体颜色变成红色，同时出现下划线，提醒用户该文本是可点击的。

除了基本样式，CSS中a标签还有很多其他属性可以设置：

a:visited {
    color: #666;   /* 设置已访问链接的字体颜色 */
}

a:active {
    color: #00f;   /* 设置用户点击链接时的字体颜色 */
    text-decoration: underline;   /* 设置用户点击链接时的下划线 */
}

a.target-class {
    target-new: tab;   /* 通过class属性为链接设置打开方式 */
}

a[target=_blank] {
    target-new: tab;   /* 通过target属性为链接设置打开方式 */
}

a[href^="https://"] {
    color: #f00;   /* 通过css3的属性选择器为HTTPS链接设置颜色 */
} 

通过上面的样式定义，我们可以针对已访问过的链接、用户点击链接时的样式、不同的打开方式、不同的链接地址等进行样式定义，从而更加灵活的控制页面链接的显示效果。