From ac636d968c32ebce510947b6a713a3c59a2673ae Mon Sep 17 00:00:00 2001 From: meowmeowmeowcat Date: Tue, 10 Aug 2021 08:33:41 +0800 Subject: Fix live samples in Learn/CSS, zh-CN (#1961) * Fix broken live examples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples --- .../learn/css/styling_text/fundamentals/index.html | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'files/zh-cn/learn/css/styling_text') diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html index 3bde7ae492..b615de8b66 100644 --- a/files/zh-cn/learn/css/styling_text/fundamentals/index.html +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -65,7 +65,7 @@ occasion such as this that he did.</p>

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

-

颜色

+

颜色

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

@@ -90,7 +90,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> -

{{ EmbedLiveSample('颜色', '100%', 220) }}

+

{{ EmbedLiveSample('Color', '100%', 230) }}

字体种类

@@ -219,7 +219,7 @@ occasion such as this that he did.</p>

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

-

一个使用 font-family 的例子

+

一个使用 font-family 的例子

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

@@ -243,7 +243,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> -

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

+

{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}

字体大小

@@ -264,7 +264,7 @@ occasion such as this that he did.</p>

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

-

一个简单的 size 示例

+

一个简单的 size 示例

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

@@ -298,9 +298,9 @@ p { font-family: Helvetica, Arial, sans-serif; } -

{{ EmbedLiveSample('字体大小', '100%', 220) }}

+

{{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}

-

字体样式，字体粗细，文本转换和文本装饰

+

字体样式，字体粗细，文本转换和文本装饰

CSS 提供了 4 种常用的属性来改变文本的样子：

@@ -374,7 +374,7 @@ p { font-family: Helvetica, Arial, sans-serif; } -

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

+

{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}

文字阴影

@@ -395,7 +395,7 @@ p {

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

-

多种阴影

+

多种阴影

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

@@ -443,7 +443,7 @@ p { } -

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

+

{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

@@ -453,7 +453,7 @@ p {

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

-

文本对齐

+

文本对齐

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

@@ -504,9 +504,9 @@ p { }
-

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

+

{{ EmbedLiveSample('Text_alignment', '100%', 260) }}

-

行高

+

行高

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

@@ -553,9 +553,9 @@ p { } -

{{ EmbedLiveSample('行高', '100%', 250) }}

+

{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}

-

字母和单词间距

+

字母和单词间距

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

@@ -612,7 +612,7 @@ p { } -

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

+

{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}

其他一些值得看一下的属性

-- cgit v1.2.3-54-g00ecf