zh-cn: Format /web/css using Prettier (part 1) (#14659)

files/zh-cn/web/css/-moz-image-rect/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-moz-image-rect'
+title: "-moz-image-rect"
 slug: Web/CSS/-moz-image-rect
 ---
 
@@ -46,14 +46,14 @@ The container looks like this:
 
 ```css
 #container {
-  width:267px;
-  height:272px;
-  top:100px;
-  left:100px;
-  position:absolute;
-  font-size:16px;
-  text-shadow:white 0px 0px 6px;
-  text-align:center;
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
 }
 ```
 
@@ -62,9 +62,9 @@ Then the four boxes defining the segments of the image are defined. Let's look a
 ```css
 #box1 {
   background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -73,9 +73,9 @@ This is the top-left corner of the image. It defines a rectangle containing the
 ```css
 #box2 {
   background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -86,15 +86,15 @@ The other corners follow a similar pattern:
 ```css
 #box3 {
   background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 #box4 {
   background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
@@ -119,16 +119,20 @@ This code handles the click event when the container receives a mouse click.
 
 ```js
 function rotate() {
-  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+  var prevStyle = window
+    .getComputedStyle(document.getElementById("box4"), null)
+    .getPropertyValue("background-image");
 
   // Now that we've saved the last one, start rotating
 
-  for (var i=1; i<=4; i++) {
+  for (var i = 1; i <= 4; i++) {
     var curId = "box" + i;
 
     // Shift the background images
 
-    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    var curStyle = window
+      .getComputedStyle(document.getElementById(curId), null)
+      .getPropertyValue("background-image");
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
   }

files/zh-cn/web/css/-moz-user-input/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-moz-user-input'
+title: "-moz-user-input"
 slug: Web/CSS/-moz-user-input
 ---
 

files/zh-cn/web/css/-webkit-border-before/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-border-before'
+title: "-webkit-border-before"
 slug: Web/CSS/-webkit-border-before
 ---
 

files/zh-cn/web/css/-webkit-line-clamp/index.md

@@ -54,7 +54,8 @@ slug: Web/CSS/-webkit-line-clamp
 
 ```html
 <p>
-  在此示例中，<code>-webkit-line-clamp</code> 属性设置为 <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
+  在此示例中，<code>-webkit-line-clamp</code> 属性设置为
+  <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
 </p>
 ```
 

files/zh-cn/web/css/-webkit-mask-attachment/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-mask-attachment'
+title: "-webkit-mask-attachment"
 slug: Web/CSS/-webkit-mask-attachment
 ---
 
@@ -42,7 +42,7 @@ slug: Web/CSS/-webkit-mask-attachment
 
 ```css
 body {
-  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-image: url("images/mask.png");
   -webkit-mask-attachment: fixed;
 }
 ```

files/zh-cn/web/css/-webkit-overflow-scrolling/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-overflow-scrolling'
+title: "-webkit-overflow-scrolling"
 slug: Web/CSS/-webkit-overflow-scrolling
 ---
 

files/zh-cn/web/css/-webkit-tap-highlight-color/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-tap-highlight-color'
+title: "-webkit-tap-highlight-color"
 slug: Web/CSS/-webkit-tap-highlight-color
 ---
 

files/zh-cn/web/css/-webkit-touch-callout/index.md

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-touch-callout'
+title: "-webkit-touch-callout"
 slug: Web/CSS/-webkit-touch-callout
 ---
 
@@ -17,13 +17,13 @@ slug: Web/CSS/-webkit-touch-callout
 Formal syntax: default | none
 ```
 
-```html
--webkit-touch-callout: default   /* displays the callout */
--webkit-touch-callout: none      /* disables the callout */
+```css
+-webkit-touch-callout: default; /* displays the callout */
+-webkit-touch-callout: none; /* disables the callout */
 
--webkit-touch-callout: initial
--webkit-touch-callout: inherit
--webkit-touch-callout: unset
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
 ```
 
 ### 可能的值

files/zh-cn/web/css/@charset/index.md

@@ -1,5 +1,5 @@
 ---
-title: '@charset'
+title: "@charset"
 slug: Web/CSS/@charset
 ---
 
@@ -33,18 +33,21 @@ slug: Web/CSS/@charset
 ```
 
 - _charset_
-  - : 它是一个 {{cssxref("<string>")}} 表示字符编码被使用。它必须是在被 [IANA-registry](http://www.iana.org/assignments/character-sets) 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 *preferred* 的那个才会被使用。
+  - : 它是一个 {{cssxref("<string>")}} 表示字符编码被使用。它必须是在被 [IANA-registry](http://www.iana.org/assignments/character-sets) 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 _preferred_ 的那个才会被使用。
 
 ## 例子
 
 ```css
 @charset "UTF-8";
 @charset "utf-8"; /*大小写不敏感*/
 /* 设置 css 的编码格式为 Unicode UTF-8 */
+```
+
+```css-nolint example-bad
 @charset 'iso-8859-15'; /* 无效的，使用了错误的引号 */
-@charset  "UTF-8";      /* 无效的，多于一个空格 */
- @charset "UTF-8";      /* 无效的，在 at-rule 之前多了一个空格 */
-@charset UTF-8;         /* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS {{cssxref("<string>")}} */
+@charset  "UTF-8"; /* 无效的，多于一个空格 */
+ @charset "UTF-8"; /* 无效的，在 at-rule 之前多了一个空格 */
+@charset UTF-8; /* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS {{cssxref("<string>")}} */
 ```
 
 ## 规范

files/zh-cn/web/css/@counter-style/additive-symbols/index.md

@@ -9,8 +9,12 @@ slug: Web/CSS/@counter-style/additive-symbols
 
 ```css
 additive-symbols: 3 "0";
-additive-symbols: 3 "0", 2 "\2E\20";
-additive-symbols: 3 "0", 2 url(symbol.png);
+additive-symbols:
+  3 "0",
+  2 "\2E\20";
+additive-symbols:
+  3 "0",
+  2 url(symbol.png);
 ```
 
 当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 {{cssxref('symbols')}}代替`additive-symbols`
@@ -29,11 +33,11 @@ additive-symbols: 3 "0", 2 url(symbol.png);
 
 ```html
 <ul class="list">
-   <li>One</li>
-   <li>Two</li>
-   <li>Three</li>
-   <li>Four</li>
-   <li>Five</li>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
 </ul>
 ```
 
@@ -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;

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;
 }
 ```
 

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/"开头的网页

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
 /* <string> values */
 font-family: "font family";
-font-family: 'another font family';
+font-family: "another font family";
 
 /* <IDENT> 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");
 }
 ```
 

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;
 }
 ```