zh-cn: Format /web/css using Prettier (part 2) (#14660)

Co-authored-by: Allo <[email protected]>

.prettierignore

@@ -91,4 +91,3 @@ build/
 
 # zh-cn
 /files/zh-cn/web/api/**/*.md
-/files/zh-cn/web/css/**/*.md

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

@@ -128,27 +128,29 @@ slug: Web/CSS/@supports
 
 ```css
 @supports (animation-name: test) {
-    /* 如果支持不带前缀的 animation-name，则下面指定的 CSS 会生效 */
-    @keyframes {
-      /* @supports 是一个 CSS 条件组 at-rule，它可以包含其他相关的 at-rules */
-    }
+  /* 如果支持不带前缀的 animation-name，则下面指定的 CSS 会生效 */
+  @keyframes {
+    /* @supports 是一个 CSS 条件组 at-rule，它可以包含其他相关的 at-rules */
+  }
 }
 ```
 
 ### 检测是否支持指定的 CSS 属性或者其带前缀版本
 
 ```css
-@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
-            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
-    /* 如果支持不带前缀以及带前缀的 perspective 属性，则下面指定的 CSS 会生效 */
+@supports (
+  (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px)
+    or (-ms-perspective: 10px) or (-o-perspective: 10px)
+) {
+  /* 如果支持不带前缀以及带前缀的 perspective 属性，则下面指定的 CSS 会生效 */
 }
 ```
 
 ### 检测是否不支持指定的 CSS 属性
 
 ```css
-@supports not ((text-align-last:justify) or (-moz-text-align-last:justify)) {
-    /* 这里的 CSS 代码用来模拟 text-align-last:justify */
+@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
+  /* 这里的 CSS 代码用来模拟 text-align-last:justify */
 }
 ```
 
@@ -184,8 +186,7 @@ slug: Web/CSS/@supports
   /* 这条规则需要内嵌在 @supports 块内。
      否则该规则在支持 :nth-child(…) 但不支持其内的 `of` 参数的浏览器中，
      只有部分生效 */
-  :is(:nth-child(1n of ul, ol) a,
-  details > summary) {
+  :is(:nth-child(1n of ul, ol) a, details > summary) {
     /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时，
         这里的 CSS 会生效 */
   }

files/zh-cn/web/css/align-self/index.md

@@ -21,12 +21,12 @@ align-self: normal;
 /* Positional alignment */
 /* align-self does not take left and right values */
 align-self: center; /* Put the item around the center */
-align-self: start;  /* Put the item at the start */
-align-self: end;    /* Put the item at the end */
+align-self: start; /* Put the item at the start */
+align-self: end; /* Put the item at the end */
 align-self: self-start; /* Align the item flush at the start */
-align-self: self-end;   /* Align the item flush at the end */
+align-self: self-end; /* Align the item flush at the end */
 align-self: flex-start; /* Put the flex item at the start */
-align-self: flex-end;   /* Put the flex item at the end */
+align-self: flex-end; /* Put the flex item at the end */
 
 /* Baseline alignment */
 align-self: baseline;

files/zh-cn/web/css/all/index.md

@@ -62,7 +62,7 @@ Phasellus eget velit sagittis.
 ```css
 body {
   font-size: small;
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   color: blue;
 }
 

files/zh-cn/web/css/alternative_style_sheets/index.md

@@ -24,11 +24,23 @@ The alternate stylesheets are commonly specified using a {{HTMLElement("link")}}
 一般使用<{{HTMLElement("link")}}>指定可替换样式表。在这个标签中指定`rel="alternate stylesheet"` 属性和 `title="..."`属性
 
 ```html
-<link href="reset.css" rel="stylesheet" type="text/css">
-
-<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
-<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
-<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
+<link href="reset.css" rel="stylesheet" type="text/css" />
+
+<link
+  href="default.css"
+  rel="stylesheet"
+  type="text/css"
+  title="Default Style" />
+<link
+  href="fancy.css"
+  rel="alternate stylesheet"
+  type="text/css"
+  title="Fancy" />
+<link
+  href="basic.css"
+  rel="alternate stylesheet"
+  type="text/css"
+  title="Basic" />
 ```
 
 In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the _Page Style_ submenu, with "Default Style" pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

files/zh-cn/web/css/angle/index.md

@@ -27,7 +27,7 @@ slug: Web/CSS/angle
 ## 示例
 
 | ![Angle90.png](angle90.png)           | 直角：`90deg = 100grad = 0.25turn ≈ 1.5708rad`               |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| ------------------------------------- | ------------------------------------------------------------ |
 | ![Angle180.png](angle180.png)         | 平角：`180deg = 200grad = 0.5turn ≈ 3.1416rad`               |
 | ![AngleMinus90.png](angleminus90.png) | 直角（逆时针）：`-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
 | ![Angle0.png](angle0.png)             | 零角：`0 = 0deg = 0grad = 0turn = 0rad`                      |

files/zh-cn/web/css/animation-duration/index.md

@@ -37,6 +37,7 @@ animation-duration: unset;
   - : 动画完成一个周期所需的时间。可以用秒（`s`）或毫秒（`ms`）指定。值必须是正数或零，单位是必需的。
 
     如果未提供值，则使用默认值 `0s`，此时动画仍会执行（会触发 [`animationStart`](/zh-CN/docs/Web/API/Element/animationstart_event) 和 [`animationEnd`](/zh-CN/docs/Web/API/Element/animationend_event) 事件）。如果 `animation-duration` 为 `0s` 时，动画是否可见取决于 [`animation-fill-mode`](/zh-CN/docs/Web/CSS/animation-fill-mode) 的值，如下所述：
+
     - 如果 `animation-fill-mode` 设置为 `backwards` 或者 `both`，则在 [`animation-delay`](/zh-CN/docs/Web/CSS/animation-delay) 倒计时期间将显示由 `animation-direction` 定义的动画的第一帧。
     - 如果 `animation-fill-mode` 设置为 `forwards` 或者 `both`，在 `animation-delay` 结束后，将显示由 `animation-direction` 定义的动画的最后一帧。
     - 如果 `animation-fill-mode` 设置为 `none`，动画将不会有任何的视觉效果。

files/zh-cn/web/css/animation-fill-mode/index.md

@@ -69,7 +69,7 @@ animation-fill-mode: both, forwards, none;
 ```html
 <p>Move your mouse over the gray box!</p>
 <div class="demo">
- <div class="growsandstays">This grows and stays big.</div>
+  <div class="growsandstays">This grows and stays big.</div>
   <div class="grows">This just grows.</div>
 </div>
 ```
@@ -83,8 +83,12 @@ animation-fill-mode: both, forwards, none;
 }
 
 @keyframes grow {
-  0% { font-size: 0; }
-  100% { font-size: 40px; }
+  0% {
+    font-size: 0;
+  }
+  100% {
+    font-size: 40px;
+  }
 }
 
 .demo:hover .grows {

files/zh-cn/web/css/animation-name/index.md

@@ -22,7 +22,10 @@ animation-name: sliding-vertically;
 
 /* 多个动画 */
 animation-name: test1, animation4;
-animation-name: none, -moz-specific, sliding;
+animation-name:
+  none,
+  -moz-specific,
+  sliding;
 
 /* 全局值 */
 animation-name: inherit;
@@ -84,7 +87,6 @@ animation-name: unset;
     transform: rotate(360deg);
   }
 }
