recursal/MDN huggingface dataset:
::first-letter (:first-letter)
==============================

CSS 伪元素 `::first-letter`会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
```

/* Selects the first letter of a <p> */
p::first-letter {
  font-size: 130%;
}
```


元素首字符并不总是很容易识别：

* 首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何 Unicode 字符以及其他种类的标点符号（Po）。
* 另外还会有一些以大写双字母组合命名的语言，比如荷兰的 `IJ`. 在这种罕见情况下，两个大写字母都理应被 `::first-letter` 伪元素匹配到。(但是浏览器对此支持得很糟糕，可以用浏览器兼容性表格进行核实).
* `::before` 伪元素 和 `content` 属性结合起来有可能会在元素前面注入一些文本。如此，`::first-letter` 将会匹配到 content 文本的首字母。

首行只在 block-container box内部才有意义，因此 `::first-letter` 伪元素 只在`display`属性值为 block, `inline-block`, `table-cell`, `list-item` 或者 `table-caption`的元素上才起作用。其他情况下，`::first-letter` 毫无意义。

允许的属性值
------

只有一小部分 CSS 可以在包含使用了`::first-letter` 伪元素选择器的 CSS 规则集声明块内运用：

* 所有的字体属性 : `font`, `font-style`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-stretch`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian` (en-US), `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `font-size`, `font-size-adjust`, `line-height` 以及 `font-family`.
* 所有的背景属性 : `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`以及 `background-blend-mode`.
* 所有的外边距属性：`margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
* 所有的内边距属性：`padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
* 所有的边框属性：比如一些简短的边框属性 `border`, `border-style`, `border-color`, `border-width`, `border-radius`, `border-image`, 还剩下许多冗长的边框属性等等。
* `color` 属性。
* `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing`, `word-spacing` (使用恰当的话), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` `注意此刻必须没有浮动`) 等属性。

当这个列表以后被实现时，为了保持 css 不过时。建议你不要在声明块内使用任何其他属性。

**备注：** 对于 CSS 2，伪元素采用单冒号前缀语法。因为伪类也是同样的语法，所以使得两者难以区分。CSS2.1 改变了伪元素的前缀语法可以解决这个问题。现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀。

CSS2 伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法。

考虑浏览器兼容性的话，`:first-letter` 是一个更有效的选择; 否则，`::first-letter` 更受欢迎。

示例
--


```css
/\* 使每段开头的第一个字母变红变大 \*/

p::first-letter {
  /\* 使用:first 来兼容 IE8- \*/
  color: red;
  font-size: 130%;
}
```

规范
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `::first-line` 伪元素。
@import
=======

概述
--

**`@import`** CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，`@charset` 规则除外; 因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的 @import 规则。这些条件导入在 URI 之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

语法
--
```

@import url;
@import url list-of-media-queries;
```


其中：

*url*

