CSS-文本与字体属性
2020-08-05 本文已影响0人
小驴拉磨
属性列表：
image.png
效果图：
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本字体属性</title>
<style type="text/css">
.mofa{
color: rgb(255,0,255);
text-decoration: overline;/*上划线*/
}
h2{
text-align: center;/*文本居中显示*/
text-decoration: underline;/*下划线*/
}
.lyl{
color: rgb(255,0,255);
text-decoration: line-through;/*删除线*/
}
u{
text-decoration: none;/*去掉文本修饰线*/
}
.cap{
text-transform: capitalize;/*首字母大写*/
}
.upper{
text-transform: uppercase;/*全部转换成大写*/
}
.lower{
text-transform: lowercase;/*全部转换成小写*/
}
p{
text-indent: 2em;/*首行缩进px是距离，一个em就表示一个汉字的位置*/
}
.spacing{
letter-spacing: 4px;/*字符间距*/
}
.wordS{
word-spacing: : 10px;/*单词间距*/
}
.lh{
/*行高的主要作用是用来设置文本的垂直方向居中对齐*/
height: 40px;
border: 1px solid #f00;
line-height: 40px;
}
</style>
</head>
<body>
<h2>全职法师</h2>
<p>紫色粗壮的雷电形成一个晴空中忽然间拍落下来的<span class="mofa">魔鬼爪印</span>，触目惊心。
那边冰公子<span class="lyl">柳一林</span>都来不及做一点心里准备，他哪里会想到对方的中阶魔法释放度会比他快了整整一倍！
他的星图才描画一半啊！
柳一林见势不妙，<u>急急忙忙使用了自己的盾魔具</u>，那是一块看上去宛如鱼翅展开的盾牌，上面分布着做工相当精致的鳞片，每一片鳞都反射着特殊的光彩。</p>
<div class="cap">We discovered that your app contains hidden features.</div>
<div class="upper">We discovered that your app contains hidden features.</div>
<div class="lower">WE DISCOVERED THAT YOUR APP CONTAINS HIDDEN FEATURES.</div>
<div class="spacing">WE DISCOVERED THAT YOUR APP CONTAINS HIDDEN FEATURES.</div>
<div class="wordS">We discovered that your app contains hidden features.</div>
<div class="lh">全职法师</div>
</body>
</html>
