From 881e54e12075b75078d992cae56efd1c83de0e75 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Thu, 27 Jul 2023 18:11:37 -0700 Subject: [PATCH] zh-cn: Format /web/css using Prettier (part 4) (#14662) Co-authored-by: A1lo --- files/zh-cn/web/css/overflow-wrap/index.md | 71 ++++++---- files/zh-cn/web/css/overflow-y/index.md | 34 +++-- files/zh-cn/web/css/padding-left/index.md | 8 +- files/zh-cn/web/css/padding-right/index.md | 8 +- files/zh-cn/web/css/padding-top/index.md | 8 +- files/zh-cn/web/css/padding/index.md | 24 ++-- files/zh-cn/web/css/page-break-after/index.md | 2 +- .../zh-cn/web/css/page-break-inside/index.md | 18 ++- files/zh-cn/web/css/percentage/index.md | 8 +- .../zh-cn/web/css/perspective-origin/index.md | 8 +- files/zh-cn/web/css/perspective/index.md | 18 ++- files/zh-cn/web/css/place-content/index.md | 29 ++-- files/zh-cn/web/css/place-items/index.md | 12 +- files/zh-cn/web/css/pointer-events/index.md | 21 +-- files/zh-cn/web/css/position/index.md | 61 +++++--- .../index.md | 12 +- files/zh-cn/web/css/pseudo-classes/index.md | 2 +- files/zh-cn/web/css/quotes/index.md | 37 +++-- files/zh-cn/web/css/ratio/index.md | 4 +- files/zh-cn/web/css/repeat/index.md | 20 +-- files/zh-cn/web/css/resize/index.md | 3 +- files/zh-cn/web/css/right/index.md | 6 +- files/zh-cn/web/css/scroll-behavior/index.md | 3 +- files/zh-cn/web/css/scroll-margin/index.md | 2 +- files/zh-cn/web/css/scroll-snap-type/index.md | 134 +++++++++--------- files/zh-cn/web/css/scrollbar-color/index.md | 12 +- files/zh-cn/web/css/selector_list/index.md | 11 +- .../web/css/shape-image-threshold/index.md | 22 ++- files/zh-cn/web/css/shape-margin/index.md | 17 +-- files/zh-cn/web/css/shape-outside/index.md | 7 +- .../web/css/shorthand_properties/index.md | 7 +- files/zh-cn/web/css/specificity/index.md | 70 ++++++--- files/zh-cn/web/css/system-color/index.md | 4 +- files/zh-cn/web/css/text-align-last/index.md | 6 +- .../web/css/text-decoration-color/index.md | 6 +- .../web/css/text-decoration-line/index.md | 4 +- .../web/css/text-decoration-style/index.md | 12 +- files/zh-cn/web/css/text-decoration/index.md | 5 +- files/zh-cn/web/css/text-indent/index.md | 6 +- files/zh-cn/web/css/text-justify/index.md | 35 ++++- files/zh-cn/web/css/text-overflow/index.md | 40 ++++-- files/zh-cn/web/css/text-rendering/index.md | 9 +- files/zh-cn/web/css/text-shadow/index.md | 26 ++-- files/zh-cn/web/css/text-transform/index.md | 8 +- files/zh-cn/web/css/touch-action/index.md | 2 +- .../zh-cn/web/css/transform-function/index.md | 14 +- .../css/transform-function/matrix3d/index.md | 31 +--- .../css/transform-function/translate/index.md | 4 +- .../transform-function/translate3d/index.md | 4 +- files/zh-cn/web/css/transform/index.md | 6 +- .../web/css/transition-property/index.md | 5 +- files/zh-cn/web/css/transition/index.md | 4 +- files/zh-cn/web/css/unicode-bidi/index.md | 8 +- .../web/css/universal_selectors/index.md | 12 +- files/zh-cn/web/css/url/index.md | 8 +- files/zh-cn/web/css/user-select/index.md | 2 + .../css/using_css_custom_properties/index.md | 25 +++- files/zh-cn/web/css/var/index.md | 5 +- files/zh-cn/web/css/vertical-align/index.md | 35 ++++- .../zh-cn/web/css/viewport_concepts/index.md | 36 ++--- files/zh-cn/web/css/visibility/index.md | 5 +- files/zh-cn/web/css/white-space/index.md | 4 +- files/zh-cn/web/css/widows/index.md | 10 +- files/zh-cn/web/css/width/index.md | 6 +- files/zh-cn/web/css/will-change/index.md | 6 +- files/zh-cn/web/css/word-break/index.md | 32 +++-- files/zh-cn/web/css/word-spacing/index.md | 2 +- files/zh-cn/web/css/z-index/index.md | 2 +- 68 files changed, 677 insertions(+), 451 deletions(-) diff --git a/files/zh-cn/web/css/overflow-wrap/index.md b/files/zh-cn/web/css/overflow-wrap/index.md index 0c7ec9bee9fbfc..92dbe23fe23477 100644 --- a/files/zh-cn/web/css/overflow-wrap/index.md +++ b/files/zh-cn/web/css/overflow-wrap/index.md @@ -53,52 +53,67 @@ overflow-wrap: unset; #### HTML ```html -

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (normal)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (overflow-wrap: anywhere)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (overflow-wrap: break-word)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (word-break)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (hyphens, without lang attribute)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (hyphens, English rules)

-

They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself. (hyphens, German rules)

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. (normal) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (overflow-wrap: anywhere) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (overflow-wrap: break-word) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (word-break) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. (hyphens, without + lang attribute) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. (hyphens, English rules) +

+

+ They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. (hyphens, German rules) +

``` #### CSS ```css p { - width: 13em; - margin: 2px; - background: gold; + width: 13em; + margin: 2px; + background: gold; } .ow-anywhere { - overflow-wrap: anywhere; + overflow-wrap: anywhere; } .ow-break-word { - overflow-wrap: break-word; + overflow-wrap: break-word; } .word-break { - word-break: break-all; + word-break: break-all; } .hyphens { - hyphens: auto; + hyphens: auto; } ``` diff --git a/files/zh-cn/web/css/overflow-y/index.md b/files/zh-cn/web/css/overflow-y/index.md index 24fb095cad88c4..19d742409689c5 100644 --- a/files/zh-cn/web/css/overflow-y/index.md +++ b/files/zh-cn/web/css/overflow-y/index.md @@ -60,30 +60,34 @@ overflow-y: unset; ```html ``` diff --git a/files/zh-cn/web/css/padding-left/index.md b/files/zh-cn/web/css/padding-left/index.md index 513a76fa91f18f..f3d66f1ff9ef0a 100644 --- a/files/zh-cn/web/css/padding-left/index.md +++ b/files/zh-cn/web/css/padding-left/index.md @@ -52,8 +52,12 @@ padding-left: unset; ### 使用“px”单位和百分比设置 padding-left 的样例 ```css -.content { padding-left: 5%; } -.sidebox { padding-left: 10px; } +.content { + padding-left: 5%; +} +.sidebox { + padding-left: 10px; +} ``` ## 规范 diff --git a/files/zh-cn/web/css/padding-right/index.md b/files/zh-cn/web/css/padding-right/index.md index 24195c7bf412d4..6d756a1c1beb93 100644 --- a/files/zh-cn/web/css/padding-right/index.md +++ b/files/zh-cn/web/css/padding-right/index.md @@ -40,8 +40,12 @@ padding-right: unset; ## Examples ```css -.content { padding-right: 5%; } -.sidebox { padding-right: 10px; } +.content { + padding-right: 5%; +} +.sidebox { + padding-right: 10px; +} ``` ## Specifications diff --git a/files/zh-cn/web/css/padding-top/index.md b/files/zh-cn/web/css/padding-top/index.md index 86f9c29059ca82..a88314e448a967 100644 --- a/files/zh-cn/web/css/padding-top/index.md +++ b/files/zh-cn/web/css/padding-top/index.md @@ -42,8 +42,12 @@ padding-top: unset; ## 实例 ```css -.content { padding-top: 5%; } -.sidebox { padding-top: 10px; } +.content { + padding-top: 5%; +} +.sidebox { + padding-top: 10px; +} ``` ## 规范 diff --git a/files/zh-cn/web/css/padding/index.md b/files/zh-cn/web/css/padding/index.md index f03531c4f95f2a..060183b092666f 100644 --- a/files/zh-cn/web/css/padding/index.md +++ b/files/zh-cn/web/css/padding/index.md @@ -73,7 +73,7 @@ padding: unset; ```html

此元素有合适的内边距。

-

此元素的内边距很 大！

+

此元素的内边距很大！

``` #### CSS @@ -97,21 +97,21 @@ h3 { ### 以像素和百分数为单位设置内边距 ```css -padding: 5%; /* 所有边：5% 的内边距 */ +padding: 5%; /* 所有边：5% 的内边距 */ -padding: 10px; /* 所有边：10px 的内边距 */ +padding: 10px; /* 所有边：10px 的内边距 */ -padding: 10px 20px; /* 上边和下边：10px 的内边距 */ - /* 左边和右边：20px 的内边距 */ +padding: 10px 20px; /* 上边和下边：10px 的内边距 */ +/* 左边和右边：20px 的内边距 */ -padding: 10px 3% 20px; /* 上边：10px 的内边距 */ - /* 左边和右边：3% 的内边距 */ - /* 下边：20px 的内边距 */ +padding: 10px 3% 20px; /* 上边：10px 的内边距 */ +/* 左边和右边：3% 的内边距 */ +/* 下边：20px 的内边距 */ -padding: 1em 3px 30px 5px; /* 上边：1em 的内边距*/ - /* 右边：3px 的内边距*/ - /* 下边：30px 的内边距*/ - /* 左边：5px 的内边距*/ +padding: 1em 3px 30px 5px; /* 上边：1em 的内边距*/ +/* 右边：3px 的内边距*/ +/* 下边：30px 的内边距*/ +/* 左边：5px 的内边距*/ ``` ## 规范 diff --git a/files/zh-cn/web/css/page-break-after/index.md b/files/zh-cn/web/css/page-break-after/index.md index ed6ced02dcd2b6..5f76784f36fe2c 100644 --- a/files/zh-cn/web/css/page-break-after/index.md +++ b/files/zh-cn/web/css/page-break-after/index.md @@ -73,7 +73,7 @@ page-break-after: unset; ```css /* move to a new page after footnotes */ div.footnotes { - page-break-after:always; + page-break-after: always; } ``` diff --git a/files/zh-cn/web/css/page-break-inside/index.md b/files/zh-cn/web/css/page-break-inside/index.md index df5ff21bf44e4e..bdc4458d66957e 100644 --- a/files/zh-cn/web/css/page-break-inside/index.md +++ b/files/zh-cn/web/css/page-break-inside/index.md @@ -44,16 +44,19 @@ page-break-inside: unset; A list
  1. one
    2. - +

This is the second paragraph.

This is the third paragraph, it contains more text.

-

This is the fourth paragraph. It has a little bit more text than the third one.

+

+ This is the fourth paragraph. It has a little bit more text than the third + one. +

``` @@ -68,7 +71,10 @@ page-break-inside: unset; column-width: 100px; } -.list, ol, ul, p { +.list, +ol, +ul, +p { break-inside: avoid; } @@ -76,7 +82,9 @@ p { background-color: #8ca0ff; } -ol, ul, .list { +ol, +ul, +.list { margin: 0.5em 0; display: block; background-color: orange; diff --git a/files/zh-cn/web/css/percentage/index.md b/files/zh-cn/web/css/percentage/index.md index ebf428b416e6e8..46218ca4ad8e02 100644 --- a/files/zh-cn/web/css/percentage/index.md +++ b/files/zh-cn/web/css/percentage/index.md @@ -25,8 +25,12 @@ slug: Web/CSS/percentage ```html
-
Width: 50%, Left margin: 20%
-
Width: 30%, Left margin: 60%
+
+ Width: 50%, Left margin: 20% +
+
+ Width: 30%, Left margin: 60% +
``` diff --git a/files/zh-cn/web/css/perspective-origin/index.md b/files/zh-cn/web/css/perspective-origin/index.md index 23f13e6c5c918f..71462978d88850 100644 --- a/files/zh-cn/web/css/perspective-origin/index.md +++ b/files/zh-cn/web/css/perspective-origin/index.md @@ -328,7 +328,7 @@ perspective-origin: unset; .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); - -webkit-transform: rotateX(90deg) translateZ(50px) + -webkit-transform: rotateX(90deg) translateZ(50px); } .bottom { @@ -338,8 +338,10 @@ perspective-origin: unset; } /* Make the table a little nicer */ -th, p, td { - background-color: #EEEEEE; +th, +p, +td { + background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; diff --git a/files/zh-cn/web/css/perspective/index.md b/files/zh-cn/web/css/perspective/index.md index 266d85db4ad617..24adfd6a50f416 100644 --- a/files/zh-cn/web/css/perspective/index.md +++ b/files/zh-cn/web/css/perspective/index.md @@ -60,10 +60,8 @@ perspective: unset; - - + + - - + +
perspective: 250px; - perspective: 350px; - perspective: 250px;perspective: 350px;
@@ -92,10 +90,8 @@ perspective: unset;
perspective: 500px; - perspective: 650px; - perspective: 500px;perspective: 650px;
@@ -211,8 +207,10 @@ CSS 建立了不同透视距离的 class，还包括容器盒、立方体本身 } /* Make the table a little nicer */ -th, p, td { - background-color: #EEEEEE; +th, +p, +td { + background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; diff --git a/files/zh-cn/web/css/place-content/index.md b/files/zh-cn/web/css/place-content/index.md index 8a4db1c93f7d3d..ba1e89d85c8307 100644 --- a/files/zh-cn/web/css/place-content/index.md +++ b/files/zh-cn/web/css/place-content/index.md @@ -93,20 +93,23 @@ place-content: unset; ``` ```html hidden -writing-mode: - -;
+ ;
-direction: ;
-place-content: @@ -137,29 +140,33 @@ place-content: unset; - ; + ; ``` ```js hidden function update() { - document.getElementById("container").style.placeContent = `${document.getElementById("alignContentAlignment").value} ` - + `${document.getElementById("justifyContentAlignment").value}`; + document.getElementById("container").style.placeContent = + `${document.getElementById("alignContentAlignment").value} ` + + `${document.getElementById("justifyContentAlignment").value}`; } const alignContentAlignment = document.getElementById("alignContentAlignment"); alignContentAlignment.addEventListener("change", update); -const justifyContentAlignment = document.getElementById("justifyContentAlignment"); +const justifyContentAlignment = document.getElementById( + "justifyContentAlignment", +); justifyContentAlignment.addEventListener("change", update); const writingM = document.getElementById("writingMode"); writingM.addEventListener("change", (evt) => { - document.getElementById("container").style.writingMode = evt.target.value; + document.getElementById("container").style.writingMode = evt.target.value; }); const direction = document.getElementById("direction"); direction.addEventListener("change", (evt) => { - document.getElementById("container").style.direction = evt.target.value; + document.getElementById("container").style.direction = evt.target.value; }); ``` diff --git a/files/zh-cn/web/css/place-items/index.md b/files/zh-cn/web/css/place-items/index.md index 4b7731e8830534..a0e4960b8a658d 100644 --- a/files/zh-cn/web/css/place-items/index.md +++ b/files/zh-cn/web/css/place-items/index.md @@ -195,15 +195,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.placeItems = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ``` @@ -212,7 +212,7 @@ display.addEventListener('change', function (evt) { ```css #container { - height:200px; + height: 200px; width: 240px; place-items: center; /* You can change this value by selecting another option in the list */ background-color: #8c8c8c; diff --git a/files/zh-cn/web/css/pointer-events/index.md b/files/zh-cn/web/css/pointer-events/index.md index 5a69d706b3be21..51f3dc248364f5 100644 --- a/files/zh-cn/web/css/pointer-events/index.md +++ b/files/zh-cn/web/css/pointer-events/index.md @@ -12,13 +12,13 @@ slug: Web/CSS/pointer-events pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ -pointer-events: visibleFill; /* SVG only */ -pointer-events: visibleStroke; /* SVG only */ -pointer-events: visible; /* SVG only */ -pointer-events: painted; /* SVG only */ -pointer-events: fill; /* SVG only */ -pointer-events: stroke; /* SVG only */ -pointer-events: all; /* SVG only */ +pointer-events: visibleFill; /* SVG only */ +pointer-events: visibleStroke; /* SVG only */ +pointer-events: visible; /* SVG only */ +pointer-events: painted; /* SVG only */ +pointer-events: fill; /* SVG only */ +pointer-events: stroke; /* SVG only */ +pointer-events: all; /* SVG only */ /* Global values */ pointer-events: inherit; @@ -88,13 +88,14 @@ img { ```html ``` ```css -a[href="http://example.com"] { +a[href="http://example.com"] +{ pointer-events: none; } ``` diff --git a/files/zh-cn/web/css/position/index.md b/files/zh-cn/web/css/position/index.md index 142356933347c8..88a5612d49ff57 100644 --- a/files/zh-cn/web/css/position/index.md +++ b/files/zh-cn/web/css/position/index.md @@ -161,22 +161,30 @@ span { ```html

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

One
@@ -214,7 +222,10 @@ span { 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如： ```css -#one { position: sticky; top: 10px; } +#one { + position: sticky; + top: 10px; +} ``` 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。 @@ -271,11 +282,14 @@ dl { } dt { - background: #B8C1C8; - border-bottom: 1px solid #989EA4; - border-top: 1px solid #717D85; - color: #FFF; - font: bold 18px/21px Helvetica, Arial, sans-serif; + background: #b8c1c8; + border-bottom: 1px solid #989ea4; + border-top: 1px solid #717d85; + color: #fff; + font: + bold 18px/21px Helvetica, + Arial, + sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; @@ -284,14 +298,17 @@ dt { } dd { - font: bold 20px/45px Helvetica, Arial, sans-serif; + font: + bold 20px/45px Helvetica, + Arial, + sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { - border-top: 1px solid #CCC + border-top: 1px solid #ccc; } ``` diff --git a/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md index c417c4f810f8fb..aacea58e1c7155 100644 --- a/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md @@ -33,16 +33,16 @@ slug: Web/CSS/Privacy_and_the_:visited_selector ```css :link { - outline: 1px dotted blue; - background-color: white; - /* background-color 的默认值为 'transparent'。 + outline: 1px dotted blue; + background-color: white; + /* background-color 的默认值为 'transparent'。 你必须指定一个不同值，否则无法应用对 :visited 的修改 */ } :visited { - outline-color: orange; /* 已访问链接的轮廓为橘色 */ - color: yellow; /* 已访问链接的文本为黄色 */ - background-color: green; /* 已访问链接的背景为绿色 */ + outline-color: orange; /* 已访问链接的轮廓为橘色 */ + color: yellow; /* 已访问链接的文本为黄色 */ + background-color: green; /* 已访问链接的背景为绿色 */ } ``` diff --git a/files/zh-cn/web/css/pseudo-classes/index.md b/files/zh-cn/web/css/pseudo-classes/index.md index d868005636bdba..b1db4981ad85f2 100644 --- a/files/zh-cn/web/css/pseudo-classes/index.md +++ b/files/zh-cn/web/css/pseudo-classes/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/Pseudo-classes {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) ***伪类***是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 {{CSSxRef(":hover")}} 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。 +[CSS](/zh-CN/docs/Web/CSS) **_伪类_**是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 {{CSSxRef(":hover")}} 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。 ```css /* 用户的指针悬停在其上的任何按钮 */ diff --git a/files/zh-cn/web/css/quotes/index.md b/files/zh-cn/web/css/quotes/index.md index bfd1a64d67799c..2c28a63668c331 100644 --- a/files/zh-cn/web/css/quotes/index.md +++ b/files/zh-cn/web/css/quotes/index.md @@ -14,8 +14,8 @@ slug: Web/CSS/quotes quotes: none; /* values */ -quotes: "«" "»"; /* Set open-quote and close-quote to the French quotation marks */ -quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */ +quotes: "«" "»"; /* Set open-quote and close-quote to the French quotation marks */ +quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */ /* Global values */ quotes: inherit; @@ -71,19 +71,26 @@ q:after { ```html
Ceci est une citation française. -
-
-
- Это русская цитата -
-
-
- Dies ist ein deutsches Zitat -
-
-
- This is an English quote. -
+
+
+
+ Это русская цитата +
+
+
+ Dies ist ein deutsches Zitat +
+
+
+ This is an English quote. +
+
+
+
+
+
+
+
``` #### CSS diff --git a/files/zh-cn/web/css/ratio/index.md b/files/zh-cn/web/css/ratio/index.md index af44ee27e79ab8..39be5bb4b1cd31 100644 --- a/files/zh-cn/web/css/ratio/index.md +++ b/files/zh-cn/web/css/ratio/index.md @@ -25,8 +25,8 @@ slug: Web/CSS/ratio ( ( -| | 比 | 用法 | -| ---------------------------------------------------------- | --------------------------------------------- | ---------------------------------------- | +| | 比 | 用法 | +| ----------------------------------- | --------------------------------------------- | ---------------------------------------- | | ![Ratio4_3.png](ratio4_3.png) | `4/3` | 在 20 传统电视制式格式。 | | ![Ratio16_9.png](ratio16_9.png) | `16/9` | 现代"宽屏”电视格式。 | | ![Ratio1_1.85.png](ratio1_1.85.png) | `185/100`= `91/50` _(不允许非整数除数和除数)_ | 自 20 世纪 60 年代以来最常见的电影格式。 | diff --git a/files/zh-cn/web/css/repeat/index.md b/files/zh-cn/web/css/repeat/index.md index 5068f85d992b23..82a3b51cd26b54 100644 --- a/files/zh-cn/web/css/repeat/index.md +++ b/files/zh-cn/web/css/repeat/index.md @@ -93,21 +93,11 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ```html
-
- This item is 50 pixels wide. -
-
- Item with flexible width. -
-
- This item is 50 pixels wide. -
-
- Item with flexible width. -
-
- Inflexible item of 100 pixels width. -
+
This item is 50 pixels wide.
+
Item with flexible width.
+
This item is 50 pixels wide.
+
Item with flexible width.
+
Inflexible item of 100 pixels width.
``` diff --git a/files/zh-cn/web/css/resize/index.md b/files/zh-cn/web/css/resize/index.md index 16cee6910d3f76..0b2eb5fe23710b 100644 --- a/files/zh-cn/web/css/resize/index.md +++ b/files/zh-cn/web/css/resize/index.md @@ -91,7 +91,8 @@ textarea { ```html

- 此段落可在各个方向上调整尺寸，这是因为在此元素上 CSS `resize` 属性设置为 `both`。 + 此段落可在各个方向上调整尺寸，这是因为在此元素上 CSS `resize` 属性设置为 + `both`。

``` diff --git a/files/zh-cn/web/css/right/index.md b/files/zh-cn/web/css/right/index.md index 88a4e120591882..b5a537bb35b7d4 100644 --- a/files/zh-cn/web/css/right/index.md +++ b/files/zh-cn/web/css/right/index.md @@ -40,6 +40,7 @@ right: unset; ### 取值 - {{cssxref("<length>")}} + - : 可以是负的，正的 或者 null {{cssxref("<length>")}} 表示： - 对于**绝对定位的元素**，元素右外边距边界与其包含块右边界之间的偏移。 @@ -48,6 +49,7 @@ right: unset; - {{cssxref("<percentage>")}} - : 代表元素包含块的宽度的百分比 {{cssxref("<percentage>")}}。 - `auto` + - : 这个关键字表示： - 对于绝对定位元素，元素将忽略此属性而以 {{ Cssxref("left") }} 属性为准，如果此时设置 `width: auto`，将基于内容需要的宽度设置宽度；如果 `left` 也为 `auto` 的话，元素的水平位置就是它假如作为静态（即 static）元素时该在的位置。 @@ -66,7 +68,7 @@ right: unset; #example_3 { width: 100px; height: 100px; - background-color: #FFC7E4; + background-color: #ffc7e4; position: relative; top: 20px; left: 20px; @@ -75,7 +77,7 @@ right: unset; #example_4 { width: 100px; height: 100px; - background-color: #FFD7C2; + background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; diff --git a/files/zh-cn/web/css/scroll-behavior/index.md b/files/zh-cn/web/css/scroll-behavior/index.md index 597235dfbad060..204725fd4e6718 100644 --- a/files/zh-cn/web/css/scroll-behavior/index.md +++ b/files/zh-cn/web/css/scroll-behavior/index.md @@ -62,7 +62,8 @@ a { width: 50px; text-decoration: none; } -nav, scroll-container { +nav, +scroll-container { display: block; margin: 0 auto; text-align: center; diff --git a/files/zh-cn/web/css/scroll-margin/index.md b/files/zh-cn/web/css/scroll-margin/index.md index f24656395904aa..1ad7b11aa11863 100644 --- a/files/zh-cn/web/css/scroll-margin/index.md +++ b/files/zh-cn/web/css/scroll-margin/index.md @@ -18,7 +18,7 @@ slug: Web/CSS/scroll-margin ```css /* values */ scroll-margin: 10px; -scroll-margin: 1em .5em 1em 1em; +scroll-margin: 1em 0.5em 1em 1em; /* Global values */ scroll-margin: inherit; diff --git a/files/zh-cn/web/css/scroll-snap-type/index.md b/files/zh-cn/web/css/scroll-snap-type/index.md index a5ccfb9fe382ea..99d3748f019767 100644 --- a/files/zh-cn/web/css/scroll-snap-type/index.md +++ b/files/zh-cn/web/css/scroll-snap-type/index.md @@ -68,69 +68,69 @@ scroll-snap-type: unset; ```html
-
-
X Mand. LTR
-
2
-
3
-
4
-
5
-
- -
-
X Prox. LTR
-
2
-
3
-
4
-
5
-
- -
-
Y Mand. LTR
-
2
-
3
-
4
-
5
-
- -
-
Y Prox. LTR
-
2
-
3
-
4
-
5
-
- -
-
X Mand. RTL
-
2
-
3
-
4
-
5
-
- -
-
X Prox. RTL
-
2
-
3
-
4
-
5
-
- -
-
Y Mand. RTL
-
2
-
3
-
4
-
5
-
- -
-
Y Prox. RTL
-
2
-
3
-
4
-
5
-
+
+
X Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
X Prox. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. RTL
+
2
+
3
+
4
+
5
+
``` @@ -138,7 +138,9 @@ scroll-snap-type: unset; ```css /* setup */ -html, body, .holster { +html, +body, +.holster { height: 100%; } .holster { @@ -210,11 +212,11 @@ html, body, .holster { } /* coloration */ .container > div:nth-child(even) { - background-color: #87EA87; + background-color: #87ea87; } .container > div:nth-child(odd) { - background-color: #87CCEA; + background-color: #87ccea; } ``` diff --git a/files/zh-cn/web/css/scrollbar-color/index.md b/files/zh-cn/web/css/scrollbar-color/index.md index 5f38ec9debf499..1fd042f4b908b9 100644 --- a/files/zh-cn/web/css/scrollbar-color/index.md +++ b/files/zh-cn/web/css/scrollbar-color/index.md @@ -22,7 +22,7 @@ scrollbar-color: dark; scrollbar-color: light; /* values */ -scrollbar-color: rebeccapurple green; /* Two valid colors. +scrollbar-color: rebeccapurple green; /* Two valid colors. The first applies to the thumb of the scrollbar, the second to the track. */ /* Global values */ @@ -37,7 +37,7 @@ scrollbar-color: unset; - : 定义滚动条的颜色。 - | 值 | 描述 | + | 值 | 描述 | | ----------------- | -------------------------------------------------------------------------------------- | | `auto` | 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。 | | `dark` | 显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。 | @@ -66,7 +66,13 @@ scrollbar-color: unset; ### HTML ```html -
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini. +
``` ### 结果 diff --git a/files/zh-cn/web/css/selector_list/index.md b/files/zh-cn/web/css/selector_list/index.md index 5a4a3e395bd51b..02ccf3a5544aca 100644 --- a/files/zh-cn/web/css/selector_list/index.md +++ b/files/zh-cn/web/css/selector_list/index.md @@ -44,7 +44,12 @@ div { 此示例显示了将选择器编组进一个以逗号分隔的单行列表。 ```css -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: helvetica; } ``` @@ -85,7 +90,9 @@ h3 { ``` ```css -h1, h2:invalid-pseudo, h3 { +h1, +h2:invalid-pseudo, +h3 { font-family: sans-serif; } ``` diff --git a/files/zh-cn/web/css/shape-image-threshold/index.md b/files/zh-cn/web/css/shape-image-threshold/index.md index d601de60d5c7f0..a39ef2285938af 100644 --- a/files/zh-cn/web/css/shape-image-threshold/index.md +++ b/files/zh-cn/web/css/shape-image-threshold/index.md @@ -48,14 +48,14 @@ shape-image-threshold: unset;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint - facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat - adipisci, libero quae nihil porro debitis laboriosam inventore animi - impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque - a mollitia dicta repudiandae illum exercitationem aliquam repellendus - ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto - nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit - accusamus iusto dolore, at provident eius alias maxime pariatur non - deleniti ipsum sequi rem eveniet laboriosam magni expedita? + facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, + libero quae nihil porro debitis laboriosam inventore animi impedit nostrum + nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta + repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo + eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea + eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius + alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni + expedita?

``` @@ -66,10 +66,8 @@ shape-image-threshold: unset; width: 150px; height: 150px; float: left; - background-image: linear-gradient(30deg, black, transparent 80%, - transparent); - shape-outside: linear-gradient(30deg, black, transparent 80%, - transparent); + background-image: linear-gradient(30deg, black, transparent 80%, transparent); + shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } ``` diff --git a/files/zh-cn/web/css/shape-margin/index.md b/files/zh-cn/web/css/shape-margin/index.md index e3c1a3dd5dbfd3..032e62f822e4ec 100644 --- a/files/zh-cn/web/css/shape-margin/index.md +++ b/files/zh-cn/web/css/shape-margin/index.md @@ -44,14 +44,15 @@ shape-margin: unset; ```html
-
-We are not quite sure of any one thing in biology; our knowledge of geology -is relatively very slight, and the economic laws of society are -uncertain to every one except some individual who attempts to set them -forth; but before the world was fashioned the square on the hypotenuse -was equal to the sum of the squares on the other two sides of a right -triangle, and it will be so after this world is dead; and the inhabitant -of Mars, if one exists, probably knows its truth as we know it.
+
+ We are not quite sure of any one thing in biology; our knowledge of geology is + relatively very slight, and the economic laws of society are uncertain to + every one except some individual who attempts to set them forth; but before + the world was fashioned the square on the hypotenuse was equal to the sum of + the squares on the other two sides of a right triangle, and it will be so + after this world is dead; and the inhabitant of Mars, if one exists, probably + knows its truth as we know it. + ``` #### CSS diff --git a/files/zh-cn/web/css/shape-outside/index.md b/files/zh-cn/web/css/shape-outside/index.md index f8b509578d0755..107823fc5e73b1 100644 --- a/files/zh-cn/web/css/shape-outside/index.md +++ b/files/zh-cn/web/css/shape-outside/index.md @@ -85,10 +85,9 @@ shape-outside: unset;

- Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. + Sometimes a web page's text content appears to be funneling your attention + towards a spot on the page to drive you to follow a particular link. + Sometimes you don't notice.

``` diff --git a/files/zh-cn/web/css/shorthand_properties/index.md b/files/zh-cn/web/css/shorthand_properties/index.md index 3d4097e750ad1b..d3a574d6c83380 100644 --- a/files/zh-cn/web/css/shorthand_properties/index.md +++ b/files/zh-cn/web/css/shorthand_properties/index.md @@ -89,7 +89,7 @@ background: #000 url(images/bg.gif) no-repeat top right; ```css font-style: italic; font-weight: bold; -font-size: .8em; +font-size: 0.8em; line-height: 1.2; font-family: Arial, sans-serif; ``` @@ -97,7 +97,9 @@ font-family: Arial, sans-serif; 可以简写成下面的： ```css -font: italic bold .8em/1.2 Arial, sans-serif; +font: + italic bold 0.8em/1.2 Arial, + sans-serif; ``` 这个简写声明实际上等价于以上普通属性再加上 `font-variant: normal`、`font-size-adjust: none` 和 `font-stretch: normal`。 @@ -170,4 +172,5 @@ CSS 提供了一个通用的简写属性 {{cssxref("all")}}，它可以应用于 - [属性值定义语法](/zh-CN/docs/Web/CSS/Value_definition_syntax) - [可替换元素](/zh-CN/docs/Web/CSS/Replaced_element) + - 简写属性：{{cssxref("all")}}、{{cssxref("animation")}}、{{cssxref("background")}}、{{cssxref("border")}}、{{cssxref("border-block-end")}}、{{cssxref("border-block-start")}}、{{cssxref("border-bottom")}}、{{cssxref("border-color")}}、{{cssxref("border-image")}}、{{cssxref("border-inline-end")}}、{{cssxref("border-inline-start")}}、{{cssxref("border-left")}}、{{cssxref("border-radius")}}、{{cssxref("border-right")}}、{{cssxref("border-style")}}、{{cssxref("border-top")}}、{{cssxref("border-width")}}、{{cssxref("column-rule")}}、{{cssxref("columns")}}、{{cssxref("flex")}}、{{cssxref("flex-flow")}}、{{cssxref("font")}}、{{cssxref("gap")}}、{{cssxref("grid")}}、{{cssxref("grid-area")}}、{{cssxref("grid-column")}}、{{cssxref("grid-row")}}、{{cssxref("grid-template")}}、{{cssxref("list-style")}}、{{cssxref("margin")}}、{{cssxref("mask")}}、{{cssxref("offset")}}、{{cssxref("outline")}}、{{cssxref("overflow")}}、{{cssxref("padding")}}、{{cssxref("place-content")}}、{{cssxref("place-items")}}、{{cssxref("place-self")}}、{{cssxref("scroll-margin")}}、{{cssxref("scroll-padding")}}、{{cssxref("text-decoration")}}、{{cssxref("text-emphasis")}}、{{cssxref("transition")}} diff --git a/files/zh-cn/web/css/specificity/index.md b/files/zh-cn/web/css/specificity/index.md index 8f30257c63fe9b..e0fd9fb9a666b2 100644 --- a/files/zh-cn/web/css/specificity/index.md +++ b/files/zh-cn/web/css/specificity/index.md @@ -46,26 +46,36 @@ slug: Web/CSS/Specificity 1. 更好地利用 CSS 级联属性 2. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。 - ```html -
- Text -
- ``` - - ```css - div#test span { color: green; } - div span { color: blue; } - span { color: red; } - ``` - - 无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则） + ```html +
+ Text +
+ ``` + + ```css + div#test span { + color: green; + } + div span { + color: blue; + } + span { + color: red; + } + ``` + + 无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则） 3. 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。 - ```css - #myId#myId span { color: yellow; } - .myClass.myClass span { color: orange; } - ``` + ```css + #myId#myId span { + color: yellow; + } + .myClass.myClass span { + color: orange; + } + ``` #### 什么的情况下可以使用 `!important`： @@ -110,15 +120,23 @@ A) 很简单，只需再添加一条 带 `!important` 的 CSS 规则，再给这 一些拥有更高优先级的例子： ```css - table td { height: 50px !important; } -.myTable td { height: 50px !important; } -#myTable td { height: 50px !important; } +table td { + height: 50px !important; +} +.myTable td { + height: 50px !important; +} +#myTable td { + height: 50px !important; +} ``` B) 或者使用相同的选择器，但是置于已有的样式之后： ```css -td { height: 50px !important; } +td { + height: 50px !important; +} ``` C) 或干脆改写原来的规则，以避免使用 `!important`。 @@ -208,8 +226,14 @@ div p { 将其应用于以下的 HTML 时： ```html hidden -
-⚠️ Your browser doesn't support the :where() pseudo-class. +
+ ⚠️ Your browser doesn't support the + :where() + pseudo-class.
``` diff --git a/files/zh-cn/web/css/system-color/index.md b/files/zh-cn/web/css/system-color/index.md index 09e41435d201dc..b4f5f32badd25c 100644 --- a/files/zh-cn/web/css/system-color/index.md +++ b/files/zh-cn/web/css/system-color/index.md @@ -123,7 +123,9 @@ slug: Web/CSS/system-color .button { border: 0; padding: 10px; - box-shadow: -2px -2px 5px gray, 2px 2px 5px gray; + box-shadow: + -2px -2px 5px gray, + 2px 2px 5px gray; } @media (forced-colors: active) { diff --git a/files/zh-cn/web/css/text-align-last/index.md b/files/zh-cn/web/css/text-align-last/index.md index 5735f9f392724d..914a4fc0452600 100644 --- a/files/zh-cn/web/css/text-align-last/index.md +++ b/files/zh-cn/web/css/text-align-last/index.md @@ -57,7 +57,11 @@ text-align-last: unset; ## 示例 ```html hidden -

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.

+

+ 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. +

``` ```css diff --git a/files/zh-cn/web/css/text-decoration-color/index.md b/files/zh-cn/web/css/text-decoration-color/index.md index ea0681bf65a8c1..622ef3184842a1 100644 --- a/files/zh-cn/web/css/text-decoration-color/index.md +++ b/files/zh-cn/web/css/text-decoration-color/index.md @@ -41,8 +41,10 @@ text-decoration-color: unset; ## 示例 ```html -

This paragraph has some erroneous text - inside it that I want to call attention to.

+

+ This paragraph has some erroneous text inside it that I want to call + attention to. +

``` ```css diff --git a/files/zh-cn/web/css/text-decoration-line/index.md b/files/zh-cn/web/css/text-decoration-line/index.md index 5ae272ca6c0f84..da0dd896411b08 100644 --- a/files/zh-cn/web/css/text-decoration-line/index.md +++ b/files/zh-cn/web/css/text-decoration-line/index.md @@ -14,8 +14,8 @@ text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; -text-decoration-line: underline overline; /* Two decoration lines */ -text-decoration-line: overline underline line-through; /* Multiple decoration lines */ +text-decoration-line: underline overline; /* Two decoration lines */ +text-decoration-line: overline underline line-through; /* Multiple decoration lines */ /* Global values */ text-decoration-line: inherit; diff --git a/files/zh-cn/web/css/text-decoration-style/index.md b/files/zh-cn/web/css/text-decoration-style/index.md index 007bf74a816ad6..f150e751d2a535 100644 --- a/files/zh-cn/web/css/text-decoration-style/index.md +++ b/files/zh-cn/web/css/text-decoration-style/index.md @@ -52,12 +52,12 @@ text-decoration-style: unset; ```css .example { - -moz-text-decoration-line: underline; - -moz-text-decoration-style: wavy; - -moz-text-decoration-color: red; - -webkit-text-decoration-line: underline; - -webkit-text-decoration-style: wavy; - -webkit-text-decoration-color: red; + -moz-text-decoration-line: underline; + -moz-text-decoration-style: wavy; + -moz-text-decoration-color: red; + -webkit-text-decoration-line: underline; + -webkit-text-decoration-style: wavy; + -webkit-text-decoration-color: red; } ``` diff --git a/files/zh-cn/web/css/text-decoration/index.md b/files/zh-cn/web/css/text-decoration/index.md index 63ca6f1668e3d6..32d2d595035780 100644 --- a/files/zh-cn/web/css/text-decoration/index.md +++ b/files/zh-cn/web/css/text-decoration/index.md @@ -94,7 +94,10 @@ text-decoration: unset;

此文本下方有一行线。

此文本上面有一行线。

此文本有一条线穿过它。

-

此链接不会具有下划线，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接

+

+ 此链接不会具有下划线，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接 +

此文本在其上方和下方都有线条。

在浏览器支持的情况下，此文本具有非常粗的紫色下划线。

此文本可能会为你闪烁，具体取决于你使用的浏览器。

diff --git a/files/zh-cn/web/css/text-indent/index.md b/files/zh-cn/web/css/text-indent/index.md index 4c73a50df656f3..4df71bf4af9998 100644 --- a/files/zh-cn/web/css/text-indent/index.md +++ b/files/zh-cn/web/css/text-indent/index.md @@ -50,8 +50,10 @@ text-indent: unset; ### HTML ```html -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. +

``` ### CSS diff --git a/files/zh-cn/web/css/text-justify/index.md b/files/zh-cn/web/css/text-justify/index.md index fc46e10d5eb849..cfaad4da6e0a44 100644 --- a/files/zh-cn/web/css/text-justify/index.md +++ b/files/zh-cn/web/css/text-justify/index.md @@ -41,11 +41,36 @@ text-justify: distribute; /* 已被废除，不提倡使用 */ ## 示例 ```html hidden -

text-justify: none —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-

text-justify: auto —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-

text-justify: distribute —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-

text-justify: inter-word —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-

text-justify: inter-character —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

+

+ text-justify: none —
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id + mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat + justo id, feugiat leo. Cras eu elementum dui. +

+

+ text-justify: auto —
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id + mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat + justo id, feugiat leo. Cras eu elementum dui. +

+

+ text-justify: distribute —
Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, + dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, + consequat justo id, feugiat leo. Cras eu elementum dui. +

+

+ text-justify: inter-word —
Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, + dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, + consequat justo id, feugiat leo. Cras eu elementum dui. +

+

+ text-justify: inter-character —
Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, + dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, + consequat justo id, feugiat leo. Cras eu elementum dui. +

``` ```css diff --git a/files/zh-cn/web/css/text-overflow/index.md b/files/zh-cn/web/css/text-overflow/index.md index 2f5d03fd9780e5..513f0b1fb6d16e 100644 --- a/files/zh-cn/web/css/text-overflow/index.md +++ b/files/zh-cn/web/css/text-overflow/index.md @@ -73,21 +73,33 @@ text-overflow: unset;

Left to right text

clip
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + 

ellipsis
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + 

" [..]"
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

Right to left text

clip
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + 

ellipsis
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + 

" [..]"
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

``` @@ -142,13 +154,21 @@ body { ```html 
clip clip
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

clip ellipsis
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

ellipsis ellipsis
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

ellipsis " [..]"
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

``` #### CSS diff --git a/files/zh-cn/web/css/text-rendering/index.md b/files/zh-cn/web/css/text-rendering/index.md index 1b87c5cbb40dcf..c81b0f4f336e75 100644 --- a/files/zh-cn/web/css/text-rendering/index.md +++ b/files/zh-cn/web/css/text-rendering/index.md @@ -41,6 +41,7 @@ text-rendering: unset; - `optimizeLegibility` - : 浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度。它会使字间距和连字有效。**该属性值在移动设备上会造成比较明显的性能问题**，详细查看 [text-rendering](https://css-tricks.com/almanac/properties/t/text-rendering/)。 - `geometricPrecision` + - : 浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。 对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。 @@ -55,8 +56,12 @@ text-rendering: unset; /* make sure all fonts in the HTML document display in all its glory, but avoid inadequate ligatures in class foo elements */ -body { text-rendering: optimizeLegibility; } -.foo { text-rendering: optimizeSpeed; } +body { + text-rendering: optimizeLegibility; +} +.foo { + text-rendering: optimizeSpeed; +} ``` #### Live Example diff --git a/files/zh-cn/web/css/text-shadow/index.md b/files/zh-cn/web/css/text-shadow/index.md index 35fdbb23f2113d..ba9f0dd1f741a1 100644 --- a/files/zh-cn/web/css/text-shadow/index.md +++ b/files/zh-cn/web/css/text-shadow/index.md @@ -65,14 +65,15 @@ text-shadow: unset; ```css .red-text-shadow { - text-shadow: red 0 -2px; + text-shadow: red 0 -2px; } ``` ```html

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo - inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo.

``` @@ -82,16 +83,25 @@ text-shadow: unset; ```css .white-with-blue-shadow { - text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; - color: white; - font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif; + text-shadow: + 1px 1px 2px black, + 0 0 1em blue, + 0 0 0.2em blue; + color: white; + font: + 1.5em Georgia, + "Bitstream Charter", + "URW Bookman L", + "Century Schoolbook L", + serif; } ``` ```html

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore - veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo.

``` diff --git a/files/zh-cn/web/css/text-transform/index.md b/files/zh-cn/web/css/text-transform/index.md index 2de6374d161918..8ca6e3b174f308 100644 --- a/files/zh-cn/web/css/text-transform/index.md +++ b/files/zh-cn/web/css/text-transform/index.md @@ -214,7 +214,7 @@ strong {

``` -这个示例展示了荷兰语双字母字符 *ij* 必须像一个单一的字母一样处理。 +这个示例展示了荷兰语双字母字符 _ij_ 必须像一个单一的字母一样处理。 {{ EmbedLiveSample('使用“capitalize”（荷兰语 ij 双字母字符）', '100%', '100px') }} @@ -267,10 +267,12 @@ strong { span { text-transform: uppercase; } -strong { float: right; } +strong { + float: right; +} ``` -这个示例展示了希腊元音除了不连读的 *eta* 之外，应该没有重音，而元音对中第一个元音的重音变成了第二个元音的重音。 +这个示例展示了希腊元音除了不连读的 _eta_ 之外，应该没有重音，而元音对中第一个元音的重音变成了第二个元音的重音。 {{ EmbedLiveSample('使用“uppercase”（希腊语元音）', '100%', '100px') }} diff --git a/files/zh-cn/web/css/touch-action/index.md b/files/zh-cn/web/css/touch-action/index.md index 3806d25ef72a69..a31b68ad88d25e 100644 --- a/files/zh-cn/web/css/touch-action/index.md +++ b/files/zh-cn/web/css/touch-action/index.md @@ -82,7 +82,7 @@ touch-action 属性可以被指定为： **触摸动作**也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。 -```html +```css html { touch-action: manipulation; } diff --git a/files/zh-cn/web/css/transform-function/index.md b/files/zh-cn/web/css/transform-function/index.md index 29864e72d00f4d..bc4995e30fe8a9 100644 --- a/files/zh-cn/web/css/transform-function/index.md +++ b/files/zh-cn/web/css/transform-function/index.md @@ -136,19 +136,19 @@ main { #### JavaScript ```js -const selectElem = document.querySelector('select'); -const example = document.querySelector('#example-element'); +const selectElem = document.querySelector("select"); +const example = document.querySelector("#example-element"); -selectElem.addEventListener('change', () => { - if (selectElem.value === 'Choose a function') { +selectElem.addEventListener("change", () => { + if (selectElem.value === "Choose a function") { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`; setTimeout(() => { - example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; - }, 2000) + example.style.transform = "rotate3d(1, 1, 1, 30deg)"; + }, 2000); } -}) +}); ``` #### 结果 diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.md b/files/zh-cn/web/css/transform-function/matrix3d/index.md index 227f3a315d94c3..c4981003cfc56a 100644 --- a/files/zh-cn/web/css/transform-function/matrix3d/index.md +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.md @@ -72,9 +72,9 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ```html
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. -Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere -necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit + soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut + quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
``` @@ -91,7 +91,6 @@ body { flex-flow: row wrap; justify-content: center; align-content: center; - } .foo { width: 50%; @@ -102,7 +101,7 @@ body { text-align: center; font-family: system-ui, sans-serif; font-size: 14px; - /* Setting up animation for better demonstration */ + /* Setting up animation for better demonstration */ animation: MotionScale 2s alternate linear infinite; } @@ -117,29 +116,13 @@ body { Translates every Z point by 0 Scales down by 10% */ - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - -50,-100,0,1.1 - ); - + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1); } 50% { - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,0.9 - ); + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9); } to { - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 50,100,0,1.1 - ) + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1); } } ``` diff --git a/files/zh-cn/web/css/transform-function/translate/index.md b/files/zh-cn/web/css/transform-function/translate/index.md index 49feb022b9b701..3edec9a14d743f 100644 --- a/files/zh-cn/web/css/transform-function/translate/index.md +++ b/files/zh-cn/web/css/transform-function/translate/index.md @@ -118,7 +118,9 @@ div { } .moved { - transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */ + transform: translate( + 10px + ); /* Equal to: translateX(10px) or translate(10px, 0) */ background-color: pink; } ``` diff --git a/files/zh-cn/web/css/transform-function/translate3d/index.md b/files/zh-cn/web/css/transform-function/translate3d/index.md index 0551584586b867..9864057a8affa3 100644 --- a/files/zh-cn/web/css/transform-function/translate3d/index.md +++ b/files/zh-cn/web/css/transform-function/translate3d/index.md @@ -80,7 +80,7 @@ p { } .transformed { - transform: perspective(500px) translate3d(10px,0px,0px); + transform: perspective(500px) translate3d(10px, 0px, 0px); /* equivalent to perspective(500px) translateX(10px)*/ background-color: blue; } @@ -110,7 +110,7 @@ p { } .transformed { - transform: perspective(500px) translate3d(10px,0px,100px); + transform: perspective(500px) translate3d(10px, 0px, 100px); background-color: blue; } ``` diff --git a/files/zh-cn/web/css/transform/index.md b/files/zh-cn/web/css/transform/index.md index 2e41faeaf9b2e4..c050e3e3ffdc6e 100644 --- a/files/zh-cn/web/css/transform/index.md +++ b/files/zh-cn/web/css/transform/index.md @@ -16,7 +16,7 @@ CSS **`transform`** 属性允许你旋转，缩放，倾斜或平移给定元素 transform: none; /* Function values */ -transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); +transform: matrix(1, 2, 3, 4, 5, 6); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); @@ -27,12 +27,12 @@ transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); -transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); +transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); -transform: rotate3d(1, 2.0, 3.0, 10deg); +transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); diff --git a/files/zh-cn/web/css/transition-property/index.md b/files/zh-cn/web/css/transition-property/index.md index 4e2faac11a9220..3727e9823a03bb 100644 --- a/files/zh-cn/web/css/transition-property/index.md +++ b/files/zh-cn/web/css/transition-property/index.md @@ -24,7 +24,10 @@ transition-property: sliding-vertically; transition-property: test1; transition-property: test1, animation4; transition-property: all, height, all; -transition-property: all, -moz-specific, sliding; +transition-property: + all, + -moz-specific, + sliding; /* Global values */ transition-property: inherit; diff --git a/files/zh-cn/web/css/transition/index.md b/files/zh-cn/web/css/transition/index.md index 67ffb63e52c4ac..efce546677918d 100644 --- a/files/zh-cn/web/css/transition/index.md +++ b/files/zh-cn/web/css/transition/index.md @@ -28,7 +28,9 @@ transition: margin-right 4s ease-in-out; transition: margin-right 4s ease-in-out 1s; /* Apply to 2 properties */ -transition: margin-right 4s, color 1s; +transition: + margin-right 4s, + color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; diff --git a/files/zh-cn/web/css/unicode-bidi/index.md b/files/zh-cn/web/css/unicode-bidi/index.md index a79248a31aeecb..3ed719e7c3a330 100644 --- a/files/zh-cn/web/css/unicode-bidi/index.md +++ b/files/zh-cn/web/css/unicode-bidi/index.md @@ -63,12 +63,8 @@ unicode-bidi: unset; ### HTML ```html -
- A line of text -
-
- Another line of text -
+
A line of text
+
Another line of text
``` ### 结果 diff --git a/files/zh-cn/web/css/universal_selectors/index.md b/files/zh-cn/web/css/universal_selectors/index.md index 77ad995c3cef2a..73dee65348a4c2 100644 --- a/files/zh-cn/web/css/universal_selectors/index.md +++ b/files/zh-cn/web/css/universal_selectors/index.md @@ -18,9 +18,15 @@ slug: Web/CSS/Universal_selectors ## 示例 ```css -*[lang^=en]{color:green;} -*.warning {color:red;} -*#maincontent {border: 1px solid blue;} +*[lang^="en"] { + color: green; +} +*.warning { + color: red; +} +*#maincontent { + border: 1px solid blue; +} ``` 上面的 CSS 作用于下面的 HTML: diff --git a/files/zh-cn/web/css/url/index.md b/files/zh-cn/web/css/url/index.md index 9a6780e12f7a8c..46762eea0aacba 100644 --- a/files/zh-cn/web/css/url/index.md +++ b/files/zh-cn/web/css/url/index.md @@ -41,11 +41,15 @@ URL 可以使用单引号或双引号包含，也可以直接书写。可以在 ## 示例 ```css -.topbanner { background: url("topbanner.png") #00D no-repeat fixed; } +.topbanner { + background: url("topbanner.png") #00d no-repeat fixed; +} ``` ```css -ul { list-style: square url(http://www.example.com/redball.png) } +ul { + list-style: square url(http://www.example.com/redball.png); +} ``` ## 规范 diff --git a/files/zh-cn/web/css/user-select/index.md b/files/zh-cn/web/css/user-select/index.md index fd848cf9250f82..55960ea28ae5d0 100644 --- a/files/zh-cn/web/css/user-select/index.md +++ b/files/zh-cn/web/css/user-select/index.md @@ -32,6 +32,7 @@ user-select: unset; ### 取值 - `none` + - : 元素及其子元素的文本不可选中。请注意，{{domxref("Selection")}} 对象可以包含这些元素。 - `auto` @@ -49,6 +50,7 @@ user-select: unset; - `all` - : 在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。 - `contain` + - : 允许在元素内选择；但是，选区将被限制在该元素的边界之内。 > **备注：** CSS UI 4 将 `element` 值[重命名](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)为 `contain`。 diff --git a/files/zh-cn/web/css/using_css_custom_properties/index.md b/files/zh-cn/web/css/using_css_custom_properties/index.md index 095f1c8e28cdab..f59ca4b3149f13 100644 --- a/files/zh-cn/web/css/using_css_custom_properties/index.md +++ b/files/zh-cn/web/css/using_css_custom_properties/index.md @@ -83,7 +83,7 @@ element {
1:
2: Text 5 - more text
- +
``` @@ -184,11 +184,18 @@ element { } .three { - background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */ + background-color: var( + --my-var, + var(--my-background, pink) + ); /* pink if --my-var and --my-background are not defined */ } .three { - background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */ + background-color: var( + --my-var, + --my-background, + pink + ); /* Invalid: "--my-background, pink" */ } ``` @@ -217,9 +224,15 @@ element { ### CSS ```css -:root { --text-color: 16px; } -p { color: blue; } -p { color: var(--text-color); } +:root { + --text-color: 16px; +} +p { + color: blue; +} +p { + color: var(--text-color); +} ``` 毫不意外，浏览器将 `--text-color` 的值替换给了 `var(--text-color)`，但是 `16px` 并不是 {{cssxref("color")}} 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤： diff --git a/files/zh-cn/web/css/var/index.md b/files/zh-cn/web/css/var/index.md index bd2bc151c5b843..8f60a34719b491 100644 --- a/files/zh-cn/web/css/var/index.md +++ b/files/zh-cn/web/css/var/index.md @@ -48,10 +48,7 @@ body { /* 在 component 的样式中: */ .component .header { /* header-color 没有被设置, 将使用回退值 blue */ - color: var( - --header-color, - blue - ); + color: var(--header-color, blue); } .component .text { diff --git a/files/zh-cn/web/css/vertical-align/index.md b/files/zh-cn/web/css/vertical-align/index.md index a4111caf35fadc..0c75bc5d5e0830 100644 --- a/files/zh-cn/web/css/vertical-align/index.md +++ b/files/zh-cn/web/css/vertical-align/index.md @@ -100,18 +100,39 @@ vertical-align: unset; ### HTML ```html -
An link image with a default alignment.
-
An link image with a text-top alignment.
-
An link image with a text-bottom alignment.
-
An link image with a middle alignment.
+
+ An link image with + a default alignment. +
+
+ An + link + image with a text-top alignment. +
+
+ An + link + image with a text-bottom alignment. +
+
+ An + link + image with a middle alignment. +
``` ### CSS ```css -img.top { vertical-align: text-top; } -img.bottom { vertical-align: text-bottom; } -img.middle { vertical-align: middle; } +img.top { + vertical-align: text-top; +} +img.bottom { + vertical-align: text-bottom; +} +img.middle { + vertical-align: middle; +} ``` ### 结果 diff --git a/files/zh-cn/web/css/viewport_concepts/index.md b/files/zh-cn/web/css/viewport_concepts/index.md index 3d4e3ee13c4e2c..ab1cfa3e628e5c 100644 --- a/files/zh-cn/web/css/viewport_concepts/index.md +++ b/files/zh-cn/web/css/viewport_concepts/index.md @@ -24,15 +24,15 @@ slug: Web/CSS/Viewport_concepts 视口的宽度并不总是窗口的宽度。如果你测试 Chrome 或 Firefox 浏览器中 window 和 document 的宽度和高度，你会得到如下值： ```js -document.documentElement.clientWidth /* 1200 */ -window.innerWidth /* 1200 */ -window.outerWidth /* 1200 */ +document.documentElement.clientWidth; /* 1200 */ +window.innerWidth; /* 1200 */ +window.outerWidth; /* 1200 */ ``` ```js -document.documentElement.clientHeight /* 800 */ -window.innerHeight /* 800 */ -window.outerHeight /* 900 */ +document.documentElement.clientHeight; /* 800 */ +window.innerHeight; /* 800 */ +window.outerHeight; /* 900 */ ``` 下面是一些帮助你查询视口大小和其他类似的长度属性的 DOM 属性： @@ -48,15 +48,15 @@ window.outerHeight /* 900 */ 当缩放时，Firefox 和 Chrome 对 `innerWidth` 和 `clientWidth` 给出了新的 CSS 像素大小。浏览器对 `outerWidth` 和 `outerHeight` 的返回值有差异。Firefox 返回了缩放后的 CSS 像素值，Chrome 返回了默认的像素值： ```js -document.documentElement.clientWidth /* 800 */ -window.innerWidth /* 800 */ -window.outerWidth /* 800 in Firefox, 1200 in chrome */ +document.documentElement.clientWidth; /* 800 */ +window.innerWidth; /* 800 */ +window.outerWidth; /* 800 in Firefox, 1200 in chrome */ ``` ```js -document.documentElement.clientHeight /* 533 */ -window.innerHeight /* 533 */ -window.outerHeight /* 596 in Firefox, 900 in chrome */ +document.documentElement.clientHeight; /* 533 */ +window.innerHeight; /* 533 */ +window.outerHeight; /* 596 in Firefox, 900 in chrome */ ``` 原始的视口大小是 1200 x 800 像素。缩放后变成了 800 x 533。这是布局视口。该网页有固定的头部和尾部，带有下列样式，它们将会固定在相对布局视口的顶部和底部。 @@ -90,7 +90,7 @@ Web 浏览器包含两个视口，**布局视口**和**视觉视口**。视觉 #### `