在本教程中，学习了如何在html css中为锚点标签样式。
- 如何为锚点添加印刷品样式
- 在鼠标悬停处添加光标手
- 如何为锚点标签添加悬停的颜色
- 如何禁用锚点标签的样式
- 如何使链接成为一个按钮
- 如何设置锚点标签的焦点样式
- 如何在锚点标签上添加图片
html中的anchor标签用于从一个页面链接到另一个页面，或在同一页面中用部分链接进行导航。
Visit cloudhadoop.com!
这个标签会输出一个默认的underlink样式，并作为一个链接。
或anchor 标签可以使用以下选择器进行样式设计。href 属性对链接的url值很重要。
- 元素选择器
- id选择器
- 类选择器
在本教程中，我们使用的是id 选择器，你可以使用任何选择器，但样式对于应用于锚点标签是很重要的。
样式可以通过以下两种方法来应用
- 使用css全局选择器
- 用style属性定义的内联样式
记住，用style属性定义的内联样式会覆盖css选择器。
下面是一个添加inline styles ，改变颜色、字体和粗体的例子。
Visit cloudhadoop.com!
如何用css改变anchor标签的颜色和字体家族？
锚点标签是用id=link1声明的。
Visit cloudhadoop.com!
如何应用颜色为蓝色，改变字体家族和字体重量为粗体？
在css选择器中使用#id选择器
#link1{
font-family:Monospace
font-size:30px;
color:blue;
font-weight:600;
}
如何在鼠标悬停时改变锚点标签的颜色和样式？
让我们声明一下锚标签
Link3
下面的样式解释了以下内容
- 默认的锚点颜色是蓝色
- 在锚点悬停时改变颜色为红色
#link3{
color:green;
}
#link3:hover{
color:red;
}
如何在悬停的anchor标签上添加手形光标
锚标签可以在鼠标或键盘悬停时改变光标指针的样式。
CSScursor 属性与pointer 的值用于改变:hover 的选择器上。
如何禁用anchor标签元素？
Disable 锚点标签不能被点击，颜色应该是灰色。一种方法是。
- pointer-events:none，禁用鼠标悬停，允许键盘悬停。
- cursor: not-allowed允许禁用键盘悬停事件。
pointer-events: none;
cursor: not-allowed;
另一种方法是使用浅灰色和cursor 。not-allowed
.disable {
color: #9999;
cursor: not-allowed;
text-decoration: underline;
}
``链接4
## How to style anchor link same as button
Sometimes, you want to use anchor link but need to look like a button.
It is possible with CSS width and height attribures and make text-decoration to none
Here are css styles link button
```css
#link5{
display: block;
width: 100px;
height: 20px;
background: #4285f4 !important;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 20px;
text-decoration:none
}
Html锚点链接
Link5
如何在锚点标签中添加图片
html图像使用img标签显示。img 标签被包裹在anchor标签中，如下所示
假设你想为锚点链接添加图片作为背景
你需要使用带有url值的background-image添加display:block的宽度和高度。
#link6{
display: block;
width: 50px;
height: 50px;
Background-image: url("https://www.cloudhadoop.com/assets/img/logo-1.png.png");
}
如何为锚点标签设置焦点样式
你可以使用focus active和hover伪选择器。
#link7:focus{
color: pink;
}
#link7:active,
#link7:hover {
color: pink;
}
如何删除锚点标签的蓝色下链
text-decoration:none可以去除锚点链接的下划线 下面是一个例子
Link8
#link8{text-decoration: none !important;}
在DIV或SPAN标签内的锚定标签
锚链接可以在任何html或自定义标签内声明
这是一个有效的声明
link
or
link
链接样式可以通过锚标签或css父选择器应用，如下所示。
下面的选择器会选择class=links下的所有锚点子元素
下面的选择器可以选择所有的锚点元素
代码示例
这个例子是为导航栏创建自定义类的代码
