最近在做网页的设计实现，想对用到的CSS常见字段做个总结。
给元素添加下划线
- 元素是纯文本
text-decoration: underline; //给文本添加下划线
text-underline-offset: 2px;//设置文本和下划线的距离
- 元素包含文本和图片
border-bottom: 1px solid;
padding-bottom: 1px;//这个好像最小是0.5px 再小就不生效了
值得注意的是，当文本的长度不一时，仅这样处理会让短文本有过长的下划线。
显示如下。
加一个width: fix-content;就好了。
<div class="title" >
<img src="../1.png" alt="" class="starPic">
<span>文本文本</span>
</div>
<div class="title" >
<img src="../2.png" alt="" class="starPic">
<span>文本文本文本文本</span>
</div>
<style>
.title {
display: flex;
align-items: center;
border-bottom: 1px solid;
width: fix-content; //使block像inline-block那样实现收缩宽度包裹内容的效果
}
</style>
改进后的效果。
:disabled选择器的使用
很常用的应用方式是在分页组件中，当跳转到最后一页的时候，下一页的按钮会变成disabled的状态。假如我们需要修改其默认样式，就用到了:disabled这个选择器。
&:disabled {
css declarations;
}
同时，如果要区分分页组件中可选和不可选，分别修改样式，那么就需要用到:not(:disabled)这个选择器啦。
&:not(:disabled) {
border: 1px solid #000;
css declarations;
}
&:not(:disabled):hover {
border: 1px solid #E1251B;
css declarations;
}
鼠标移入切换图片的动画效果
先用background定义两张图片。
多个背景图会一层一层叠在一起，像是 Photoshop 里的图层。
先声明的图片会在上层，用户可以看到。
注意：background-size属性一定要放在backgroud属性后面。
.image {
background: url(../1.png) center top no-repeat,
url(../2.png) center bottom no-repeat;
background-size: 240px;
transition: background 0.5s;
}
.image:hover {
background: url(../2.png) center top no-repeat,
url(../1.png) center bottom no-repeat;
background-size: 240px;
}
去掉a标签的所有默认样式
a,a:link,a:visited,a:hover,a:active {
text-decoration: none;
color:inherit;
}