是一个表示要引入资源位置的 `<string>` 或者 `<uri>()` (en-US) 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件；可以只指明包名，然后合适的文件会被自动选择 (e.g. **chrome://communicator/skin/**). See here 了解更多。

*list-of-media-queries*

是一个逗号分隔的 媒体查询 条件列表，决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指明的 CSS 文件。

正规语法
----
```

@import =   
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;    
  
<url> =   
  <url()>  |  
  <src()>    
  
<layer-name> =   
  <ident> (en-US) [ '.' <ident> (en-US) ]\*    
  
<import-conditions> =   
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
<supports-condition> =   
  not <supports-in-parens>                            |  
  <supports-in-parens> [ and <supports-in-parens> ]\*  |  
  <supports-in-parens> [ or <supports-in-parens> ]\*     
  
<supports-in-parens> =   
  ( <supports-condition> )  |  
  <supports-feature>        |  
  <general-enclosed>          
  
<supports-feature> =   
  <supports-decl>    
  
<general-enclosed> =   
  [ <function-token> <any-value>? ) ]  |  
  [ ( <any-value>? ) ]                   
  
<supports-decl> =   
  ( <declaration> )    
  
```

示例
--


```css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);
```

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scroll-padding-left
===================

**`scroll-padding-left`** 属性定义了滚动口的*最优视区*——用于在用户视野中放置内容的目标区域——的左内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

尝试一下
----

语法
--


```css
/\* 关键字值 \*/
scroll-padding-left: auto;

/\* <length> 值 \*/
scroll-padding-left: 10px;
scroll-padding-left: 1em;
scroll-padding-left: 10%;

/\* 全局值 \*/
scroll-padding-left: inherit;
scroll-padding-left: initial;
scroll-padding-left: revert;
scroll-padding-left: revert-layer;
scroll-padding-left: unset;
```

### 取值

`<length-percentage>`

滚动口的左内边距，为有效的长度或百分比。

`auto`

此内边距由用户代理所决定。此值通常为 `0px`，但用户代理可检测非零值是否更合理并另行处理。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scroll containers |
| 是否是继承属性 | 否 |
| Percentages | relative to the scroll container's scrollport |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

scroll-padding-left =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
text-align-last
===============

CSS 属性 **`text-align-last`** 指定一行或者块中的最后一行在被强制换行之前的对齐规则。

语法
--


```css
/\* 关键字值 \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/\* 全局值 \*/
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;
```


|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

### 值

`auto`

受影响的行会根据 `text-align` 的值来对齐，除非 `text-align` 的值是 `justify`，在这种情况下，其效果等同于将 `text-align-last` 的值设置为 `start`。

`start`

如果内容方向是左至右，则等于 `left`，反之则为 `right`。

`end`

如果内容方向是左至右，则等于 `right`，反之则为 `left`。

`left`

行内内容对齐到行框的左边缘。

`right`

行内内容对齐到行框的右边缘。

`center`

行内内容在行框中居中。

`justify`

最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。

### 形式语法
```

text-align-last =   
  auto          |  
  start         |  
  end           |  
  left          |  
  right         |  
  center        |  
  justify       |  
  match-parent    
  
```

示例
--

### 对齐最后一行
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```



```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```

规范
--

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `text-align`
border-block-end-style
======================

CSS 属性 **`border-block-end-style`** 定义了元素的逻辑块末的边框线型，并根据元素的书写模式、行内方向和文本朝向对应至实体边框线型。根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `border-top-style`、`border-right-style`、`border-bottom-style` 或 `border-left-style` 属性。

尝试一下
----

语法
--


```css
/\* 边框线型值 \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

/\* 全局值 \*/
border-block-end-style: inherit;
border-block-end-style: initial;
border-block-end-style: revert;
border-block-end-style: revert-layer;
border-block-end-style: unset;
```


与此相关的属性有 `border-block-start-style`、`border-inline-start-style` 和 `border-inline-end-style`，这些属性定义了元素其他边框的线型。

### 取值

`<'border-style'>`

边框线型。见 `border-style`。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | discrete |

形式语法
----
```

border-block-end-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

示例
--

### 竖排文本的虚线边框

#### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 逻辑属性与逻辑值
* 此属性对应的实体边框属性：`border-top-style`、`border-right-style`、`border-bottom-style` 和 `border-left-style`
* `writing-mode`、`direction`、`text-orientation`
clip
====

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概述
--

`clip` 属性定义了元素的哪一部分是可见的。`clip` 属性只适用于 `position:absolute` 的元素。

**警告：** 这个属性已被废弃。建议使用 `clip-path` 。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | absolutely positioned elements |
| 是否是继承属性 | 否 |
| 计算值 | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a rectangle |

语法
--

形式语法: 
```

clip =   
  <rect()>  |  
  auto        
  
<rect()> =   
  rect( <top> , <right> , <bottom> , <left> )    
  
```


```
clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit
```

### 值

`<shape>`

一个矩形 `<shape>` (en-US)


```css
rect(<top>, <right>, <bottom>, <left>)   /\* 标准语法 \*/
```


或


```css
rect(<top> <right> <bottom> <left>)      /\* 向后兼容语法 \*/
```


`<top>` 和 `<bottom>` 指定相对于盒子*上边框边界* 的偏移，`<right>` 和 `<left>` 指定了相对于盒子*左边框边界* 的偏移。
 `<top>`、`<right>`、`<bottom>` 和 `<left>` 的值可以是 `<length>` 值或 `auto`。


`auto`

元素不裁剪 (默认值)

示例
--

### 裁剪图像

#### HTML


```html
<p class="dotted-border">
  <img src="macarons.png" title="Original graphic" />
  <img id="top-left" src="macarons.png" title="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" title="Graphic clipped towards middle" />
  <img
 id="bottom-right"
 src="macarons.png"
 title="Graphic clipped to bottom right" />
</p>
```


#### CSS


```css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Related CSS properties: `text-overflow`, `white-space`, `overflow-x`, `overflow-y`, `overflow`, `display`, `position`
font-style
==========

**`font-style`** CSS 属性允许你选择 `font-family` 字体下的 `italic` 或 `oblique` 样式。

尝试一下
----

**Italic** 字体一般是现实生活中的草书，相比无样式的字体，通常会占用较少的水平空间，而 **oblique** 字体一般只是常规字形的倾斜版本。如果当前字体没有对应的斜体，那么斜体（italic）和倾斜体（oblique）都会通过人工倾斜常规字体的字形来模拟（使用 `font-synthesis` 对此进行控制）。

语法
--


```css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/\* Global values \*/
font-style: inherit;
font-style: initial;
font-style: unset;
```


`font-style` 属性被指定为从下面的取值列表中的单独一个关键字，如果关键字是 `oblique`，则可附加一个可选的角度。

### 值

`normal`

选择 `font-family` 的常规字体。

`italic`

选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（`oblique` ）替代。

`oblique`

选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（`italic` ）替代。If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of `-90deg` to `90deg` inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

### 可变字体

可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度。You can select this using the `<angle>` modifier for the `oblique` keyword.

For TrueType or OpenType variable fonts, the `"slnt"` variation is used to implement varying slant angles for oblique, and the `"ital"` variation with a value of 1 is used to implement italic values. See `font-variation-settings`.

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an `<angle>`.

无障碍问题
-----

Large sections of text set with a `font-style` value of `italic` may be difficult for people with cognitive concerns such as Dyslexia to read.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* W3C Understanding WCAG 2.1
形式定义
----

|  |  |
| --- | --- |
| 初始值 | `normal` |
| 适用元素 | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | by computed value type; `normal` animates as `oblique 0deg` |

形式语法
----
```

font-style =   
  normal                           |  
  italic                           |  
  oblique <angle [-90deg,90deg]>?    
  
```

示例
--

### 字体样式

示例展示了不同的 `font-style` 值。CSS 看起来像这样：
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```



```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `font-family`
* `font-weight`
* 基本文本和字体样式
padding-block-end
=================

CSS 属性 **`padding-block-end`** 定义了元素的逻辑块末内边距，并根据元素的书写模式、行内方向和文本朝向对应至实体内边距。

尝试一下
----

语法
--


```css
/\* <length> 值 \*/
padding-block-end: 10px; /\* 绝对长度 \*/
padding-block-end: 1em; /\* 相对于文本尺寸的长度 \*/

/\* <percentage> 值 \*/
padding-block-end: 5%; /\* 相对于包含区块宽度的内边距 \*/

/\* 全局值 \*/
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: revert;
padding-block-end: revert-layer;
padding-block-end: unset;
```

### 取值

`<length>`

以固定值指定的内边距尺寸。必须非负。

`<percentage>`

以百分比指定的内边距尺寸，参照包含区块的行向尺寸（即横向语言中的*宽度*，由 `writing-mode` 所定义）。必须非负。

描述
--

虽然规范定义 `padding-block-end` 属性的取值与 `padding-top` 属性相同，但是此属性所对应的实体属性取决于 `writing-mode`、`direction` 和 `text-orientation` 所设置的值。因此这一属性可能对应于 `padding-bottom`、`padding-right` 或 `padding-left`。

与此相关的属性有 `padding-block-start`、`padding-inline-start` 和 `padding-inline-end`，这些属性定义了元素的其他内边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `0` |
| 适用元素 | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| 是否是继承属性 | 否 |
| Percentages | logical-width of containing block |
| 计算值 | as `length` |
| Animation type | a length |

形式语法
----
```

padding-block-end =   
  <'padding-top'>    
  
```

示例
--

### 为竖排文本设置块末内边距

#### HTML


```html
<div>
  <p class="exampleText">示例文本</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`
* `writing-mode`、`direction`、`text-orientation`
background-position-y
=====================

摘要
--

**`background-position-y`** 属性用于设置初始状态时背景图片在垂直方向上的位置，这个位置相对于通过 `background-origin` 定义的背景层的原点进行定位。需要获得更多的信息可以查看`background-position` 属性，这个属性已经得到了长久且广泛的支持。

**备注：** `background-position-y` 设定的值会被 `background` 或者是 `background-position` 的简写属性的`background-position-x`后面的值所覆盖。


```css
/\* Keyword values \*/
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/\* <percentage> values \*/
background-position-y: 25%;

/\* <length> values \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* side-relative values \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Multiple values \*/
background-position-y: 0px, center;

/\* Global values \*/
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;
```


|  |  |
| --- | --- |
| 初始值 | `0%` |
| 适用元素 | all elements. It also applies to `::first-letter` and `::first-line`. |
| 是否是继承属性 | 否 |
| Percentages | refer to height of background positioning area minus height of background image |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | a repeatable list |

语法
--

### 合法值

`top`

将背景图片的上边界与背景位置层的上边界对齐。

`center`

将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐。

`bottom`

将背景图片的下边界与背景位置层的下边界对齐。

`<length>`

通过`<length>` 直接设定具体的数值，该数值定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移量，默认情况下是 padding-box.

`<percentage>`

通过`<percentage>` 百分比的设置，该百分比定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移百分比，从而得到偏移量，该偏移量的计算方法是:(当前背景层的高 - 背景图片的高) \* 百分比，高度差和百分比都保留符号，例如 (100px - 200px) \* (-10%) = 10px 那么偏移量就是正的 10px(向下为正方向),默认情况下是 padding-box.

### Formal syntax
```

background-position-y =   
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* `background-position`
* `background-position-x`
* `background-position-inline`
* `background-position-block`
* Multiple backgrounds (en-US)
<custom-ident>
==============

**`<custom-ident>`** 指用户自定义字符串标识符。一种CSS 数据类型；要区分大小写，值不能有任何歧义。

语法
--

`<custom-ident>` 语法同 CSS 属性名相似，但它是区分大小写的。可以由以下字符组成：

* 字母 (`A` - `Z`, `a` - `z`),
* 十进制数 (`0` - `9`),
* 连字符 (`-`),
* 下划线 (`_`),
* 转义字符 ( `\`),
* Unicode 编码（格式：转义字符（`\`）后跟 1 到 6 位十六进制数）

注意：`id1`, `Id1`, `iD1`和`ID1`都是不同标识符，因为标识符是区分大小写的。另一方面，因为可以解码，所以 `toto\?` 和 `toto\3F` 是相同的。

### 禁用值

`<custom-ident>` 不能用单引号或双引号包起来。此外，第一个字符不能为数字，字符串开头不能是连字符 (`-`) 后跟数字或连字符。

为避免歧义，各个属性对应的`<custom-ident>` 禁止使用以下特殊值：

`animation-name`

禁用 CSS 关键字 `unset`, `initial`, `inherit`, `none`

`counter-reset``counter-increment`

禁止使用`unset`, `initial`, `inherit`, `none`.

`@counter-style``list-style-type`

禁止使用`unset`, `initial`, `inherit`, `none`, `inline`, `outside`. 同时不同浏览器预定义的值如：`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, 和 `disclosure-close`也不能使用。

`grid-row-start` (en-US)
`grid-row-end` (en-US)
`grid-column-start` (en-US)
`grid-column-end` (en-US)

禁止使用 `span` 。

`will-change`

禁止使用`unset`, `initial`, `inherit`, 以及 `will-change`, `auto`, `scroll-position`, and `contents`.

示例
--

### 有效标识符
```

nono79            字母数字混合
ground-level      字母 - 字母
-test             连字符后跟字母
_internal         下划线后跟字母
\22 toto          Unicode 编码后跟字母
bili\.bob         转义的句号
```

### 无效标识符
```

34rem             第一个字符不能是数字
-12rad            第一个字符连字符后不能跟数字
bili.bob          只有字母数字、连字符-、下划线_不需要转义
--toto            第一个字符不能为连字符后跟连字符
'bilibob'         不能用单引号包起来，这是一个字符串类型
"bilibob"         不能用双引号包起来，这是一个字符串类型
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

浏览器兼容性
------

由于这种类型不是真正的类型，而是用于简化允许值描述的便利类型，因此没有浏览器兼容性信息。
initial
=======

CSS 关键字 **`initial`** 将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何 CSS 属性。这包括 CSS 简写 `all`，initial 可用于将所有 CSS 属性恢复到其初始状态。

**备注：** 在继承的属性上，初始值可能是意外的。你应该考虑使用 `inherit`, `unset`，或`revert` (en-US) 关键字代替。

示例
--

#### HTML


```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Use `unset` to set a property to its inherited value if it inherits, or to its initial value if not.
* Use `revert` (en-US) to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use `inherit` to make an element's property the same as its parent.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.