```
@@ -42,7 +46,10 @@ additive-symbols: 3 "0", 2 url(symbol.png);
```css
@counter-style additive-symbols-example {
system: additive;
- additive-symbols:V 5, IV 4, I 1;
+ additive-symbols:
+ V 5,
+ IV 4,
+ I 1;
}
.list {
list-style: additive-symbols-example;
diff --git a/files/zh-cn/web/css/@counter-style/index.md b/files/zh-cn/web/css/@counter-style/index.md
index d82f49fe0705ce..c84cb8ac4daed1 100644
--- a/files/zh-cn/web/css/@counter-style/index.md
+++ b/files/zh-cn/web/css/@counter-style/index.md
@@ -1,5 +1,5 @@
---
-title: '@counter-style'
+title: "@counter-style"
slug: Web/CSS/@counter-style
---
@@ -61,6 +61,7 @@ slug: Web/CSS/@counter-style
```
- {{cssxref("additive-symbols")}}
+
- : 尽管 symbols 属性中指定的符号可以被 system 中定义的大部分算法所使用，但是一些 system 属性的值，比如 additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.
- {{cssxref("speak-as")}}
@@ -80,7 +81,7 @@ slug: Web/CSS/@counter-style
```css
.items {
- list-style: circled-alpha;
+ list-style: circled-alpha;
}
```
diff --git a/files/zh-cn/web/css/@document/index.md b/files/zh-cn/web/css/@document/index.md
index d22b85c7c0d6dd..cd663c95b63ff6 100644
--- a/files/zh-cn/web/css/@document/index.md
+++ b/files/zh-cn/web/css/@document/index.md
@@ -1,5 +1,5 @@
---
-title: '@document'
+title: "@document"
slug: Web/CSS/@document
---
@@ -8,7 +8,8 @@ slug: Web/CSS/@document
`@document` [CSS](/zh-CN/docs/Web/CSS) [at-rule](/zh-CN/docs/Web/CSS/At-rule) 根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表（UserStyle）而设计的，但也可以在作者定义的样式表上使用。
```css
-@document url("https://www.example.com/") {
+@document url("https://www.example.com/")
+{
h1 {
color: green;
}
@@ -34,8 +35,7 @@ slug: Web/CSS/@document
@document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org),
- regexp("https:.*")
-{
+ regexp("https:.*") {
/* 该条 CSS 规则会应用在下面的网页：
+ URL 为"http://www.w3.org/"的页面。
+ 任何 URL 以"http://www.w3.org/Style/"开头的网页
diff --git a/files/zh-cn/web/css/@font-face/font-family/index.md b/files/zh-cn/web/css/@font-face/font-family/index.md
index cdf23b2731b18d..4b31dc88b161b8 100644
--- a/files/zh-cn/web/css/@font-face/font-family/index.md
+++ b/files/zh-cn/web/css/@font-face/font-family/index.md
@@ -16,7 +16,7 @@ The **`font-family`** CSS descriptor allows authors to specify the font family f
```css
/* values */
font-family: "font family";
-font-family: 'another font family';
+font-family: "another font family";
/* value */
font-family: examplefont;
@@ -36,7 +36,7 @@ font-family: examplefont;
```css
@font-face {
font-family: examplefont;
- src: url('examplefont.ttf');
+ src: url("examplefont.ttf");
}
```
diff --git a/files/zh-cn/web/css/@font-face/font-style/index.md b/files/zh-cn/web/css/@font-face/font-style/index.md
index 5eddd981984ab9..5dfa6ba75b67a9 100644
--- a/files/zh-cn/web/css/@font-face/font-style/index.md
+++ b/files/zh-cn/web/css/@font-face/font-style/index.md
@@ -43,7 +43,7 @@ As an example, consider the garamond font family, in its normal form, we get the
```css
@font-face {
font-family: garamond;
- src: url('garamond.ttf');
+ src: url("garamond.ttf");
}
```
@@ -58,7 +58,7 @@ On the other hand, if a true italicized version of the font family exists, we ca
```css
@font-face {
font-family: garamond;
- src: url('garamond-italic.ttf');
+ src: url("garamond-italic.ttf");
font-style: italic;
}
```
diff --git a/files/zh-cn/web/css/@font-face/index.md b/files/zh-cn/web/css/@font-face/index.md
index 6f65cef8fb9b20..8f9f3e60b35f28 100644
--- a/files/zh-cn/web/css/@font-face/index.md
+++ b/files/zh-cn/web/css/@font-face/index.md
@@ -1,5 +1,5 @@
---
-title: '@font-face'
+title: "@font-face"
slug: Web/CSS/@font-face
---
@@ -10,8 +10,9 @@ slug: Web/CSS/@font-face
```css
@font-face {
font-family: "Open Sans";
- src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
- url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+ src:
+ url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+ url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```
@@ -46,20 +47,22 @@ slug: Web/CSS/@font-face
```html
-
- Web Font Sample
-
-
-
- This is Bitstream Vera Serif Bold.
-
+
+ Web Font Sample
+
+
+
+ This is Bitstream Vera Serif Bold.
+
```
@@ -68,9 +71,8 @@ slug: Web/CSS/@font-face
```css
@font-face {
font-family: MyHelvetica;
- src: local("Helvetica Neue Bold"),
- local("HelveticaNeue-Bold"),
- url(MgOpenModernaBold.ttf);
+ src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+ url(MgOpenModernaBold.ttf);
font-weight: bold;
}
```
@@ -81,15 +83,15 @@ slug: Web/CSS/@font-face
```css
@font-face {
- font-family: myFirstFont;
- src: local("Times New Roman");
- font-weight:normal;
+ font-family: myFirstFont;
+ src: local("Times New Roman");
+ font-weight: normal;
}
@font-face {
- font-family: myFirstFont;
- src: local(Consolas);
- font-weight:bold;
+ font-family: myFirstFont;
+ src: local(Consolas);
+ font-weight: bold;
}
```
@@ -104,7 +106,7 @@ slug: Web/CSS/@font-face
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
- url(MgOpenModernaBold.ttf);
+ url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}
diff --git a/files/zh-cn/web/css/@font-face/src/index.md b/files/zh-cn/web/css/@font-face/src/index.md
index c741ea6c2939d8..2bc6b113edf719 100644
--- a/files/zh-cn/web/css/@font-face/src/index.md
+++ b/files/zh-cn/web/css/@font-face/src/index.md
@@ -18,20 +18,22 @@ slug: Web/CSS/@font-face/src
```css
/* values */
src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
-src: url(path/to/font.woff); /* Relative URL */
-src: url(path/to/font.woff) format("woff"); /* Explicit format */
-src: url('path/to/font.woff'); /* Quoted URL */
-src: url(path/to/svgfont.svg#example); /* Fragment identifying font */
+src: url(path/to/font.woff); /* Relative URL */
+src: url(path/to/font.woff) format("woff"); /* Explicit format */
+src: url("path/to/font.woff"); /* Quoted URL */
+src: url(path/to/svgfont.svg#example); /* Fragment identifying font */
/* values */
-src: local(font); /* Unquoted name */
+src: local(font); /* Unquoted name */
src: local(some font); /* Name containing space */
-src: local("font"); /* Quoted name */
+src: local("font"); /* Quoted name */
/* Multiple items */
-src: local(font), url(path/to/font.svg) format("svg"),
- url(path/to/font.woff) format("woff"),
- url(path/to/font.otf) format("opentype");
+src:
+ local(font),
+ url(path/to/font.svg) format("svg"),
+ url(path/to/font.woff) format("woff"),
+ url(path/to/font.otf) format("opentype");
```
### Values
@@ -61,9 +63,10 @@ src: local(font), url(path/to/font.svg) format("svg"),
```css
@font-face {
font-family: examplefont;
- src: local(Example Font),
- url('examplefont.woff') format("woff"),
- url('examplefont.otf') format("opentype");
+ src:
+ local(Example Font),
+ url("examplefont.woff") format("woff"),
+ url("examplefont.otf") format("opentype");
}
```
diff --git a/files/zh-cn/web/css/@font-feature-values/index.md b/files/zh-cn/web/css/@font-feature-values/index.md
index 4772ad6635c61d..dabc560f230b59 100644
--- a/files/zh-cn/web/css/@font-feature-values/index.md
+++ b/files/zh-cn/web/css/@font-feature-values/index.md
@@ -1,5 +1,5 @@
---
-title: '@font-feature-values'
+title: "@font-feature-values"
slug: Web/CSS/@font-feature-values
---
@@ -10,21 +10,25 @@ slug: Web/CSS/@font-feature-values
**`@font-feature-values`** [CSS](/zh-CN/docs/Web/CSS) [at-rule](/zh-CN/docs/Web/CSS/At-rule) 允许作者在{{cssxref("font-variant-alternates")}} 中使用通用名称，用于在 OpenType 中以不同方式激活功能。它允许在使用几种字体时简化 CSS。
```css
-@font-feature-values Font One { /* How to activate nice-style in Font One */
+@font-feature-values Font One {
+ /* How to activate nice-style in Font One */
@styleset {
nice-style: 12;
}
}
-@font-feature-values Font Two { /* How to activate nice-style in Font Two */
+@font-feature-values Font Two {
+ /* How to activate nice-style in Font Two */
@styleset {
nice-style: 4;
}
}
-…
+/* … */
-.nice-look { font-variant-alternates: styleset(nice-style); } /* Independent of the font */
+.nice-look {
+ font-variant-alternates: styleset(nice-style);
+} /* Independent of the font */
```
The `@font-feature-values` at-rule may be used at the top level of a CSS, but also inside any [CSS conditional-group at-rule](/zh-CN/docs/Web/CSS/At-rule#Conditional_Group_Rules).
diff --git a/files/zh-cn/web/css/@import/index.md b/files/zh-cn/web/css/@import/index.md
index 9718988e7c6a1d..97dc03633e1d60 100644
--- a/files/zh-cn/web/css/@import/index.md
+++ b/files/zh-cn/web/css/@import/index.md
@@ -1,5 +1,5 @@
---
-title: '@import'
+title: "@import"
slug: Web/CSS/@import
---
@@ -34,10 +34,10 @@ slug: Web/CSS/@import
```css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
-@import 'custom.css';
+@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
-@import url('landscape.css') screen and (orientation:landscape);
+@import url("landscape.css") screen and (orientation: landscape);
```
## 规范
diff --git a/files/zh-cn/web/css/@keyframes/index.md b/files/zh-cn/web/css/@keyframes/index.md
index 0f634ba72b7f17..155df2fa0a8fe0 100644
--- a/files/zh-cn/web/css/@keyframes/index.md
+++ b/files/zh-cn/web/css/@keyframes/index.md
@@ -1,5 +1,5 @@
---
-title: '@keyframes'
+title: "@keyframes"
slug: Web/CSS/@keyframes
---
@@ -43,10 +43,21 @@ JavaScript 可以通过 CSS 对象模型的 {{domxref("CSSKeyframesRule")}} 接
```css
@keyframes identifier {
- 0% { top: 0; left: 0; }
- 30% { top: 50px; }
- 68%, 72% { left: 50px; }
- 100% { top: 100px; left: 100%; }
+ 0% {
+ top: 0;
+ left: 0;
+ }
+ 30% {
+ top: 50px;
+ }
+ 68%,
+ 72% {
+ left: 50px;
+ }
+ 100% {
+ top: 100px;
+ left: 100%;
+ }
}
```
@@ -58,10 +69,19 @@ JavaScript 可以通过 CSS 对象模型的 {{domxref("CSSKeyframesRule")}} 接
```css
@keyframes identifier {
- 0% { top: 0; }
- 50% { top: 30px; left: 20px; }
- 50% { top: 10px; }
- 100% { top: 0; }
+ 0% {
+ top: 0;
+ }
+ 50% {
+ top: 30px;
+ left: 20px;
+ }
+ 50% {
+ top: 10px;
+ }
+ 100% {
+ top: 0;
+ }
}
```
@@ -75,16 +95,26 @@ Firefox 14 开始支持层叠 keyframes。
```css
@keyframes important1 {
- from { margin-top: 50px; }
- 50% { margin-top: 150px !important; } /* 忽略 */
- to { margin-top: 100px; }
+ from {
+ margin-top: 50px;
+ }
+ 50% {
+ margin-top: 150px !important;
+ } /* 忽略 */
+ to {
+ margin-top: 100px;
+ }
}
@keyframes important2 {
- from { margin-top: 50px;
- margin-bottom: 100px; }
- to { margin-top: 150px !important; /* 忽略 */
- margin-bottom: 50px; }
+ from {
+ margin-top: 50px;
+ margin-bottom: 100px;
+ }
+ to {
+ margin-top: 150px !important; /* 忽略 */
+ margin-bottom: 50px;
+ }
}
```
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 3349dd66aec4f2..4d87dfda3b18b9 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -1,5 +1,5 @@
---
-title: '@layer'
+title: "@layer"
slug: Web/CSS/@layer
---
@@ -20,11 +20,11 @@ slug: Web/CSS/@layer
```css
@layer utilities {
.padding-sm {
- padding: .5rem;
+ padding: 0.5rem;
}
.padding-lg {
- padding: .8rem;
+ padding: 0.8rem;
}
}
```
@@ -32,19 +32,19 @@ slug: Web/CSS/@layer
一个级联层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内：
```css
-@import(utilities.css) layer(utilities);
+@import (utilities.css) layer(utilities);
```
你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层：
```css
-@layer utilities
+@layer utilities;
```
或者，多个命名层也可以被同时定义。例如：
```css
-@layer theme, layout, utilities
+@layer theme, layout, utilities;
```
这一做法很有用，因为层最初被指定的顺序决定了它是否有优先级。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。
@@ -62,7 +62,6 @@ slug: Web/CSS/@layer
```css
@layer framework {
@layer layout {
-
}
}
```
@@ -140,9 +139,11 @@ p {
#### HTML
```html
-
I am displayed in color: rebeccapurple
-because the type layer comes after the base layer.
-My green border, font-size, and padding come from the base layer.
+
+ I am displayed in color: rebeccapurple because the
+ type layer comes after the base layer. My green
+ border, font-size, and padding come from the base layer.
+
```
#### CSS
@@ -161,7 +162,7 @@ My green border, font-size, and padding come from the base layer.
-
+
```
### CSS
diff --git a/files/zh-cn/web/css/@media/aspect-ratio/index.md b/files/zh-cn/web/css/@media/aspect-ratio/index.md
index 1c20b07d72137c..d0ad22cda7d082 100644
--- a/files/zh-cn/web/css/@media/aspect-ratio/index.md
+++ b/files/zh-cn/web/css/@media/aspect-ratio/index.md
@@ -18,7 +18,7 @@ slug: Web/CSS/@media/aspect-ratio
### HTML
```html
-
+
Watch this element as you resize your viewport's width and height.
span:nth-of-type(2n+1), WITH an
- <em> among the child elements.
-
Children 1, 4, 6, and 8 are selected.
- 3 isn't used in the counting or selected because it is an <em>,
- not a <span>, and nth-of-type only selects
- children of that type. The <em> is completely skipped
- over and ignored.
+
+
+
+ span:nth-of-type(2n+1), WITH an <em> among the
+ child elements.
+
+
+ Children 1, 4, 6, and 8 are selected.
+ 3 isn't used in the counting or selected because it is an
+ <em>, not a <span>, and
+ nth-of-type only selects children of that type. The
+ <em> is completely skipped over and ignored.
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec felis enim, placerat id eleifend eu, semper vel sem.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
+ placerat id eleifend eu, semper vel sem.
+
- Cras risus odio, pharetra nec ultricies et,
- mollis ac augue. Nunc et diam quis sapien dignissim auctor.
- Quisque quis neque arcu, nec gravida magna.
+
+ Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
+ quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
+