如上图所示,就是文本的属性啊,接下来一一为大家仔细讲解。会有代码展示的呢,亲。
font-size:设置字体的大小,单位是px,图上面也说了默认16px.
font-family:是设置字体啊,比如宋体啊,微软雅黑啊,如果要使用多个字体,中间用逗号连接
color:设置颜色,大家应该都会啊
font-weight:加粗字体,取值范围100-900,常用100(lighter),400(normal),700(bolder)
font-style:倾斜啊,italic(斜体字),oblique(倾斜的文字),normal(正常)
text-align:left(左对齐),right(右对齐),centre(居中),justify(水平两端对齐)
word-spacing:设置英文单词的间距
line-height:设置文字行高,把行高设置到高度有惊喜哦
text-indent:首行缩进,只对第一行有作用,建议设置成2em
letter-spacing:设置汉字字间距
text-transform:capitalize(字母首字母大写),lowercase(全部小写),uppercase(全部大写);
font使用顺序:font-style->font-weight->font-size/font-height->font-family.
案例:
<!DOCTYPE html>
<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>案例</title>
<style>
.al{
width: 200px;
height:50px;
font-size:16px;
background-color: aqua;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:rgb(55,66,77);
font-weight:bold;
text-align:center;
line-height:50px;
}
#1{
text-indent: 2em;
text-align:justify;
}
.sp{
font-weight: bolder;
color:chartreuse;
}
</style>
</head>
<body>
<div class = al>案例</div>
<p id = 1>从前有座山,山上有座庙,<span class = sp>庙里有两个和尚</span>,老和尚再和小和尚讲故事</p>
</body>
</html>