非零基础自学前端最后一遍 一 HTML+CSS 7 CSS属性-字体 7.6 font缩写属性的语法规则

末蓝、 2024-03-25 14:10 112阅读 0赞

非零基础自学前端最后一遍

文章目录

      • 非零基础自学前端最后一遍
      • 一 HTML+CSS
      • 7 CSS属性-字体
        • 7.6 font缩写属性的语法规则
          • 7.6.1 font

在这里插入图片描述

一 HTML+CSS

7 CSS属性-字体

7.6 font缩写属性的语法规则
7.6.1 font

  • font是一个缩写属性

    • font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
    • font-style font-variant font-weight font-size/line-height font-family

  • 规则:

    • font-style、font-variant、font-weight可以随意调换顺序，也可以省略
    • /line-height可以省略，如果不省略，必须跟在font-size后面
    • font-size、font-family不可以调换顺序，不可以省略

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  12.       /* 关于字体的属性 */
  13.       font-size: 30px;
  14.       font-weight: 700;
  15.       font-variant: small-caps;
  16.       font-style: italic;
  17.       font-family: serif;
  18.       line-height: 30px;
  19.     }
  20.   </style>
  21. </head>
  23. <body>
  24.   <div class="box">我是div元素</div>
  25. </body>
  27. </html>

渲染效果

在这里插入图片描述

使用缩写属性

在这里插入图片描述

效果一样

发表评论

表情：
评论列表 （有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读