一. text-decoration(常用)
取值:
- none:无样式,常用语去除a标签的默认下划线
- overline:上划线
- line-through:删除线
- underline:下划线,a标签默认添加了该样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: #551a8b;
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.linethrough {
text-decoration: line-through;
}
.del {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">a元素默认是添加了text-decoration:underline的</a>
<span>span也可以实现a的效果</span>
<p class="overline">添加上划线</p>
<p class="linethrough">添加删除线</p>
<a href="#" class="del">去掉a的默认下划线</a>
</body>
</html>
二. text-transform(一般)
用于设置文字的大小写转换
text-transform有几个常见的值:
capitalize:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
uppercase:(大写字母)将每个单词的所有字符变为大写
lowercase:(小写字母)将每个单词的所有字符变为小写
none:没有任何影响
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
</style>
</head>
<body>
<!-- capitalize: 将每个单词的首字符变为大写 -->
<div class="capitalize">Your english must be very good</div>
<!-- uppercase: 将每个字母都变大写 -->
<div class="uppercase">Your english must be very good</div>
<!-- lowercase:将所有字母都变成小写 -->
<div class="lowercase">YOUR ENGLISH MUST BE VERY GOOD</div>
</body>
</html>