-
 ```
 
 #### 结果

files/zh-cn/web/css/animation-timing-function/index.md

@@ -120,26 +120,26 @@ animation-timing-function: unset;
 
 ```css hidden
 .parent > div[class] {
-    animation-name: changeme;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
-    margin-bottom: 4px;
+  animation-name: changeme;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  margin-bottom: 4px;
 }
 @keyframes changeme {
-   0% {
-      min-width: 12em;
-      width: 12em;
-      background-color: black;
-      border: 1px solid red;
-      color: white;
-   }
-   100% {
-      width: 90vw;
-      min-width: 24em;
-      background-color: magenta;
-      color: yellow;
-      border: 1px solid orange;
-   }
+  0% {
+    min-width: 12em;
+    width: 12em;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+  }
+  100% {
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+  }
 }
 ```
 
@@ -183,26 +183,26 @@ animation-timing-function: unset;
 
 ```css hidden
 .parent > div[class] {
-    animation-name: changeme;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
-    margin-bottom: 4px;
+  animation-name: changeme;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  margin-bottom: 4px;
 }
 @keyframes changeme {
-   0% {
-      min-width: 12em;
-      width: 12em;
-      background-color: black;
-      border: 1px solid red;
-      color: white;
-   }
-   100% {
-      width: 90vw;
-      min-width: 24em;
-      background-color: magenta;
-      color: yellow;
-      border: 1px solid orange;
-   }
+  0% {
+    min-width: 12em;
+    width: 12em;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+  }
+  100% {
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+  }
 }
 ```
 

files/zh-cn/web/css/animation/index.md

@@ -20,7 +20,9 @@ animation: 3s ease-in 1s 2 reverse both paused slidein;
 animation: 3s linear 1s slidein;
 
 /* two animations */
-animation: 3s linear slidein, 3s ease-out 5s slideout;
+animation:
+  3s linear slidein,
+  3s ease-out 5s slideout;
 ```
 
 `animation` 属性用来指定一组或多组动画，每组之间用逗号相隔。
@@ -63,9 +65,7 @@ animation: 3s linear slidein, 3s ease-out 5s slideout;
 
 ```html
 <div class="view_port">
-  <div class="polling_message">
-    Listening for dispatches
-  </div>
+  <div class="polling_message">Listening for dispatches</div>
   <div class="cylon_eye"></div>
 </div>
 ```
@@ -86,20 +86,36 @@ animation: 3s linear slidein, 3s ease-out 5s slideout;
 
 .cylon_eye {
   background-color: red;
-  background-image: linear-gradient(to right,
-      rgba(0, 0, 0, .9) 25%,
-      rgba(0, 0, 0, .1) 50%,
-      rgba(0, 0, 0, .9) 75%);
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.9) 25%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.9) 75%
+  );
   color: white;
   height: 100%;
   width: 20%;
 
   -webkit-animation: 4s linear 0s infinite alternate move_eye;
-          animation: 4s linear 0s infinite alternate move_eye;
+  animation: 4s linear 0s infinite alternate move_eye;
 }
 
-@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
-        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+@-webkit-keyframes move_eye {
+  from {
+    margin-left: -20%;
+  }
+  to {
+    margin-left: 100%;
+  }
+}
+@keyframes move_eye {
+  from {
+    margin-left: -20%;
+  }
+  to {
+    margin-left: 100%;
+  }
+}
 ```
 
 {{EmbedLiveSample('赛隆人之眼')}}