font:综合设置字体样式(重点)
语法:
选择器 {font:font-style font-weight font-size/line-height font-family;}
说明:
1)使用font属性时,必须按上面语法的顺序书写,不能更换顺序,各个属性以空格隔开
2)注意:其中不需要设置的属性可以省略,取默认值,但必须保留font-size和font-family属性,否则将不起作用;
补充几个文本属性:
font-align:字体对齐
语法:{text-align:left/right/center/justify;}
说明:justify对内容以两端边界线对齐显示;
line-height:行高
语法:{line-height:normal/数值;}
说明:当单行文本的行高等于容器高时,可实现单行文本
在容器中垂直方向居中对齐;
当单行文本的行高小于容器高时,可实现单行文本在容器
中垂直中齐以上任意位置的定位;
当单行文本的行高大于容器高时,可实现单行文本在容器
中垂直中齐以下任意位置的定位;
text-decoration:文本修饰
语法:{text-decoration:
none/underline/overline/line-through;}
说明:
none:没有修饰;
underline:添加下划线;
overline:添加上划线;
line-through:添加删除线;
text-indent:首行缩进
语法:{text-indent:数值;}
说明:
text-indent可以取负值,可实现隐藏文本,悬挂缩进
text-indent属性只对第一行起作用,若第一行不是文本
则没变化;
注意:DIV是样式,不是文字,是不会生效的,要注意了
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h3 {
font: normal 400 16px "宋体";
}
h4{
font: italic 700 32px "微软雅黑";
}
p {
font-style: italic;
font-weight: 700;
font-size: 32px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h3>将H3变成:正常不加粗16px的宋体</h3>
<h4>将H4变在:倾斜加粗32px的微软雅黑</h4>
<p>分开写对比:倾斜加粗32px的微软雅黑</p>
</body>
</html>
效果如下: