10 文本属性-下划线、缩进、行高、对齐
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box1{
/*下划线*/
text-decoration: underline;
/*无下划线*/
text-decoration: none;
/*上划线*/
text-decoration: overline;
/*删除线*/
text-decoration: line-through;
}
/*缩进
px为绝对单位:默认16px=一个字体 除非自己设置比如大小20px 那就是20px=一个字体.
*/
.box2{
text-indent: 32px;
/*行高:设置默认16px,32px就是行高设置两倍,行高一定要大于字体大小,行高和盒子高度一样,文本内容就是垂直居中*/
line-height: 32px;
background-color: red;
/*中文文字间距设置*/
letter-spacing: 5px;
/*英文间距设置*/
word-spacing: 10px;
}
/*em为相对单位:也就是相对一个标签,单位的变化而变化,一个em=xpx*/
.box3{
text-indent: 2em;
font-size: 20px;
line-height: 40px;
}
div{
background-color: red;
/*对齐设置 left center right*/ 盒子里面文本排列方式
text-align:center;
}
/*综合属性*/
.box4{
/*单属性*/
font-family: 'Dubai','Arial';
font-size: 20px;
line-height: 60px;
/*综合属性代替上面代码*/
font:20px/3 'Dubai','Arial';
}
</style>
</head>
<body>
<p class="box1">小圆圈</p>
<p class="box2">
hello world,不到一年前,2019年8月,***在甘肃考察时,专程前往敦煌莫高窟。那一次,他鲜明地提出:“保护好我们的国粹”“讲好敦煌故事”“只有充满自信的文明才能在保持自己特色的同时包容、借鉴、吸收各种文明的优秀成果”。
</p>
<p class="box3">
2017年7月,鼓浪屿列入《世界遗产名录》后不久,***作出重要指示:“申遗是为了更好地保护利用,要总结成功经验,借鉴国际理念,健全长效机制,把老祖宗留下的文化遗产精心守护好,让历史文脉更好地传承下去。
</p>
<div>鼓浪屿列入《世界遗产名录》</div>
<p class="box4">老祖宗留下的文化遗产精心守护好</p>
</body>
</html>
<!-- 宽高的区别:
font-size:设置字体大小
width和height:设置文本内容的宽度和高度
line-height line-widht:设置行高,行高中文本内容默认垂直居中 -->