Skip to content

Commit

Permalink
zh-cn: Format /web/css using Prettier (part 4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 27, 2023
1 parent 3a77382 commit 24b9469
Show file tree
Hide file tree
Showing 68 changed files with 678 additions and 455 deletions.
71 changes: 43 additions & 28 deletions files/zh-cn/web/css/overflow-wrap/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,52 +53,67 @@ overflow-wrap: unset;
#### HTML

```html
<p>They say the fishing is excellent at
Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, German rules)</p>
<p>
They say the fishing is excellent at Lake
<em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>normal</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)
</p>
<p>
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, without
<code>lang</code> attribute)
</p>
<p lang="en">
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
They say the fishing is excellent at Lake
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
I've never been there myself. (<code>hyphens</code>, German rules)
</p>
```

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

Expand Down
34 changes: 19 additions & 15 deletions files/zh-cn/web/css/overflow-y/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,30 +60,34 @@ overflow-y: unset;

```html
<ul>
<li><code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
<div id="div1">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
<li>
<code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
<div id="div1">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>

<li><code>overflow-y:scroll</code> — 总是显示滚动条
<div id="div2">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
<li>
<code>overflow-y:scroll</code> — 总是显示滚动条
<div id="div2">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>

<li><code>overflow-y:visible</code> — 在盒子外显示溢出的内容
<div id="div3">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
<li>
<code>overflow-y:visible</code> — 在盒子外显示溢出的内容
<div id="div3">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>

<li><code>overflow-y:auto</code> — 在大多数浏览器中，<code>auto</code> 效果等于 <code>scroll</code>
<div id="div4">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
<li>
<code>overflow-y:auto</code> — 在大多数浏览器中，<code>auto</code> 效果等于
<code>scroll</code>
<div id="div4">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>

</ul>
```

Expand Down
8 changes: 6 additions & 2 deletions files/zh-cn/web/css/padding-left/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```

## 规范
Expand Down
8 changes: 6 additions & 2 deletions files/zh-cn/web/css/padding-right/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions files/zh-cn/web/css/padding-top/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,12 @@ padding-top: unset;
## 实例

```css
.content { padding-top: 5%; }
.sidebox { padding-top: 10px; }
.content {
padding-top: 5%;
}
.sidebox {
padding-top: 10px;
}
```

## 规范
Expand Down
24 changes: 12 additions & 12 deletions files/zh-cn/web/css/padding/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ padding: unset;

```html
<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很 大！</h3>
<h3>此元素的内边距很 大！</h3>
```

#### CSS
Expand All @@ -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 的内边距*/
```

## 规范
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/page-break-after/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```

Expand Down
18 changes: 13 additions & 5 deletions files/zh-cn/web/css/page-break-inside/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,19 @@ page-break-inside: unset;
<span>A list</span>
<ol>
<li>one</li>
<!-- <li>two</li> -->
<!-- <li>two</li> -->
</ol>
</section>
<ul>
<li>one</li>
<!-- <li>two</li> -->
<!-- <li>two</li> -->
</ul>
<p>This is the second paragraph.</p>
<p>This is the third paragraph, it contains more text.</p>
<p>This is the fourth paragraph. It has a little bit more text than the third one.</p>
<p>
This is the fourth paragraph. It has a little bit more text than the third
one.
</p>
</div>
```

Expand All @@ -68,15 +71,20 @@ page-break-inside: unset;
column-width: 100px;
}

.list, ol, ul, p {
.list,
ol,
ul,
p {
break-inside: avoid;
}

p {
background-color: #8ca0ff;
}

ol, ul, .list {
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: orange;
Expand Down
8 changes: 6 additions & 2 deletions files/zh-cn/web/css/percentage/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,12 @@ slug: Web/CSS/percentage

```html
<div style="background-color:#0000FF;">
<div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
<div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
<div style="width:50%;margin-left:20%;background-color:#00FF00;">
Width: 50%, Left margin: 20%
</div>
<div style="width:30%;margin-left:60%;background-color:#FF0000;">
Width: 30%, Left margin: 60%
</div>
</div>
```

Expand Down
8 changes: 5 additions & 3 deletions files/zh-cn/web/css/perspective-origin/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
18 changes: 8 additions & 10 deletions files/zh-cn/web/css/perspective/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,8 @@ perspective: unset;
<table>
<tbody>
<tr>
<th><code>perspective: 250px;</code>
</th>
<th><code>perspective: 350px;</code>
</th>
<th><code>perspective: 250px;</code></th>
<th><code>perspective: 350px;</code></th>
</tr>
<tr>
<td>
Expand Down Expand Up @@ -92,10 +90,8 @@ perspective: unset;
</td>
</tr>
<tr>
<th><code>perspective: 500px;</code>
</th>
<th><code>perspective: 650px;</code>
</th>
<th><code>perspective: 500px;</code></th>
<th><code>perspective: 650px;</code></th>
</tr>
<tr>
<td>
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 24b9469

Please sign in to comment.