diff options
Diffstat (limited to 'files/zh-cn/web/css')
28 files changed, 35 insertions, 35 deletions
diff --git a/files/zh-cn/web/css/-webkit-text-stroke/index.html b/files/zh-cn/web/css/-webkit-text-stroke/index.html index b7ae89cb95..1bb26b8811 100644 --- a/files/zh-cn/web/css/-webkit-text-stroke/index.html +++ b/files/zh-cn/web/css/-webkit-text-stroke/index.html @@ -7,7 +7,7 @@ tags: - CSS3 translation_of: Web/CSS/-webkit-text-stroke --- -<div></div> + <h2 id="摘要">摘要</h2> diff --git a/files/zh-cn/web/css/@font-face/index.html b/files/zh-cn/web/css/@font-face/index.html index 80d35cb973..59fcb501db 100644 --- a/files/zh-cn/web/css/@font-face/index.html +++ b/files/zh-cn/web/css/@font-face/index.html @@ -10,19 +10,19 @@ translation_of: Web/CSS/@font-face <div>@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。</div> -<div></div> + <div>通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。</div> -<div></div> + <div>在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。</div> -<div></div> + <div>@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.</div> -<div></div> + <pre class="brush: css no-line-numbers notranslate">@font-face { font-family: "Open Sans"; diff --git a/files/zh-cn/web/css/@media/index.html b/files/zh-cn/web/css/@media/index.html index 708d44ac5d..4bc714a892 100644 --- a/files/zh-cn/web/css/@media/index.html +++ b/files/zh-cn/web/css/@media/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/@media <div><code>@media</code> <a href="https://developer.mozilla.org/en/CSS">CSS</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule">@规则</a> 可用于基于一个或多个 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询 </a>的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。</div> -<div></div> + <div class="note"> <div><strong>注：</strong> 在JavaScript中，可以使用{{domxref("CSSMediaRule")}}CSS对象模型接口访问使用@media创建的规则。</div> diff --git a/files/zh-cn/web/css/_colon_only-child/index.html b/files/zh-cn/web/css/_colon_only-child/index.html index c0aa0440a3..1f53206504 100644 --- a/files/zh-cn/web/css/_colon_only-child/index.html +++ b/files/zh-cn/web/css/_colon_only-child/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:only-child' --- <div>{{CSSRef}}</div> -<div></div> + <p>CSS<a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a><code>:only-child</code> 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 <code>:first-child:last-child</code>或者<code>:nth-child(1):nth-last-child(1)</code>,当然,前者的权重会低一点.</p> diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html index af7bd3b5bd..21b62dee43 100644 --- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/::-webkit-progress-value' <div><strong><code>::-webkit-progress-value</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a> 代表的是{{HTMLElement("progress")}} 元素中进度条未完成的部分。它是{{cssxref("::-webkit-progress-bar")}} 伪元素的子元素。</div> -<div></div> + <div class="note"> <p><strong>注意:</strong> 为了使 <code>::-webkit-progress-value</code> 生效， <code><progress></code> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 <code>none</code> 。</p> diff --git a/files/zh-cn/web/css/align-items/index.html b/files/zh-cn/web/css/align-items/index.html index 24b933c5bb..c005c8e7ca 100644 --- a/files/zh-cn/web/css/align-items/index.html +++ b/files/zh-cn/web/css/align-items/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/align-items --- <div>{{ CSSRef}}</div> -<div></div> + <p>CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。</p> diff --git a/files/zh-cn/web/css/animation-name/index.html b/files/zh-cn/web/css/animation-name/index.html index c553edf234..38b64a701e 100644 --- a/files/zh-cn/web/css/animation-name/index.html +++ b/files/zh-cn/web/css/animation-name/index.html @@ -11,11 +11,11 @@ translation_of: Web/CSS/animation-name --- <div>{{CSSRef}}</div> -<div></div> + <div><code>animation-name</code>属性指定应用的一系列动画，每个名称代表一个由{{cssxref("@keyframes")}}定义的动画序列。</div> -<div></div> + <pre class="brush: css"><code>/* Single animation */ animation-name: none; diff --git a/files/zh-cn/web/css/basic-shape/index.html b/files/zh-cn/web/css/basic-shape/index.html index e4d878beab..47a1706461 100644 --- a/files/zh-cn/web/css/basic-shape/index.html +++ b/files/zh-cn/web/css/basic-shape/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/basic-shape <div><strong><code><basic-shape></code></strong>是一种表现基础图形的CSS数据类型，作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。</div> -<div></div> + <p>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</p> diff --git a/files/zh-cn/web/css/border-top/index.html b/files/zh-cn/web/css/border-top/index.html index ff289b6fd7..197c26b600 100644 --- a/files/zh-cn/web/css/border-top/index.html +++ b/files/zh-cn/web/css/border-top/index.html @@ -99,7 +99,7 @@ border-top: medium dashed green;</pre> <div>{{Compat("css.properties.border-top")}}</div> -<div></div> + <div class="hidden"> <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> diff --git a/files/zh-cn/web/css/clamp()/index.html b/files/zh-cn/web/css/clamp()/index.html index 4657d828b7..fd293c2620 100644 --- a/files/zh-cn/web/css/clamp()/index.html +++ b/files/zh-cn/web/css/clamp()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/clamp() --- <div>{{CSSRef}}</div> -<div></div> + <p><strong><code>clamp()</code></strong> 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 <code>clamp()</code> 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。</p> diff --git a/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html index 4cc603426f..cdcff96f2c 100644 --- a/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html +++ b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <p>注意有设定<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/float">float</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#absolute">position=absolute</a>的元素不会产生外边距重叠行为。</p> </div> -<div></div> + <p>有三种情况会形成外边距重叠：</p> diff --git a/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html b/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html index f6924c0be6..9f513c02c0 100644 --- a/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html +++ b/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries --- <div>{{CSSRef}}</div> -<div></div> + <p><strong>特性查询 </strong>使用CSS的at规则 <a href="/en-US/docs/Web/CSS/@supports">@supports</a> 创建。它给予web开发者一种测试浏览器是否有对某个确定特性的支持，而后提供基于测试结果生效的CSS的方法。在此指南中你将学习如何使用特性查询实现渐进式增强。</p> diff --git a/files/zh-cn/web/css/env()/index.html b/files/zh-cn/web/css/env()/index.html index eac3627359..60f45d0e97 100644 --- a/files/zh-cn/web/css/env()/index.html +++ b/files/zh-cn/web/css/env()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/env() <div> <span class="seoSummary"><strong><code>env()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> </span>函数以类似于 <span class="seoSummary">{{cssxref("var")}} </span>函数和 <span class="seoSummary"><a href="/en-US/docs/Web/CSS/--*">custom properties</a> </span>的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。</div> -<div></div> + <div><span style="font-size: 1rem; letter-spacing: -0.00278rem;">为了告诉浏览器使用屏幕上所有的可用空间，并以此使用</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">env()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">变量，我们需要添加一个新的视</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">口元值：</span></div> diff --git a/files/zh-cn/web/css/flex-basis/index.html b/files/zh-cn/web/css/flex-basis/index.html index 080dae7cd7..675d31020d 100644 --- a/files/zh-cn/web/css/flex-basis/index.html +++ b/files/zh-cn/web/css/flex-basis/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/flex-basis <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> -<div></div> + <p class="hidden">这个交互式的例子的源代码存储在一个GitHub库。如果你想为这个项目贡献代码, 请克隆这个仓库 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提交一个 pull request</p> diff --git a/files/zh-cn/web/css/hanging-punctuation/index.html b/files/zh-cn/web/css/hanging-punctuation/index.html index 294186c448..7ec6efcfcb 100644 --- a/files/zh-cn/web/css/hanging-punctuation/index.html +++ b/files/zh-cn/web/css/hanging-punctuation/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/hanging-punctuation <div><strong><code>hanging-punctuation </code></strong>CSS属性指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。</div> -<div></div> + <pre class="brush:css no-line-numbers notranslate">/* Keyword values */ hanging-punctuation: none; diff --git a/files/zh-cn/web/css/justify-content/index.html b/files/zh-cn/web/css/justify-content/index.html index 26e42dc88c..125f5b410f 100644 --- a/files/zh-cn/web/css/justify-content/index.html +++ b/files/zh-cn/web/css/justify-content/index.html @@ -49,7 +49,7 @@ justify-content: unset;</pre> <div>{{cssinfo}}</div> -<div></div> + <p>可以参考 <a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes"> 使用 CSS 弹性框</a>获取更多信息。</p> diff --git a/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html index f402489865..a0cea93ee8 100644 --- a/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html +++ b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html @@ -5,11 +5,11 @@ translation_of: Web/CSS/Layout_cookbook/Column_layouts --- <div>{{CSSRef}}</div> -<div></div> + <div>你可能经常需要创建一个包含几个栏目的布局，css提供了几个方法来实现它。使用Grid, Flexbox 或者 Multi-column layout 都取决于你想要实现什么目标，在这篇recipe中我们会探讨这些内容</div> -<div></div> + <div><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></div> diff --git a/files/zh-cn/web/css/layout_cookbook/index.html b/files/zh-cn/web/css/layout_cookbook/index.html index f8c70e480b..fd586a248f 100644 --- a/files/zh-cn/web/css/layout_cookbook/index.html +++ b/files/zh-cn/web/css/layout_cookbook/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/Layout_cookbook <div>CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。</div> -<div></div> + <div class="note"> <p><strong>Note</strong>: 如果你是首次接触CSS布局，你可以先看一下<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>，书中的基础知识有利于你更好的使用本书中的布局样式。</p> diff --git a/files/zh-cn/web/css/overflow-wrap/index.html b/files/zh-cn/web/css/overflow-wrap/index.html index bf372dba38..0663f249c2 100644 --- a/files/zh-cn/web/css/overflow-wrap/index.html +++ b/files/zh-cn/web/css/overflow-wrap/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/word-wrap --- <div>{{CSSRef}}</div> -<div></div> + <p>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</p> diff --git a/files/zh-cn/web/css/page-break-after/index.html b/files/zh-cn/web/css/page-break-after/index.html index 7b5632ee5b..5d83330342 100644 --- a/files/zh-cn/web/css/page-break-after/index.html +++ b/files/zh-cn/web/css/page-break-after/index.html @@ -6,7 +6,7 @@ tags: - page-break-after & break-after translation_of: Web/CSS/page-break-after --- -<div></div> + <div>{{CSSRef}}</div> diff --git a/files/zh-cn/web/css/pointer-events/index.html b/files/zh-cn/web/css/pointer-events/index.html index a838498364..0350e3776f 100644 --- a/files/zh-cn/web/css/pointer-events/index.html +++ b/files/zh-cn/web/css/pointer-events/index.html @@ -49,7 +49,7 @@ pointer-events: unset;</pre> <dd> <div>只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：</div> - <div></div> + <ul> <li><code>visibility</code>属性值为<code>visible</code>，且鼠标指针在元素内部，且<code>fill</code>属性指定了<code>none</code>之外的值</li> @@ -66,7 +66,7 @@ pointer-events: unset;</pre> <dd> <div>只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：</div> - <div></div> + <ul> <li>鼠标指针在元素内部，且<code>fill</code>属性指定了<code>none</code>之外的值</li> diff --git a/files/zh-cn/web/css/quotes/index.html b/files/zh-cn/web/css/quotes/index.html index a32d8d45d7..44ba326a71 100644 --- a/files/zh-cn/web/css/quotes/index.html +++ b/files/zh-cn/web/css/quotes/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/quotes <div><code><strong>quotes</strong></code> <a href="/en-US/docs/CSS">CSS</a> 属性用于设置引号的样式。</div> -<div></div> + <div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div> diff --git a/files/zh-cn/web/css/table-layout/index.html b/files/zh-cn/web/css/table-layout/index.html index cdcb6bc886..07c549bf8f 100644 --- a/files/zh-cn/web/css/table-layout/index.html +++ b/files/zh-cn/web/css/table-layout/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/table-layout --- <div>{{CSSRef}}</div> -<div></div> + <p><strong>table-layout </strong>CSS属性定义了用于布局表格<em>单元格</em>，<em>行</em>和<em>列</em>的算法。</p> diff --git a/files/zh-cn/web/css/text-align-last/index.html b/files/zh-cn/web/css/text-align-last/index.html index 53c9d0147f..c35c79a85a 100644 --- a/files/zh-cn/web/css/text-align-last/index.html +++ b/files/zh-cn/web/css/text-align-last/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/text-align-last --- <div>{{CSSRef}}</div> -<div></div> + <p>CSS 属性 <strong><code>text-align-last</code></strong> 描述的是一段文本中最后一行在被强制换行之前的对齐规则。</p> diff --git a/files/zh-cn/web/css/text-justify/index.html b/files/zh-cn/web/css/text-justify/index.html index ad13d4ef7a..8760107504 100644 --- a/files/zh-cn/web/css/text-justify/index.html +++ b/files/zh-cn/web/css/text-justify/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/text-justify --- <div>{{CSSRef}}</div> -<div></div> + <p>CSS属性 <strong><code>text-justify</code> </strong>定义的是当文本的 {{cssxref("text-align")}} 属性被设置为 <code>:justify</code> 时的齐行方法。</p> diff --git a/files/zh-cn/web/css/text-shadow/index.html b/files/zh-cn/web/css/text-shadow/index.html index 1b24092603..49afb0a266 100644 --- a/files/zh-cn/web/css/text-shadow/index.html +++ b/files/zh-cn/web/css/text-shadow/index.html @@ -107,7 +107,7 @@ text-shadow: unset;</pre> </p> </pre> -<div></div> + </div> <p>{{EmbedLiveSample('Multiple_shadows', '689px', '180px')}}</p> diff --git a/files/zh-cn/web/css/transform-function/rotate()/index.html b/files/zh-cn/web/css/transform-function/rotate()/index.html index a412aa9362..e7e5807e55 100644 --- a/files/zh-cn/web/css/transform-function/rotate()/index.html +++ b/files/zh-cn/web/css/transform-function/rotate()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/transform-function/rotate() <div>CSS的<strong><code>rotate()</code></strong>函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。</div> -<div></div> + <p>元素旋转的固定点 - 如上所述 - 也称为<strong>变换原点</strong>。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。</p> diff --git a/files/zh-cn/web/css/using_css_custom_properties/index.html b/files/zh-cn/web/css/using_css_custom_properties/index.html index 60ff3a2bad..5699003a1e 100644 --- a/files/zh-cn/web/css/using_css_custom_properties/index.html +++ b/files/zh-cn/web/css/using_css_custom_properties/index.html @@ -10,11 +10,11 @@ translation_of: Web/CSS/Using_CSS_custom_properties --- <div><strong>自定义属性</strong>（有时候也被称作<strong>CSS变量</strong>或者<strong>级联变量</strong>）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： <strong><code>--main-color: black;</code></strong>），由<a href="/zh-CN/docs/Web/CSS/var">var() </a>函数来获取值（比如： <code>color: <strong>var(--main-color)</strong>;</code>）</div> -<div></div> + <div>复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，<code>--main-text-color</code> 会比 <code>#00ff00</code> 更易理解，尤其是这个颜色值在其他上下文中也被使用到。</div> -<div></div> + <div>自定义属性受级联的约束，并从其父级继承其值。</div> |