网站首页 > 技术文章正文

「测试开发全栈-HTML」(11)css字体复合属性和小结

hmc789 2024-11-25 12:50:33 技术文章 2 ℃

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

一起来看下效果:

这里设定的整体样式为:

具体的代码为:

<!DOCTYPE html>

<head>

<title>CSS样式之复合属性和总结</title>

<style>

div {

font-style: italic;

font-weight: bold;

font-size: 16px;

font-family: "Microsoft YaHei";

}

</style>

</head>

<body>

<div>今天风真大，还需要去上课，我们一起去看看吧</div>

</body>

</html>

一个属性一行代码，为了节约，可以使用一行将所有属性都展示，具体语法为:

body {

font: font-style font-weight font-size/line-height font-family;

}

按照上面的语法规则，我们重新写下代码，看下效果:

对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS样式之复合属性和总结</title>

<style>

.font {

font-style: italic;

font-weight: bold;

font-size: 16px;

font-family: "Microsoft YaHei";

}

.font-new {

font: italic bold 16px "Microsoft YaHei";

}

</style>

</head>

<body>

<div class="font">今天风真大，还需要去上课，我们一起去看看吧</div>

<div class="font-new">都是你的错，轻易爱上我，让我不知不觉满足被爱的虚荣</div>

</body>

</html>

下面的代码就是按照规则新写的

.font-new {

font: italic bold 16px "Microsoft YaHei";

}

可以看到是可以使用的。复合属性，简写的要求

使用font属性时，必须按照语法格式中的顺序去书写，不能更换顺序，并且各个属性之间以空格隔开，最后需要有分号结尾。不需要设置的属性值可以忽略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。

我们来实验一下:

去掉font-style

斜体不展示了，正确

2.去掉font-weight

可以看到粗体没有了，剩余的显示正常

3.如果去掉font-size

发现不仅font-size没有起作用，所有的属性都没起作用

4.如果去掉font-family

同样也是都没有起作用

5.如果只有font-size和font-family

可以看到样式被修改了，这里为了方便查看，将16px修改为30px了

.font-new {

font: 30px "Microsoft YaHei";

}

接下来对字体属性做个总结：

font-size 字号单位是px像素，必须要加上单位

font-style 字体样式让字体倾斜是italic,正常显示是normal,一般用normal多

font-weight 字体粗细一般用数字来展示，如400是normal, 700是bold,不需要单位

font-family 字体按照约定来写字体，比如微软雅黑，宋体等

font 字体连写字体连写是有顺序的，不能随便更换顺序;其中字号和字体必须同时出现

好的，今天上午先到这里，下午我们再聊

网站首页 > 技术文章 正文

「测试开发全栈-HTML」(11)css字体复合属性和小结

猜你喜欢

网站首页 > 技术文章正文