html使用css设置链接样式

82次阅读
没有评论

CSS可以通过设置链接的样式来实现链接的美化,例如修改链接的颜色、下划线等。

下面是一些常用的链接样式设置:

  1. 链接的颜色
a {
    color: blue; /* 设置链接的颜色为蓝色 */
}
  1. 去掉链接的下划线
a {
    text-decoration: none; /* 去掉链接的下划线 */
}
  1. 鼠标悬停在链接上时的样式
a:hover {
    text-decoration: underline; /* 鼠标悬停在链接上时添加下划线 */
}
  1. 设置链接的字体大小和粗细
a {
    font-size: 18px; /* 设置链接的字体大小为18像素 */
    font-weight: bold; /* 设置链接的字体粗细为粗体 */
}
  1. 设置链接的背景颜色和边框
a {
    background-color: #f1f1f1; /* 设置链接的背景颜色为灰色 */
    border: 1px solid black; /* 设置链接的边框为1像素的黑色实线 */
    padding: 10px; /* 设置链接的内边距为10像素 */
}

完整的HTML示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置链接的样式 */
        a {
            color: blue; /* 设置链接的颜色为蓝色 */
            text-decoration: none; /* 去掉链接的下划线 */
            font-size: 18px; /* 设置链接的字体大小为18像素 */
            font-weight: bold; /* 设置链接的字体粗细为粗体 */
            background-color: #f1f1f1; /* 设置链接的背景颜色为灰色 */
            border: 1px solid black; /* 设置链接的边框为1像素的黑色实线 */
            padding: 10px; /* 设置链接的内边距为10像素 */
        }

        /* 鼠标悬停在链接上时的样式 */
        a:hover {
            text-decoration: underline; /* 鼠标悬停在链接上时添加下划线 */
        }
    </style>
</head>
<body>
<a href="https://www.itshiye.com">这是一个链接</a>
</body>
</html>

 

 

正文完
 
评论(没有评论)