<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style>
.cx {
/*border √ boder X*/
/*文本对齐方式 left center right*/
/*text-align: center;*/
/*有无下划线 none underline*/
text-decoration: underline;
/*行高 顶线 中线 基线 底线*/
line-height: 50px;
background-color: pink;
}
p {
/*文本首行缩进*/
text-indent: 32px;
}
span {
/*定义只有大写字母*/
/*text-transform: uppercase;*/
/*定义只有小写字母*/
/*text-transform: lowercase;*/
/*定义每个单词仅首字母大写*/
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="cx">
<h1>春晓</h1>
<p><span>meng haO raN</span></p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p style="text-indent: 2em">夜来风雨声，花落知多少。</p>
</div>
</body>
</html>上述运行结果：
Tips：CSS line-height属性：
line-height属性用于设置行间的距离（行高），可以控制文本行与行之间的距离。
其实行高（行间距）实质上是通过上间距，下间距来控制的，而不是文本的高度(文字的上边缘到下边缘的距离 )。
假如文字的像素是 16px,行高设置的越大时，文字的像素始终不变，改变的是文字的上下间距。
假如行高是26px,那么上下间距各5px,即增加行高，只会增加上下间距。
小技巧：多行文字的行高其实就是该行文字的下边缘到下一行文字的下边缘
注意：我们在设置文字的水平居中时，用text-align属性，垂直居中时，用line-height。但是line-height的设置需要与height保持相同，行高与高相同时，才能使其垂直居中
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
