CSS语法

前端
CSS
作者

yangjh

发布日期

October 30, 2021

语法声明

CSS 由一系列声明构成。语法声明分成两类：at 规则 (at-rules) 和 CSS 规则集 (rule sets)。声明之间可由空白字符连接。

规则集

规则集，也称规则，由选择符和跟随其后的声明块组成。声明块以“{”开始，以“}”结束，其中的声明以“;”分隔。声明由属性名称和属性值组成，属性名称和属性值之间用“:”连接。例如：

h1 { color: red; }
p { color: blue; }
em em {
 font-style: normal;
 text-align:center;
 }

at 规则

At 规则以“@”关键字开始，之后紧跟标志符。比如：“@import”。

“@import” 规则的作用是从其他样式表文件中导入样式格式。@import 关键字之后必须跟随要引入到当前文件中的样式表 URI 地址，不过也可以仅用字符串表示。例如：

@import "mystyle.css";

上述语法声明等同于：

@import url("mystyle.css");

都表示要引用 mystle.css 样式表。

注意：“@import”不能放在语法块中，也不能放在“@charset” 或者“@import”规则之后。

例如：

@import "subs.css";
h1 { color: blue }
@import "list.css";

上述代码中最后的@import 语句将被忽略。

媒体查询

除了“@import”之外，常用的@规则还有“@media”，“@media”表示为特定媒体（多个媒体之间可用逗号分隔）声明样式，即CSS提供的媒体查询功能，例如：

@media print {
    body { font-size: 10pt }
  }

表示当页面打印时字体为 10pt。

@media (max-width: 767px) {
    h4 {
        margin-top: 1em
    }
}

CSS 支持的媒体类型有：

  1. all 适合所有设备。
  2. braille 适合布莱叶盲文触摸设备。
  3. embossed 适合布莱叶盲文打印设备。
  4. handheld 适合小屏幕、带宽有限的手持设备。
  5. print 适合打印设备。
  6. projection 适合投影仪。
  7. screen 适合计算机显示屏幕。
  8. speech 适合语音阅读设备。
  9. tv 适合早期低分辨率的电视。

CSS 注释

在 CSS 中，注释以“/*”开始，以“*/”结束，注释之内的内容会被浏览器忽略。注释不能嵌套使用。

小结

  1. CSS 由一系列声明构成。语法声明分成两类：at 规则 (at-rules) 和 CSS 规则集 (rule sets)。声明之间可由空白字符连接。
  2. 规则集，也称规则，由选择符和跟随其后的声明块组成。声明块以“{”开始，以“}”结束，其中的声明以“;”分隔。
  3. 在 CSS 中，注释以“/*”开始，以“*/”结束，注释之内的内容会被浏览器忽略。注释不能嵌套使用。
回到顶部