font:综合设置字体样式(重点)

最新推荐文章于 2023-05-23 17:25:50 发布

纯情小码哥

最新推荐文章于 2023-05-23 17:25:50 发布

阅读量2.8k

点赞数

分类专栏： CSS 文章标签： font:综合设置字体样式(重点)

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/101934128

版权

CSS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

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>

效果如下：

纯情小码哥

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
font:综合设置字体样式(重点)

font:综合设置字体样式(重点)语法:选择器 {font:font-style font-weight font-size/line-height font-family;}说明:1)使用font属性时,必须按上面语法的顺序书写,不能更换顺序,各个属性以空格隔开2)注意:其中不需要设置的属性可以省略,取默认值,但必须保留font-size和font-family属性,否则将不起作用;...
复制链接

扫一扫