CSS复合属性精简技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/java_996/article/details/121137620

本文介绍了CSS中字符复合属性的使用方法，通过一条语句即可设置多个字符属性，包括字体样式、字体粗细、字号、行高及字体族等。这种简写方式能有效减少代码量，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css字符复合属性的使用：

字符复合属性：简写的方式

当我们需要一起设置下面四个字符属性时，可以将其简写为一条语句

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

注意：顺序不可以跌倒

有些属性不需要设置时，可以省略不写，自动取默认值，但必须保留font-size 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>
        div {
        font-size: 16px;
        /* color: blue; */
        font-family: 'Microsoft yahei';
        font-weight: 700;
        font-style: italic;
            }

        p {
            <!--
            复合属性的使用  
            font: font-style font-weight font-size/line-height font-family;
            -->
            font: italic 700 16px/20px 'Microsoft';
        }

        #p {
            font: 16px '微软雅黑';
        }
</style>
</head>
<body>
    <div>三生三世，十里桃花</div>
    <p>待到秋来九月八，我花开后百花杀。冲天香阵透长安，满城尽带黄金甲。</p>
    <p>我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</p>
    <p id="p">我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</p>
</body>
</html>