前端二向箔06-CSS语法本章开始复盘CSS系列的核心知识 . CSS并不像HTML或者JS那样有丰富的标准体系. 更多

06 CSS语法

前端二向箔05-HTML表格表单和ARIA

本章开始复盘CSS系列的核心知识 .

CSS并不像HTML或者JS那样有丰富的标准体系. 更多的是零散的草案和一些阅读性不高的文档规范. 所以复盘CSS更多将从概念和实践结合以达到成体系地复盘地目的.

CSS的实践和奇技淫巧太多了, 这里知识做个大概的知识复盘, 将一些学习中遗漏或者非常重要的内容囊括.

CSS syntax

CSS语法分为: ruleset && statement

Ruleset

CSS规则ruleset的语法非常简单, CSS主体便是下图所示的块构成. 许多人初学的时候根本没有在意CSS的语法, 但这里还是要强调下基础概念:

CSS--层叠样式表, 其中层叠便是规则ruleset的叠加结果:

一个元素可能被多个选择器选中，因此会有多个规则，有可能以不同的值去设置同一属性。CSS标准会规定哪个优先级最高并生效, 称之为层叠（cascade) 算法。

CSS声明declaration, 由属性键值对组成. 其中特别要注意的是

以--开头的属性为CSS变量. 如--background-color; 使用CSS函数var()进行引用.
CSS函数作为属性值. 如计算类函数: calc()--计算数学表达式; max(); min(); clamp()--限定值内取值, 超过界限取极值 ; toggle()--可以切换给定的值; attr()--接受属性值 .

这两个特性让CSS可以完成更加复杂的功能.

这里有个CSS函数指南, 基本涵盖了日常使用的函数, A Complete Guide to CSS Functions🔗.

函数使得CSS有更多的可玩性, attr配合CSS变量更有奇技淫巧, 见张鑫旭-Polyfill吊炸天的CSS attr()新语法🔗.

Statement

CSS语句statement的语法, 语句实际上是规则的超集, 它包括了规则. 有时候网页的作者也希望在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。

其中, 最重要的就是at-rules:

at规则（at-rules）。以@ (U+0040 COMMERCIAL AT) 开始，随后是标识符，一直到以分号或右大括号结束。每个at规则由其标识符定义，可能有它自己的语法。at规则涵盖了:

meta信息（比如 @charset @import).

条件信息（比如@media @document).

描述信息（比如@font-face).

这里我们便可以将CSS拆分成规则ruleset和@语句@rules进行理解. 对应重点就是选择器和常用@语句. 你会发现, CSS基本就是围绕选择器为主体, @规则为指令进行展开.

本篇重点在于梳理基础路线, 所以不会有太深入的分析, 主要是对选择器和@规则的语法简要叙述.

选择器

选择器是规则ruleset的标识, 它指定谁会被应用上此处的规则.

而这个标识, 由三个最主要的选择器和其他辅助的选择器决定:

选择器类型	优先级	举例
id	1	#foo{}
class	2	.foo{}
tag	3	body{}
内联样式( style属性 )	0	<p style="color: red">
!important 属性	∞	直接作用在最终表现结果上.
data-属性	2	[data-name="foo"]{}
伪类选择器	2	:nth-child[0]

最重要的, 就是各种选择器的组合形成的复杂选择器, 通过选择器连接符进行连接各个选择器:

进而有优先级的计算问题. 限于篇幅与下篇讲解.

@规则

@-rule就是执行指令, 具体行为由@之后的关键字决定. 建议未接触过的读者在阅读完本篇后参考MDN的系列@规则教程.

我们可以将@-rule分为两类:

Regular Rules ( 常规规则 ): 采用声明式的语句, 即@[KEYWORD] (RULE)

Nested Rules ( 嵌套规则 ): 采用嵌套语句块的形似, 即@[KEYWORD] { /*Nested statemts*/ }

常规规则

@charset: 定义样式表使用的字符集编码

@charset "UTF-8"

这里有严格的格式要求:

@charset "UTF-8";
@charset "utf-8"; /*大小写不敏感*/

/* 设置css的编码格式为Unicode UTF-8 */
@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
@charset  "UTF-8";      /* 无效的, 多于一个空格 */
 @charset "UTF-8";      /* 无效的, 在at-rule之前多了一个空格 */
@charset UTF-8;         /* 没有引号 */

还有, 当http头被指定字符集时, 此处会失效. 如meta中设定.

@import: 导入css文件.
```
@import 'global.css';
/* 格式: @import '路径'*/
```
要注意的是, 一些预处理器如SCSS, Less所支持的@import, 与原生的@import不同, 原生的会产生独立的http请求. 这是部分前端性能优化中提及的为什么不建议使用@import.
@namepscape: 命名空间, 主要用于xhtml可以作为标识.

命名空间(namespace)可以让XML文档可能包括来自多个XML词汇表的元素或属性彼此间没有冲突。

在XML HTML( xhtml) 中, 常见如下的写法:
```
<html xmlns="http://www.w3.org/1999/xhtml">
```
在CSS中:
```
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
svg|a { color: darkslategray; fill: currentColor; }
a{color:blue;}
```
浏览器不是使用或处理这个URL。当某个人阅读这里的文档代码的时候可以轻松理解命名空间所指. 具体使用可以参考张鑫旭使用CSS namespace进行分隔🔗.

嵌套规则

@media: 媒体查询, 满足媒体查询条件则规则生效.

经常使用的情景就是进行屏幕大小\样式的控制
```
@media <media-query-list> {
  <group-rule-body>
}
```
此外, 还可以利用@media来调整页面样式进行打印输出. 见网页打印格式引入方式

更详细的使用和语法参见MDN 使用媒体查询, 简洁明了.
@page: 页面打印样式控制.

这个规则用于打印页面时进行一些样式的控制, 但是相比@media的print特性, 可以调整的较少, 主要是和页面距离相关的控制.

主要应用与对有多页面文档的打印, 进行简单的调整. 比如
- margin调节;
- 打印相关的orphans, widows;
- 伪类控制, 包括：:blank, :first, :left, :right.
如下为控制第一页的打印格式:
```
@page :first{
	/*style here*/
}
```

@font-face: 加载自定义字体

 @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
 body { font-family: "Bitstream Vera Serif Bold", serif }

详细使用可见网络博博客, 或者MDN@font-face, 不再赘述.

@keyframes: CSS3动画关键帧设置.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

涉及到CSS动画专题, 此处做简单提及.

@supports: 检查浏览器对CSS属性的支持结果

/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}

/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

@document: 文档级别的媒体查询

当满足@document给定的条件, 可以使指定页面调用特定样式. 不过目前被归化在CSS4中, 只有Firefox支持.

@document 
  /* 页面URL需要是 */
  url(http://www.zhangxinxu.com/),
  
  /* 页面URL的开头必须是... */
  url-prefix(www.zhangxinxu.com/wordpress/),
  
  /* 该域上的所有页面 */
  domain(zhangxinxu.com),

  /* 所有https协议页面 */
  regexp("https:.*")
{
  
  /* 开始样式 */
  body { font-family: Comic Sans; }

}

前端二向箔07-css选择器

参考引用

@规则 - CSS（层叠样式表） | MDN. (2019). Retrieved 3 March 2021, from developer.mozilla.org/zh-CN/docs/…
The At-Rules of CSS | CSS-Tricks. (2015). Retrieved 3 March 2021, from css-tricks.com/the-at-rule…
CSS Basics: The Syntax That Matters & The Syntax That Doesn't | CSS-Tricks. (2018). Retrieved 3 March 2021, from css-tricks.com/css-basics-…
语法 - CSS（层叠样式表） | MDN. (2020). Retrieved 3 March 2021, from developer.mozilla.org/zh-CN/docs/…
A Complete Guide to CSS Functions | CSS-Tricks. (2020). Retrieved 3 March 2021, from css-tricks.com/complete-gu…
张鑫旭, z. (2021). Polyfill吊炸天的CSS attr()新语法 « 张鑫旭-鑫空间-鑫生活. Retrieved 3 March 2021, from www.zhangxinxu.com/wordpress/2…

前端二向箔06-CSS语法