1、a标签的默认样式是什么？
在 HTML 中， a 标签代表着超链接，这是网页交互中使用最多的一种标签。在 CSS 中， a 标签有着默认的样式，比如说颜色、字体、下划线、背景等等。
a:link {
color: #007ACC; /* 设置链接的颜色为蓝色 */
text-decoration: underline; /* 给链接添加下划线 */
background-color: transparent; /* 背景为透明 */
}
a:hover,
a:active,
a:focus {
color: #ff0000; /* 鼠标悬浮的颜色 */
text-decoration: none; /* 移除下划线 */
background-color: transparent; /* 背景为透明 */
}
可以看到， a:link 为链接添加了蓝色、下划线，并且背景为透明。而当鼠标悬浮时， a:hover 、 a:active 、 a:focus 为链接设置了颜色、移除了下划线，并且背景也为透明。
2、去除a标签的默认样式
在 CSS 中，去除 a 标签的默认样式有很多种方法，这里介绍一些比较常用且简单的方法。
2.1、使用选择器
我们可以使用 a 标签的 class 或 id 选择器来设置样式。
a {
color: inherit; /* 继承父元素颜色 */
text-decoration: none; /* 移除下划线 */
}
这里设置 color 为继承父元素的颜色，移除下划线可以使链接看起来更加干净。
2.2、使用全局重置样式
在 CSS 引入时，可以使用重置样式来清除所有元素的默认样式，以达到清除 a 标签默认样式的效果。比较常用的重置样式有 normalize.css、reset.css。
/* 引入normalize.css */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
/* 引入重置样式 */
<link rel="stylesheet" href="reset.css">
2.3、使用 \ 标签
我们可以在页面的头部直接使用 \ 标签设置样式。
<head>
<style>
a {
color: inherit; /* 继承父元素颜色 */
text-decoration: none; /* 移除下划线 */
}
</style>
</head>
3、自定义a标签的样式
在不使用 a 标签默认样式的情况下，我们需要自定义链接的样式。
a {
color: #007ACC; /* 设置链接的颜色为蓝色 */
text-decoration: none; /* 移除下划线 */
}
a:hover,
a:active,
a:focus {
color: #ff0000; /* 鼠标悬浮的颜色 */
}
3.1、使用无序列表制作导航栏
我们可以使用无序列表 ul 和列表 li 来制作导航栏。
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
在这里我们将 ul 的 class 设置为 nav ，然后给 a 标签设置颜色和字体大小。
.nav {
list-style: none; /* 移除列表默认样式 */
display: flex; /* 弹性布局 */
justify-content: space-between; /* 均分空间 */
}
.nav li a {
color: #007ACC; /* 链接颜色为蓝色 */
font-size: 16px; /* 字体大小为16px */
}
.nav li a:hover {
color: #ff0000; /* 鼠标悬浮的颜色 */
}
3.2、使用CSS实现按钮点击效果
我们可以使用 CSS 来实现按钮的点击效果。
<button class="btn">点击</button>
.btn {
background-color: #007ACC; /* 按钮背景颜色 */
border: none; /* 移除边框 */
color: white; /* 字体颜色为白色 */
padding: 16px 32px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 移除下划线 */
display: inline-block; /* 行内块元素 */
font-size: 16px; /* 字体大小为16px */
margin: 20px 10px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 5px; /* 圆角 */
transition-duration: 0.4s; /* 过渡时间为0.4秒 */
}
.btn:hover {
background-color: #ff0000; /* 鼠标悬浮的背景颜色 */
color: white; /* 字体颜色为白色 */
border-radius: 5px; /* 圆角 */
}
可以看到，当鼠标悬浮在按钮上时，按钮的背景颜色会变成红色。
4、结语
通过以上几种方式，我们可以轻松地去除 a 标签的默认样式并自定义样式。
注意：在设置链接样式时，应根据具体的情况灵活选择。