9.文本样式
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>斗破苍穹故事简介</h1>
<p clas="p1">讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人,种种打击接踵而至。就在他即将绝望bai的时候,一缕灵魂从他手上的戒指里浮现,一扇全新的大门在面前开启,经过艰苦修炼最终成就辉煌的故事。
</p>
<p class="p2">这里是属于斗气的世界,没有花俏艳丽的魔法,有的,仅仅是繁衍到巅峰的斗气!
</p>
<p>
萧炎,主人公,萧家历史上空前绝后的斗气修炼天才。4岁就开始修炼斗之气,10岁拥有了九段斗之气,11岁突破十段斗之气,一跃成为家族百年来最年轻的斗者。然而在12岁那年,他却“丧失”了修炼能力,只拥有三段斗之气。整整三年时间,家族冷落,旁人轻视,被未婚妻退婚……种种打击接踵而至。
</p>
<p class="p3">喻亚文</p>
<p class="p4">喻亚文</p>
<p class="p5">喻亚文</p>
<a href="">喻亚文</a>
<p>
<img src="imag/a.png" alt="图片">
<span>123456</span>
</p>
</body>
</html>
css:
/*
1、color: blue rgb 0-F rgba a:0~1 透明度
2、text-align:排版 居中
3、text-indent: 2em; 段落首行缩进
background:yellow;背景颜色
height:300px;
line-height:300px;
行高 块高一致 就可以上下居中
text-decoration:underline 下划线
line-through 中划线
overline 上划线
a{
text-decoration: none; 去下划线
}
*/
h1{
color:rgba(0,255,255,0.1);
text-align: center;
}
.p1{
text-indent: 4em;
}
.p2{
background: yellow;
height: 120px;
line-height: 120px;
}
.p3{
text-decoration: underline;
}
.p4{
text-decoration: line-through;
}
.p5{
text-decoration: overline;
}
a{
text-decoration: none;
}
/*
水平对齐 ~ 参照物, a,b
*/
img,span{
vertical-align:center;
}
运行结果: