MDN之Web 开发技术【CSS 参考】

悠悠 2021-07-04 11:40 438阅读 0赞

使用此CSS 参考页面以浏览按 字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及@ 规则。你也可以浏览 按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。

## 基本规则语法 ##

### 样式规则语法 ###

style-rule ::= selectors-list { 
          properties-list
        }

… 其中

selectors-list ::=
        selector[:pseudo-class] [::pseudo-element]
        [, selectors-list]
    
    properties-list ::= 
        [property : value] [; properties-list]

参阅后面的 selector、pseudo-element、pseudo-class 列表。每个指定值的语法取决于为每个指定属性定义的数据类型。

**样式规则示例**

strong { 
      color: red;
    }
    
    div.menu-bar li:hover > ul { 
      display: block;
    }

有关 CSS 选择器语法的初学者介绍，请参阅此教程。注意，规则定义中的任何 CSS 语法错误都将使整个规则无效。无效的规则将被浏览器忽略。注意CSS定义完全是基于文本(ASCII)的 , 而 DOM-CSS / CSSOM (规则管理系统) 是基于对象的。

### @规则语法 ###

由于@规则间的结构变化很大，请参阅@规则以找到你所想要的特定规则语法。

## 关键字索引 ##

> 注意：此索引中的属性名称不包括与CSS标准名称不同的 JavaScript 名称。  
> ![在这里插入图片描述][2020032213241883.png]

## 选择器 ##

### 基本选择器 ###

*  元素选择器 `elementname`(元素名称)
 *  类选择器 `.classname`(类名)
 *  ID 选择器 `#idname`(ID 名)
 *  通配选择器 `*, ns|*, *|*, |*`
 *  属性选择器 `[属性=值]`

### 组合选择器 ###

*  相邻兄弟选择器 `A + B`
 *  普通兄弟选择器 `A ~ B`
 *  子选择器 `A > B`
 *  后代选择器 `A B`

### 伪类 ###

![在这里插入图片描述][20200322132723181.png]

### 伪元素 ###

![在这里插入图片描述][20200322142006682.png]

## 概念 ##

### 语法和语义 ###

*  CSS 语法
 *  @ 规则
 *  层叠
 *  注释
 *  解释器
 *  继承
 *  简写属性
 *  优先级
 *  值定义语法
 *  CSS 单位与取值类型

### 值 ###

*  实际值
 *  计算值
 *  初始值
 *  解析值
 *  指定值
 *  使用值

### 布局 ###

*  块级格式化上下文
 *  盒式模型
 *  包含块
 *  布局模式
 *  外边距合并
 *  替换元素
 *  层叠上下文
 *  视觉格式化模型

## DOM-CSS / CSSOM ##

### 主要对象类型 ###

*  DocumentOrShadowRoot.styleSheets
 *  styleSheets\[i\].cssRules
 *  cssRules\[i\].cssText （选择器 & 样式）
 *  cssRules\[i\].selectorText
 *  HTMLElement.style
 *  HTMLElement.style.cssText（仅样式）
 *  Element.className
 *  Element.classList

### 重要方法 ###

*  CSSStyleSheet.insertRule()
 *  CSSStyleSheet.deleteRule()

[2020032213241883.png]: /images/20210704/31dfec7d0a7b4f1abda9e8306f32783a.png
[20200322132723181.png]: /images/20210704/c2aa9592e5c64fbeb1e3e706ad7702c6.png
[20200322142006682.png]: /images/20210704/1eb1d1105d4c4332a729535456d5d17c.png