CSS给link加style的最佳实践
1. Link states 链接状态， 通过伪类psudo-classes来实现多个link states
:link/:visited/:hover/:focus/:active
2.链接的默认样式： Default styles for links.
:link/:visited/:hover/:focus/:active
2.链接的默认样式： Default styles for links.
- Links are underlined.
- Unvisited links are blue.
- Visited links are purple.
- Hovering a link makes the mouse pointer change to a little hand icon.
- Focused links have an outline around them -- you should be able to focus on the links on this page with the keyboard by pressing the tab key(on Mac ,you'll need to use option + tab , or enable the Full Keyboard Access: All controls option by pressing Ctrl + F7)
- Active links are red (Try holding down the mouse button on the links as you click it)
在修改Link的时候，要保证哪些基本的样式：
1. 使用下划线，或者其它显著的样式。
2. hovered、focused、activated 的状态给一些不同的样式
3. cursor：光标的样式要保留。
4.outline 是在背景的上层，不占用空间，他可以增加可访问性，关闭前请
link的样式声明的顺序： Love fear Hate （ l, a, f, h, a) 这个顺序很重要，每个都是之前的基础上的，比如如果是active（鼠标按下和松开之间的时间），那之前一定是有hover，如果你的顺序不对，可能效果会和你想的不一样。
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}boder-bottom 和 text-decoration:underline
border-bottom: 1px solid;
text-decoration: underline;
border-bottom比text-decoration要好， 因为border-bottom要低一点，不会截断g和y， 另外不设置border的颜色，它可以继承使用字体的颜色。
给链接link加上图标 ，图标来之icon8 For this example, we'll use this great example from icons8.com.
a[href*="http"] {
background: url('external-link-52.png') no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}
阅读量: 455
发布于:
修改于:
发布于:
修改于: