diff options
Diffstat (limited to 'files/zh-cn/learn/css/building_blocks')
21 files changed, 4592 insertions, 0 deletions
diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..3a1a8f5d72 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,403 @@ +--- +title: 高级区块效果 +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">这篇文章展示了盒子的小技巧，提供了一些高级特性的介绍，这些特性不适合其他类别的样式，比如盒子阴影、混合模式和滤镜。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>HTML 基础(学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>) ，了解CSS工作原理 (学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>要了解如何使用高级的盒子效果，并了解一些在CSS语言中出现的新样式工具。</td> + </tr> + </tbody> +</table> + +<h2 id="盒子阴影">盒子阴影</h2> + +<p>回到我们的<a href="/zh-CN/docs/Learn/CSS/Styling_text">样式化文本</a>模块，我们查看了{{cssxref("text-shadow")}}属性，它允许您将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——{{cssxref("box-shadow")}}允许您将一个或多个阴影应用到一个实际的元素盒子中。和文本阴影一样，盒子的阴影在各种浏览器中也得到了很好的支持，但只有在IE9+（IE9及更新版本）中可用。你的旧IE版本的用户可能只需要应付没有阴影的情况，所以只要测试一下你的设计，确保你的内容在没有他们的情况下是清晰可见的。</p> + +<p>你可以 <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a>在这部分找到例子 (见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">源码</a>)。</p> + +<h3 id="一个简单的盒子阴影">一个简单的盒子阴影</h3> + +<p>让我们看一个简单的例子来起步。首先,一些HTML：</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>现在是 CSS:</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('一个简单的盒子阴影', '100%', 100) }}</p> + +<p>你会看到，我们在<code>box-shadow</code>属性值中有4个项：</p> + +<ol> + <li>第一个长度值是水平偏移量（<strong>horizontal offset</strong> ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。</li> + <li>第二个长度值是垂直偏移量（<strong>vertical offset</strong>）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。</li> + <li>第三个长度的值是模糊半径（<strong>blur radius</strong>）——在阴影中应用的模糊度。</li> + <li>颜色值是阴影的基本颜色（<strong>base color</strong>）。</li> +</ol> + + + +<p>你可以使用任何长度和颜色单位来定义这些值。</p> + + + +<h3 id="多个盒子阴影">多个盒子阴影</h3> + +<p>还可以在单个<code>box-shadow</code>声明中指定多个框阴影，用逗号分隔：</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('多个盒子阴影', '100%', 100) }}</p> + +<p>我们在这里做了一些有趣的事情，创建了一个带有多个颜色图层的凸起的盒子，但是你可以用任何你想要的方式来使用它，例如，用基于多个光源的阴影来创建一个更加真实的外观。</p> + +<h3 id="其他盒子阴影特点">其他盒子阴影特点</h3> + +<p>与{{cssxref("text-shadow")}}不同，{{cssxref("box-shadow")}}有一个<code>inset</code>关键字可用——把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。让我们看一看。</p> + +<p>首先，我们将为这个例子使用一些不同的HTML：</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('其他盒子阴影特点', '100%', 70) }}</p> + +<p>在这里我们将focus/hover/active这些声明一起设置了按钮样式。这个按钮的默认状态下设置了一个简单的黑色盒阴影，并且加上了一对inset阴影，一个明的，一个暗的，位于按钮的两个对角上，以此给按钮一种很棒的阴影效果。</p> + +<p>当按钮被按下时，这里的active声明将第一个盒阴影换成一个非常暗的inset阴影。给人一种按钮被按下的样子。</p> + +<div class="note"> +<p><strong>注意</strong>: 还有一个可以在box-shadow中设置的值 — 另外一个位于颜色值前面可选的长度值，即<strong>spread radius</strong>，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。</p> +</div> + +<h2 id="Filters（滤镜）">Filters（滤镜）</h2> + +<p>CSS滤镜提供了一种过滤元素的方法，就好比你在诸如Photoshop这样的平面设计程序中过滤元素一样。有大量的不同的选项可以使用，你可以在{{cssxref("filter")}} 参考页面阅读所有相关的更多细节。在这篇文章中，我们将会向你介绍它的语法，并且向你展示将会发生多么有趣的结果。</p> + +<p>基本上，滤镜可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用<code>filter</code>属性，并且给他一个特定的过滤函数的值。有些可用的滤镜选项和其他CSS特性做的事情十分相似，例如<code>drop-shadow()</code>的工作方式以及产生的效果和 {{cssxref("box-shadow")}} 或{{cssxref("text-shadow")}}十分相似。然而滤镜真正出色的地方在于，它们作用于盒（box）内内容（content）的确切形状，而不仅仅将盒子本身作为一个大的块，这看起来会更棒，即使他们可能不会总是变成你想要的模样。让我们来举一个简单的例子来阐明我们的意思：</p> + +<p>首先，一些简单的 HTML:</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p>现在是一些CSS,用来给它们各自一个下降的阴影:</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p>这给了我们一个如下的结果:</p> + +<p>{{ EmbedLiveSample('Filters（滤镜）', '100%', 200) }}</p> + +<p>正如你所看到的, drop-shadow滤镜跟随着文本和border dashes的确切形状。而盒阴影（box-shadow）仅仅跟随着盒的四方。</p> + +<p>其他需要注意的事:</p> + +<ul> + <li>滤镜很新——它们可以被大多数的现代的浏览器支持，包括Microsoft Edge，但它们一点也不能被IE浏览器支持。因此如果你在你的设计中使用滤镜，你需要确保你的内容即使没有滤镜也是可用的。</li> + <li>你会看到我们在<code>filter</code>属性中通过<code>-webkit-</code>前缀包含了一个版本信息，这被称为一个 {{glossary("Vendor Prefix")}}，有时会被浏览器使用，以在一个新特性完整实现之前，当它与无前缀版本没有冲突的时候支持并实验这个特性。Vendor prefixes永远都不被指望着被web开发人员使用，但是它们有时候确实会被在产品页面中使用，即当实验性的特性确实被需要时。在这个实例中，Chrome/Safari/Opera 目前要求这些属性的<code>-webkit-</code>版本，而Edge 和 Firefox则使用后者，无前缀版本。</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: 如果你确实决定在你的代码中使用前缀，确保你包括了所有需要的前缀以及无前缀的版本，这样才会有尽可能多的浏览器能够使用这些特性，并且如果浏览器落下了前缀，它们也能够使用无前缀的版本。另外需要注意的是这些实验性的特性可能会有改变，这可能会导致你的代码被破坏，在前缀被去除之前，最好还是仅仅实验这些特性。</p> +</div> + +<p> 你可以看到更多关于滤镜的例子，在 <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (也可以看 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">source code</a>).</p> + +<h2 id="Blend_modes（混合模式）">Blend modes（混合模式）</h2> + +<p>CSS混合模式允许我们为元素添加一个混合模式 ，以当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，对于像Photoshop这样的图形程序的用户来说，混合模式应该也非常熟悉。</p> + +<p>这里有两个在 CSS中用到的属性:</p> + +<ul> + <li>{{cssxref("background-blend-mode")}}, 用来将单个元素的多重背景图片和背景颜色设置混合在一起。</li> + <li>{{cssxref("mix-blend-mode")}}, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容(content)混合在一起。</li> +</ul> + +<p>你可以找到比这里用到的更多的例子，在我们的<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> 示例页面 (查看 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">source code</a>), 或者在 {{cssxref("<blend-mode>")}} 参考页面。</p> + +<div class="note"> +<p><strong>注意</strong>: 混合模式（Blend modes ）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没Edge支持， 并且 Safari 也仅仅支持部分混合模式选项。</p> +</div> + +<h3 id="background-blend-mode">background-blend-mode</h3> + +<p>让我们再来看一些例子以帮助我们更好的理解这一点。首先，{{cssxref("background-blend-mode")}}——在这里我们将展示一对简单的{{htmlelement("div")}}s，这样你就可以比较原始版本和混合版本：</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>现在来点 CSS — 我们正在给<code><div></code>添加一个背景图像和一个绿色的背景色：</p> + +<pre class="brush: css">div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>我们得到的结果是这样的——你可以看到左边的原始版本，以及右边的多层混合版本：</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode">mix-blend-mode</h3> + +<p>现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<code><div></code>s，但是每个都位于一个有着紫色背景的简单的<code><div></code>上，来向你展示元素们将会怎样混合在一起：</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p>这是我们将用来装饰它的CSS:</p> + +<pre class="brush: css">article { + width: 300px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>你可以看到，多层混合（mix-blend）不仅混合了两种背景图像，还混合了在<code><div></code>下面的颜色。</p> + +<div class="note"> +<p><strong>注意：</strong>如果您不理解上面的一些布局属性，请不要担心，像 {{cssxref("position")}}， {{cssxref("top")}}， {{cssxref("bottom")}}， {{cssxref("z-index")}}等。我们将在<a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS Layout</a>模块中详细地介绍这些内容。</p> +</div> + +<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>另一个我们认为在继续之前会提到的新特性(目前支持Chrome、Safari和Opera,和在Firefox正在实现)是{{cssxref("background-clip")}}的 <code>text</code> 值。当与专有 <code>-webkit-text-fill-color: transparent;</code> 特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个<code>-webkit-</code>供应商前缀，甚至对于非webkit/Chrome-based的浏览器来说也是如此。</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>那么为什么其他浏览器会实现一个<code>-webkit-</code>前缀？主要是为了浏览器兼容性——许多web开发人员已经开始使用<code>-webkit-</code>前缀来实现web站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的CSS特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。</p> + +<p>如果您确实希望在您的生产工作中使用这些特性，请确保在浏览器中进行彻底的测试，并检查这些特性不工作的地方，站点仍然可用。</p> + +<div class="note"> +<p><strong>注意：</strong>对于一个完整的<code>-webkit-background-clip: text</code>代码示例，见<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a>（也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">源码</a>）。</p> +</div> + +<h2 id="自主学习尝试一些效果">自主学习:尝试一些效果</h2> + +<p>现在轮到你了。对于这种自主学习，我们希望您使用下面所提供的代码来试验上面所读到的一些效果。</p> + +<p>如果你犯了一个错误，你可以用<em>Reset</em>按钮来重置这个例子。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="总结">总结</h2> + +<p>我们希望这篇文章被证明是很有趣的——玩着闪亮的玩具通常是很有趣的，而且看看什么样的工具在尖端的浏览器中是可以得到的是我们很感兴趣的。您已经到达了样式盒文章的末尾，因此，接下来您将通过我们的评估来测试您的box syling技能。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..ebbfda7feb --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,318 @@ +--- +title: 背景与边框 +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>在这节课中，我们来看看，使用CSS背景和边框来做一些，具有一些创造性的事情。渐变、背景图像和圆角，背景和边框的巧妙运用是CSS中许多样式问题的答案。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何在盒模型中使用背景和边框。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS的背景样式">CSS的背景样式</h2> + +<p>CSS {{cssxref("background")}}属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>在本教程的后面部分，我们将返回到简写的工作方式，但是首先，我们通过分开使用各个普通背景属性的方式，看一下在CSS中使用背景可以做哪些不同的事情。</p> + +<h3 id="背景颜色">背景颜色</h3> + +<p>{{cssxref("background-color")}}属性定义了CSS中任何元素的背景颜色。属性接受任何有效的<code><color>值</code>。背景色扩展到元素的内容和内边距的下面。</p> + +<p>在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading和{{htmlelement("span")}}元素。</p> + +<p><strong>尝试修改为任何可用的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 值。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="背景图片">背景图片</h3> + +<p>{{cssxref("background-image")}}属性允许在元素的背景中显示图像。在下面的例子中，我们有两个方框——一个是比方框大的背景图像，另一个是星星的小图像。</p> + +<p>这个例子演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在这种情况下，实际的图像只是单独的一颗星星。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个background-color属性，看看效果如何。</strong></p> + +<h4 id="控制背景平铺">控制背景平铺</h4> + +<p>{{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是:</p> + +<ul> + <li><code>no-repeat</code> — 不重复。</li> + <li><code>repeat-x</code> —水平重复。</li> + <li><code>repeat-y</code> —垂直重复。</li> + <li><code>repeat</code> — 在两个方向重复。</li> +</ul> + +<p><strong>在下面的示例中尝试这些值。我们已经将值设置为no-repeat，因此您将只能看到一个星星。尝试不同的值—repeat-x和repeat-y—看看它们的效果如何。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="调整背景图像的大小">调整背景图像的大小</h4> + +<p>在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 {{cssxref("background-size")}}属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。</p> + +<p>你也可以使用关键字:</p> + +<ul> + <li><code>cover</code> —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外</li> + <li><code>contain</code> — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。</li> +</ul> + +<p>在下面的例子中，我使用了上面例子中的大图，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。</p> + +<p>试试下面：</p> + +<ul> + <li>改变用于修改背景大小的长度单位。</li> + <li>去掉长度单位，看看使用<code>background-size: cover</code> or <code>background-size: contain</code>会发生什么。</li> + <li>如果您的图像小于盒子，您可以更改background-repeat的值来重复图像。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="背景图像定位">背景图像定位</h4> + +<p>{{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>默认的背景位置值是(0,0)。</p> +</div> + +<p>最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。</p> + +<p>你可以使用像<code>top</code>和<code>right</code>这样的关键字(在{{cssxref("background-image")}}页面上查找其他的关键字):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>或者使用 <a href="/en-US/docs/Web/CSS/length">长度值</a>, and <a href="/en-US/docs/Web/CSS/percentage">百分比</a>：</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>你也可以混合使用关键字，长度值以及百分比，例如：</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>最后，您还可以使用4-value语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的CSS中，我们将背景从顶部调整20px，从右侧调整10px:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>使用下面的示例来处理这些值并在框内移动星星。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>background-position</code>是{{cssxref("background-position-x")}}和{{cssxref("background-position-y")}}的简写，它们允许您分别设置不同的坐标轴的值。</p> +</div> + +<h3 id="渐变背景">渐变背景</h3> + +<p>当渐变用于背景时，也可以使用像图像一样的{{cssxref("background-image")}}属性设置。</p> + +<p>您可以在MDN的<code><gradient></code>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用web上可用的许多CSS渐变生成器之一，比如<a href="https://cssgradient.io/">这个 </a>。您可以创建一个渐变，然后复制并粘贴生成它的源代码。</p> + +<p>在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性梯度，它延伸到整个盒子上，还有一个径向梯度，它有一个固定的大小，因此会重复。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="多个背景图像">多个背景图像</h3> + +<p>也可以有多个背景图像——在单个属性值中指定多个<code>background-image</code>值，用逗号分隔每个值。</p> + +<p>当你这样做时，你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。</p> + + + +<div class="blockIndicator note"> +<p><strong>注意：</strong>渐变可以与常规的背景图像很好地混合在一起。</p> +</div> + +<p>其它 <code>background-*</code>属性，该属性值用逗号分隔的方式设置。例如下列<code>background-image</code>：</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的image1的background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3将被赋予第一个位置值，image4将被赋予第二个位置值。</p> + +<p><strong>我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="背景附加">背景附加</h3> + +<p>另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由{{cssxref("background-attachment")}}属性控制的，它可以接受以下值:</p> + +<ul> + <li><code>scroll</code>: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。</li> + <li><code>fixed</code>: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。</li> + <li><code>local</code>: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。</li> +</ul> + +<p>{{cssxref("background-attachment")}}属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (或者看看这儿的 <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">源代码</a>))。</p> + +<h3 id="使用background_的简写">使用background 的简写</h3> + +<p>正如我在本课开始时提到的，您将经常看到使用{{cssxref("background")}}属性指定的背景。这种简写允许您一次设置所有不同的属性。</p> + +<p>如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。</p> + +<p>这里有一些规则，需要在简写背景属性时遵循，例如:</p> + +<ul> + <li><code>background-color</code> 只能在逗号之后指定。</li> + <li><code>background-size</code> 值只能包含在背景位置之后，用'/'字符分隔，例如：<code>center/80%</code>。</li> +</ul> + +<p>查看{{cssxref("background")}}的MDN页面，以查看所有的注意事项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="背景的可访问性考虑">背景的可访问性考虑</h3> + +<p>当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，您还应该指定一个<code>background-color</code> ，以便在图像未加载时文本也足够清晰。</p> + +<p>屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中。</p> + +<h2 id="边框">边框</h2> + +<p>在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用CSS向元素添加边框时，我们使用一个简写属性在一行CSS中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>或者我们可以只设置盒子的一个边，例如:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>这些简写的等价于：</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>也可以使用更加细粒度的属性：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> +</div> + +<p><strong>有各种各样的样式可以用于边框。在下面的例子中，为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="圆角">圆角</h3> + +<p>通过使用{{cssxref("border-radius")}}属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。</p> + +<p>例如，要使一个盒子的四个角都有10px的圆角半径：</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>或使右上角的水平半径为1em，垂直半径为10％：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看{{cssxref("border-radius")}}的属性页，查看可用的语法选项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="玩转背景和边框">玩转背景和边框</h2> + +<p>为了测试你的新知识，尝试使用背景和边框创建以下内容，使用下面的例子作为起点:</p> + +<ol> + <li>给方框一个5px的黑色实心边框，圆角为10px。</li> + <li>添加一个背景图像(使用URL balloons.jpg)，并调整它的大小，使它能够覆盖盒子。</li> + <li>给<h2>一个半透明的黑色背景颜色，并使文本为白色。</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：您可以点击 <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">这儿</a> 查看解决方案——但请先尝试一下自己能否实现。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>我们在这里已经介绍了很多，您可以看到有很多要添加背景或边框到盒子中。如果您想了解更多关于我们讨论过的特性的信息，请浏览不同的属性页面。MDN上的每个页面都有更多的用法示例，供您玩转并增强您的知识。</p> + +<p>在下一课中，我们将了解文档排版与CSS的相互影响。以及了解当文本不是从左向右流动时会发生什么?</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..d3eefdefe6 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,332 @@ +--- +title: 层叠与继承 +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>本文旨在让你理解CSS的一些最基本的概念——层叠、优先级和继承——这些概念决定着如何将CSS应用到HTML中，以及如何解决冲突。</p> + +<p>尽管与课程的其他部分相比，完成这节课可能看起来没有那么直接的相关性，而且更学术性一些，但是理解这些东西将为您以后节省很多痛苦！ 我希望您仔细阅读本节，并在继续下一步学习之前，确保您是否理解了这些概念。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习层叠、优先级，以及在CSS中继承是如何工作的。</td> + </tr> + </tbody> +</table> + +<h2 id="冲突规则">冲突规则</h2> + +<p>CSS代表<strong>层叠样式表(Cascading Style Sheets)</strong>，理解第一个词<em>cascading</em>很重要— cascade 的表现方式是理解CSS的关键。</p> + +<p>在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。<strong>cascade</strong>, 和它密切相关的概念是 <strong>specificity</strong>，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。</p> + +<p>这里也有<strong>继承</strong>的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。</p> + +<p>我们来快速的看下正在处理的关键问题，然后依次了解它们是如何相互影响的，以及如何和css交互的。虽然这些概念难以理解，但是随着不断的练习，你会慢慢熟悉它的工作原理。</p> + +<h3 id="层叠">层叠</h3> + +<p>Stylesheets <strong>cascade（样式表层叠）</strong> — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。</p> + +<p>下面的例子中，我们有两个关于 <code>h1</code> 的规则。<code>h1</code> 最后显示蓝色 — 这些规则有相同的优先级，所以顺序在最后的生效。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="优先级">优先级</h3> + +<p>浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：</p> + +<ul> + <li>一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。</li> + <li>一个类选择器稍微具体点 — 它会选择该页面中有特定 <code>class</code> 属性值的元素 — 所以它的优先级就要高一点。</li> +</ul> + +<p>举例时间! 下面我们再来介绍两个适用于 <code>h1</code> 的规则。下面的 <code>h1</code> 最后会显示红色 — 类选择器有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>稍后我们会详细解释优先级评分和其他相关内容。</p> + +<h3 id="继承">继承</h3> + +<p>继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。</p> + +<p>举一个例子，如果你设置一个元素的 <code>color</code> 和 <code>font-family</code> ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>一些属性是不能继承的 — 举个例子如果你在一个元素上设置 {{cssxref("width")}} 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 在 MDN CSS 属性引用页面你会发现一个技术信息框，通常在规范区域的底部，列举了属性的很多数据信息，包括能否被继承。参见 <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a>, 例子.</p> +</div> + +<h2 id="理解这些概念是如何协同工作的">理解这些概念是如何协同工作的</h2> + +<p>这三个概念一起来控制css规则应用于哪个元素；在下面的内容中，我们将看到它们是如何协同工作的。有时候会感觉有些复杂，但是当你对css有更多经验的时候，你就可以记住它们，即便忘记了细节，可以在网上查到，有经验的开发人员也不会记得所有细节。</p> + +<h2 id="理解继承">理解继承</h2> + +<p>我们从继承开始。下面的例子中我们有一个{{cssxref("ul")}}，里面有两个无序列表。我们已经给 <code><ul></code> 设置了 <strong>border</strong>， <strong>padding </strong>和 <strong>font color</strong>.</p> + +<p><strong>color </strong>应用在直接子元素，也影响其他后代 — 直接子元素<code><li></code>，和第一个嵌套列表中的子项。然后添加了一个 <code>special</code> 类到第二个嵌套列表，其中使用了不同的颜色。然后通过它的子元素继承。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果borders可以被继承，每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果!</p> + +<p>哪些属性属于默认继承很大程度上是由常识决定的。</p> + +<h3 id="控制继承">控制继承</h3> + +<p>CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 <code>inherit</code> 。</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>将属性重置为自然值，也就是如果属性是自然继承那么就是 <code>inherit</code>，否则和 <code>initial</code>一样</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 还有一个新的属性, {{cssxref("revert")}}， 只有很少的浏览器支持。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 有更多信息和具体是怎么工作的。</p> +</div> + +<p>下面的例子你可以通过修改css来查看它们的功能，写代码是掌握html和css最好的办法。</p> + +<p>例子：</p> + +<ol> + <li>第二个列表项有类 <code>my-class-1</code> 。它设置了内部元素来继承属性。如果你删除这个类，它会如何改变链接的颜色?</li> + <li>你知道为什么第三个和第四个链接会是这样的颜色? 如果不知道看看之前的内容。</li> + <li>那个链接的颜色会改变如果你对 <code><a></code> 添加一个新样式 — 例如 <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="重设所有属性值">重设所有属性值</h3> + +<p>CSS 的 shorthand 属性 <code>all</code> 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(<code>inherit</code>, <code>initial</code>, <code>unset</code>, or <code>revert</code>)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。</p> + +<p>下面的例子中有两个<strong>blockquote </strong>。第一个用元素本身的样式 ，第二个设置 <code>all</code> 为 <code>unset</code></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p>试着将 <code>all</code> 改成其他可能的值然后观察有什么不一样。</p> + +<h2 id="理解层叠">理解层叠</h2> + +<p>我们现在明白了为什么嵌套在html结构中的段落和应用于正文中的css颜色相同，从入门课程中，我们了解了如何将文档中的任何修改应用于某个对象的css，无论是把css指定某个元素还是创建一个类。现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用css规则。</p> + +<p>有三个因素需要考虑，根据重要性排序如下，前面的更重要：</p> + +<ol> + <li>重要程度</li> + <li>优先级</li> + <li>资源顺序</li> +</ol> + +<p>我们从下往上，看看浏览器是如何决定该应用哪个css规则的。</p> + +<h3 id="资源顺序">资源顺序</h3> + +<p>我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。</p> + +<h3 id="优先级_2">优先级</h3> + +<p>在你了解了顺序的重要性后，会发现在一些情况下，有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的<strong>优先级</strong> — 它范围更小，因此浏览器就把它选择为元素的样式。</p> + +<p>就像前面看到的，类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。</p> + +<p>这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性。</p> + +<p>这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。举个例子，在下面的样式中我给2级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>现在让我们来看看浏览器如何计算优先级。我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。</p> + +<p>一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：</p> + +<ol> + <li><strong>千位</strong>： 如果声明在 {{htmlattrxref("style")}} 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。</li> + <li><strong>百位</strong>： 选择器中包含ID选择器则该位得一分。</li> + <li><strong>十位</strong>： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。</li> + <li><strong>个位</strong>：选择器中包含元素、伪元素选择器则该位得一分。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 通用选择器 (<code>*</code>)，组合符 (<code>+</code>, <code>></code>, <code>~</code>, ' ')，和否定伪类 (<code>:not</code>) 不会影响优先级。</p> +</div> + +<div class="blockIndicator warning"> +<p><strong>警告: </strong>在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。</p> +</div> + +<p>下面有几个单独的例子，有空可以看看。试着思考下，理解为什么优先级是这样定的。我们还没有深入介绍选择器，不过你可以在MDN上面找到每个选择器的详细信息 <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">千位</th> + <th scope="col">百位</th> + <th scope="col">十位</th> + <th scope="col">个位</th> + <th scope="col">优先级</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>内联样式</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>在我们继续之前，先看看这个例子。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>这里发生了什么? 首先，我们先看看最上面的选择器规则，你会发现，我们已经把优先级计算出来放在最前面的注释里。</p> + +<ul> + <li>前面两个选择器都是链接背景颜色的样式 — 第二个赢了使得背景变成蓝色因为它多了一个ID选择器：优先级 201 vs. 101。</li> + <li>第三四个选择器都是链接文本颜色样式 — 第二个（第四个）赢了使得文本变成白色因为它虽然少一个元素选择器，但是多了一个类选择器，多了9分。所以优先级是 113 vs. 104。</li> + <li>第5到7个选择器都是鼠标悬停时链接边框样式。第六个显然输给第五个优先级是 23 vs. 24 — 少了个元素选择器。 第七个，比第五第六都高 — 子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 33 vs. 23 和 24。</li> +</ul> + +<h3 id="!important">!important</h3> + +<p>有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — <code>!important</code>。用于修改特定属性的值， 能够覆盖普通规则的层叠。</p> + +<p>看看这个例子，有两个段落，其中一个有ID。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>让我们看看会发生什么 — 如果有什么疑问，试着删除一些属性：</p> + +<ol> + <li>你会发现第三个规则 {{cssxref("color")}} 和 {{cssxref("padding")}} 的值被应用了，但是 {{cssxref("background-color")}} 没有。为什么? 应该三个都应用，因为顺序规则是后面覆盖前面。</li> + <li>无论如何， 上面的规则赢了，因为类选择器比元素选择器有更高的优先级。</li> + <li>两个元素都有 <code>better</code>{{htmlattrxref("class")}}，但是第二个有 {{htmlattrxref("id")}} 。因为ID选择器比类选择器优先级更高 (一个页面只能有一个独特的ID，但是很多元素都有相同的类 — ID 对于目标非常独特)，红色背景和1 pixel black border 应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。</li> + <li>第二个元素有红色背景但是没有边框。为什么?因为 <code>!important</code> 声明在第二条规则里 — 在 <code>border: none</code> 后面，说明即使计算优先级低这个属性也使用这个值。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>： 覆盖 <code>!important</code> 唯一的办法就是另一个 <code>!important</code> 具有 相同<em>优先级</em> 而且顺序靠后，或者更高优先级。</p> +</div> + +<p>了解 <code>!important</code> 是为了在阅读别人代码的时候知道有什么作用。 <strong>但是，强烈建议除了非常情况不要使用它。</strong> <code>!important</code> 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。</p> + +<p>在一种情况下，你可能不得不使用它：当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。</p> + +<h2 id="CSS位置的影响">CSS位置的影响</h2> + +<p>最后，也很有用，CSS声明的重要性取决于样式表中指定的——它让用户可以设置自定义样式表来覆盖开发人员定义的样式。例如用户可能视力受损，并想在所有网页上设置两倍的正常字体大小，以便更容易进行阅读。</p> + +<h2 id="简而言之">简而言之</h2> + +<p>相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：</p> + +<ol> + <li>用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。</li> + <li>用户样式表中的常规声明(由用户设置的自定义样式)。</li> + <li>作者样式表中的常规声明(这些是我们web开发人员设置的样式)。</li> + <li>作者样式表中的<code>!important</code>声明</li> + <li>用户样式表中的<code>!important</code> 声明</li> +</ol> + +<p>对于web开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖web开发人员样式，正如上面提到的—这可以通过在他们的规则中使用<code>!important</code>来实现。</p> + +<h2 id="主动学习：玩转层叠">主动学习：玩转层叠</h2> + +<p>在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在{{anch("控制继承")}} 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗?</p> + +<p>如果你犯了一个错误，你总是可以用重置按钮重置它。如果你真的卡住了，看看这里的解决方案 <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">进入</a>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> + +<h2 id="接下来做什么呢？">接下来做什么呢？</h2> + +<p>如果您理解了本文的大部分内容，那么就做得很好了—您已经开始熟悉CSS的基本机制。接下来，我们将详细讨论选择器。</p> + +<p>如果您没有完全理解层叠，优先级和继承，也请不要担心！这绝对是我们到目前为止在课程中所涉及到的最复杂的事情，即使是专业的web开发人员有时也会觉得棘手。我们建议您在继续学习这门课程的过程中，反复阅读这篇文章几次，并继续思考它。</p> + +<p>如果您开始遇到样式没有按照预期应用的奇怪问题，请回到这里。这可能是一个特殊的问题。</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..50203520bd --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,196 @@ +--- +title: 调试 CSS +slug: Learn/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>你有时写 CSS 会碰到这样的问题：结果看起来和你想的不太一样。你可能会认为 selector（选择器）匹配到了元素但是什么都没发生，还可能会觉得盒子的大小与你想的有出入。这篇文章会教你着手调试 CSS，向你展示现代浏览器中的 DevTools 是怎样让你更方便地获悉发生了什么。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">必备条件:</th> + <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习浏览器 DevTools 基础、学会对 CSS 进行简单的审查和编辑。</td> + </tr> + </tbody> +</table> + +<h2 id="如何使用浏览器开发者工具">如何使用浏览器开发者工具</h2> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> + +<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> + +<p>我们这节课会重点看用于处理 CSS 的开发者工具中的一些有用特性。为此，我会用<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">一个示例</a>。想跟着学习的话，就在新标签页加载该网页吧，并打开开发者工具（上述文章对该工具有描述）。</p> + +<h2 id="比较_DOM_和_View_Source">比较 DOM 和 View Source</h2> + +<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> + +<p>浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<code><h2></code>，结束标签是<code></h3></code>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <code><h2></code> 起始，以 <code></h2></code> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。</p> + +<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> + +<h2 id="审查_CSS">审查 CSS</h2> + +<p>从页面上选择一个元素，可以通过以下方法：右键该元素，选择审查元素（Inspect）；从 DevTools 左侧 HTML tree 中选择该元素。试试选择 class 为 <code>box1</code> 的元素吧，它是页面上的第一个元素，周围画有边框。</p> + +<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>如果查看 HTML 右边的 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> 栏，你应该能看到该元素的 CSS 属性与值。你能看到直接应用到 <code>box1</code> 类上的规则，还有其继承了祖先的 CSS（该例中指 <code><body></code>）。这在一种情况下就很有帮助——你看到有些 CSS 并非在计划之内（或许它们继承自某个父元素然而你没有覆盖它们）。</p> + +<p>另一个有用的功能是将简写属性展开的功能。在我们的示例里面使用了 <code>margin</code> 的简写。</p> + +<p><strong>点击小箭头来展开界面，显示不同的完整属性和它们的值。</strong></p> + +<p><strong>你可以在 Rules view 面板活动的时候打开或关闭值，在你将光标悬浮在上面的时候，就会出现勾选框。取消勾选一个规则的勾选框，例如 <code>border-radius</code>，CSS 就会停止应用。</strong></p> + +<p>你可以运用这个功能来进行对照实验，来决定是否有东西会在应用了一条规则的时候变得更好看，同时也有助于调试，例如如果一个布局出错，你正在研究究竟是哪项属性是问题的源头的时候。</p> + +<h2 id="编辑值">编辑值</h2> + +<p>除了开关属性以外，你还能编辑它们的值。也许你会想要看看是不是另外一种颜色会更好看，或者希望微调什么东西的大小呢？开发者工具可以省去你耗费在编辑样式表和重载页面上的大量时间。</p> + +<p><strong>选择了 <code>box1</code> 以后，点击显示应用在边框的颜色的色块（被涂上颜色的圆），会打开一个颜色选择器，然后你就能尝试一些不同的颜色，页面上的显示会进行实时的更新。类似地，你也可以用这种方法改变宽度或者边框的样式。</strong></p> + +<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="添加一个新属性">添加一个新属性</h2> + +<p>你可以使用开发者工具添加属性。也许你已经意识到，你不希望你的盒子继承 <code><body></code> 元素的字体大小，想要给它设定专属的特别颜色了？在将它加入到你的 CSS 文件之前，你可以在开发者工具中试一下。</p> + +<p><strong>你可以点击在规则中合拢的花括号，开始向里面键入一个新的声明，此时你可以开始键入新的属性，开发者工具会展示给你一个自动填充的对应属性列表。在选择了 <code>font-size</code> 以后，键入你想要尝试的值。你也可以点击“+”按钮以添加一个对应于相同选择器的规则，将你的新规则加到那里。</strong></p> + +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：在 Rules view 里面还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">检查并编辑 CSS</a>里了解更多。</p> +</div> + +<h2 id="理解盒模型">理解盒模型</h2> + +<p>在之前的课程里我们已经讨论了<a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a>，介绍了替代盒模型，它改变了元素根据给定大小计算自身尺寸的方式，再在这个计算值上加上内边距和边框。开发者工具可以确实帮助你理解元素尺寸的计算方式。</p> + +<p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> 给你展示了一张选定元素的盒模型示意图，还有对能改变元素展示方式的属性和值的描述。你可能原本没有精确地使用元素的属性，只设定了初始值，盒模型也可能包含对于这些属性的描述。</p> + +<p>在这一面板上，被详细说明的属性之一为 <code>box-sizing</code> 属性，它控制了元素使用的盒模型种类。</p> + +<p><strong>将这两个分别带有 <code>box1</code> 和 <code>box2</code> 类的盒子进行比较，它们可能都应用了相同的宽度（400像素），但是 <code>box1</code> 显然更宽。你可以在布局面板上看到，它正在使用 <code>content-box</code> 值，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。</strong></p> + +<p>带有 <code>box2</code> 类的盒子使用了 <code>border-box</code>，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 <code>width: 400px</code>。</p> + +<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：在<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">仔细检查盒模型</a>里了解更多。</p> +</div> + +<h2 id="解决优先级问题">解决优先级问题</h2> + +<p>有的时候，在开发过程中，尤其是在你需要编辑运行站点的 CSS 的时候，你将会发现你很难让一些 CSS 被应用。无论你做了什么，元素看起来就是不听 CSS 使唤。这时候大概发生的事情是，一个更明确的选择器覆盖了你的改动，此时开发者工具也能帮助你解决这个问题。</p> + +<p>在我们的示例文件里，有两个单词被包含在了一个 <code><em></code> 元素里。一个显示为橘黄色，另一个为深粉色。在 CSS 里我们这样写：</p> + +<pre class="brush: css">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>但在样式表里面，这些规则的上面有以 <code>.special</code> 为选择器的规则：</p> + +<pre class="brush: css">.special { + color: orange; +}</pre> + +<p>正如你从<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a>里面，我们讨论的关于优先级的经验中回忆起来的那样，类选择器比元素选择器有更高的优先级，因而这就是实际生效的值。开发工具可以帮忙找出这类问题，尤其是在有效的信息被淹没在一个巨大的样式表的某个角落的时候。</p> + +<p><strong>检查有 <code>.special</code> 类的 <code><em></code> 元素，开发者工具会告诉你橘黄色是实际生效的颜色，还会将应用在 em 上的 <code>color</code> 属性划掉。你这样就能看到是类选择器覆盖了元素选择器了。</strong></p> + +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="进一步了解火狐开发者工具">进一步了解火狐开发者工具</h2> + +<p>在 MDN 这里有很多关于火狐调试工具的信息，看下主要的<a href="/zh-CN/docs/Tools">开发者工具段落</a>，欲了解在本节课中我们简要介绍的事情的细节，请看下<a href="/en-US/docs/Tools/Page_Inspector#How_to">这篇教程</a>。</p> + +<h2 id="在_CSS_中调试问题">在 CSS 中调试问题</h2> + +<p>在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当您发现自己的 CSS 表现不如预期时，应该如何解决呢？ 以下步骤应有所帮助。</p> + +<h3 id="从问题中后退一步">从问题中后退一步</h3> + +<p>任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。 如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。 有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。</p> + +<h3 id="你有一个有效的_HTML_和_CSS_吗？">你有一个有效的 HTML 和 CSS 吗？</h3> + +<p>浏览器希望您的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示您的网页。 如果您的代码有错误，浏览器需要猜测您的意思，并且可能会对您的想法做出不同的决定。 此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。 因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> + <li><a href="https://validator.w3.org/">HTML validator</a></li> +</ul> + +<h3 id="属性和值是否被你正在测试的浏览器所支持">属性和值是否被你正在测试的浏览器所支持?</h3> + +<p>浏览器会忽略他们不理解的 CSS。 如果您正在测试的浏览器不支持您正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。 DevTools 通常会以某种方式突出显示不支持的属性和值。 在下面的屏幕截图中，浏览器不支持以下子网格值 {{cssxref("grid-template-columns")}}.</p> + +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png"></p> + +<p>您还可以查看 MDN 每个属性页底部的浏览器兼容性表。 这些向您显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 <a href="/zh-CN/docs/">这里</a>显示了 {{cssxref("shape-outside")}} 属性的兼容性数据。</p> + +<h3 id="是否有其它东西覆盖了你的_CSS">是否有其它东西覆盖了你的 CSS?</h3> + +<p>在这里，您所学到的关于特定性（specificity）的信息将非常有用。 如果您有一些更特定的内容要覆盖你打算做的，将会比较麻烦。 但是，如上所述，DevTools 将向您显示 CSS 是如何应用的，您可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。</p> + +<h3 id="制作一个精简的问题测试用例">制作一个精简的问题测试用例</h3> + +<p>如果上述步骤未能解决问题，则您需要做更多调查。 此时最好的做法是创建一个称为简化测试用例的东西。 能够“减化问题”是一项非常有用的技能。 这将帮助您在自己的代码和同事的代码中发现问题，还使您能够报告错误并更有效地寻求帮助。</p> + +<p>简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。 这通常意味着将有问题的代码从您的布局中取出，以制作一个仅显示该代码或功能的小示例。</p> + +<p>创建一个简化测试用例:</p> + +<ol> + <li>如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。</li> + <li>如果删除 JavaScript 不能解决问题，请不要包含 JavaScript。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。</li> + <li>删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。</li> + <li>删除掉任何不影响问题的 CSS。</li> +</ol> + +<p>在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。 当发现一些东西时，应该在代码中添加一些注释。 如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。 这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。</p> + +<p>如果您还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。 如果能够表明在寻求帮助之前您已经完成了简化问题并准确确定问题根源的工作，那么会帮助您更容易地获得帮助。 一个更有经验的开发人员也许能够迅速发现问题并为您指明正确的方向，即使没有，您简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。</p> + +<p>如果您的问题实际上是浏览器中的错误，则还可以使用简化的测试用例向相关的浏览器供应商提交错误报告（e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>）。</p> + +<p>随着对 CSS 的使用经验越来越丰富，您会发现发现问题的速度越来越快。 但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。 采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..df40d19a93 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,199 @@ +--- +title: 图像、媒体和表单元素 +slug: Learn/CSS/Building_blocks/Images_media_form_elements +tags: + - CSS 媒体 替换内容 +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>在这节课里，我们来看一下，在CSS中，某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用CSS格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气，本节课将会聚焦于一些你需要知道的主要的事情上。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础的电脑技能、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识、HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>）和对CSS工作原理的大致理解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>.理解元素在经由CSS样式化时，是如何不一样地展现的。</td> + </tr> + </tbody> +</table> + +<h2 id="替换元素">替换元素</h2> + +<p>图像和视频被描述为<strong><a href="/zh-CN/docs/Web/CSS/Replaced_element">替换元素</a></strong>。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是，正如我们将看到的，CSS可以对图像执行多种操作。</p> + +<p>某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。</p> + +<h2 id="调整图像大小">调整图像大小</h2> + +<p>正如你从之前的几节课中所学到的那样，CSS中万物皆盒。如果你把一张图片放在一个盒子里，它的原始长和宽都比盒子的小或大，它要么比盒子显得小，要么从盒子里面溢出出去。你需要决定怎么处理溢出。</p> + +<p>在下面的示例中，我们有两个盒子，大小均为200像素：</p> + +<ul> + <li>一个包含了一张小于200像素的图像，它比盒子小，所以不会拉伸以充满盒子。</li> + <li>另一张图像大于200像素，从盒子里面溢出。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>所以我们能怎么处理溢出问题呢？</p> + +<p>正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">我们之前的课程</a>里面所学的那样，一个常用的技术是将一张图片的{{cssxref("max-width")}}设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<code><a href="/zh-CN/docs/Web/HTML/Element/video"><video></a></code>，或者<code><a href="/zh-CN/docs/Web/HTML/Element/iframe"><iframe></a></code>）起作用。</p> + +<p><strong>尝试向上面的示例中的<code><img></code>元素加入<code>max-width: 100%</code>，你会看到，小的图像不变，而大的变小了，能够放在盒子里。</strong></p> + +<p>你可以对容器内的图像作其他选择，例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小。</p> + +<p>{{cssxref("object-fit")}}属性可以在这里帮助你。当使用<code>object-fit</code>时，替换元素可以以多种方式被调整到合乎盒子的大小。</p> + +<p>下面，我们已经使用了值<code>cover</code>，缩小了图像，维持了图像的比例，所以图像可以整齐地充满盒子，同时由于比例保持不变，图像的一部分将会被盒子裁切掉。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p>如果我们将<code>contain</code>作为值，图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同，这将会导致“开天窗”的结果。</p> + +<p>你可能也想试试<code>fill</code>值，它可以让图像充满盒子，但是不会维持比例。</p> + +<h2 id="布局中的替换元素">布局中的替换元素</h2> + +<p>在替换元素使用各式CSS布局技巧时，你可能深切地体会到他们的展现略微与其他元素不同，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。</p> + +<p>你可以看到这在下面的示例中发生了，下面的示例有个两列两行的网格容器，里面有四个物件。所有的<code><div></code>元素有自己的背景色，拉伸到了充满行和列的地步。但是，图像并没有被拉伸。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>如果你是按顺序读这些课，那么你可能还没有看到布局的部分，只要记住替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，这很必要，避免了他们被布局奇怪地拉伸。</p> + +<p>为了强制图像拉伸，以充满其所在的网格单元，你必须仿照下面做点事情：</p> + +<pre class="brush: css notranslate">img { + width: 100%; + height: 100%; +}</pre> + +<p>这将会无条件地拉伸图像，所以很可能不会是你想要的。</p> + +<h2 id="form元素">form元素</h2> + +<p>用CSS格式化表单元素是一个需要技巧的工作，<a href="/zh-CN/docs/Learn/HTML/Forms">HTML Forms module</a> 包含了详细的格式化表单元素的指导，所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。</p> + +<p>许多表格的控制是通过<code><a href="/zh-CN/docs/Web/HTML/Element/input"><input></a></code>元素的方式实现的，这定义了简单的表格区域，例如文字输入，更进一步还有HTML5新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的<code><a href="/zh-CN/docs/Web/HTML/Element/textarea"><textarea></a></code>，以及那些用来包含和标记表格的一些部分的元素，例如<code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code>和<code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code>。</p> + +<p>HTML5还涵盖了一些特性，它们允许Web开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。</p> + +<h3 id="样式化文本输入元素">样式化文本输入元素</h3> + +<p>允许文本输入的元素，例如<code><input type="text"></code>，特定的类型例如<code><input type="email"></code>以及<code><textarea></code>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变，取决于你的用户访问站点时所使用的操作系统和浏览器。</p> + +<p>在下面的示例中，我们已经将一些文本输入用CSS样式化了，你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>重点</strong>：你应该在改变表单样式的时候小心，确保对于用户而言，它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入，其背景也与周围的内容难以区分开来，但是这会让表单很难识别和填入。</p> +</div> + +<p>正如在本教程的HTML部分的<a href="/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms">form styling</a>课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。</p> + +<h3 id="继承和表单元素">继承和表单元素</h3> + +<p>在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="form元素与box-sizing">form元素与box-sizing</h3> + +<p>跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">我们的盒模型课</a>中学习了<code>box-sizing</code>属性，在样式化表单时候，你可以使用这一知识，确保在给form元素设定宽度和高度时可以有统一的体验。</p> + +<p>为了保证统一，将所有元素的内外边距均设为<code>0</code>是个好主意，然后在单独进行样式化控制的时候将这些加回来。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="其他有用的设置">其他有用的设置</h3> + +<p>除了上面提到的规则以外，你也应该在<code><textarea></code>上设置<code>overflow: auto</code> 以避免IE在不需要滚动条的时候显示滚动条：</p> + +<pre class="brush: css notranslate">textarea { + overflow: auto; +}</pre> + +<h3 id="将一切都放在一起“重置”">将一切都放在一起“重置”</h3> + +<p>作为最后一步，我们可以将上面讨论过的各式属性包起来，成为以下的“表单重置”，以提供一个统一的在其上继续进行工作的地基，这包含了前三节提到的所有东西：</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>备注</strong>：通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的CSS作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个<a href="http://necolas.github.io/normalize.css/">Normalize.css</a>，它被许多项目用作基础，是非常流行的样式表。</p> +</div> + +<p>至于样式化表单的更加深入的信息，可以看下这些教程的HTML一节的这两篇文章：</p> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML Forms</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced Styling for HTML Forms</a></li> +</ul> + +<h2 id="测试你的技能">测试你的技能</h2> + +<p>我们在本文中介绍了很多内容，但是您记住最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_tasks">技能测试</a></p> + +<h2 id="小结">小结</h2> + +<p>这节课致力于说明在你用CSS处理图像、媒体和其他不普通的元素时，你会遇到的不同之处。在下篇文章中，我们将会了解一些在你样式化HTMl表格时有用的技巧。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html new file mode 100644 index 0000000000..e13de7128d --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html @@ -0,0 +1,69 @@ +--- +title: 技能测试：图片和表格元素 +slug: Learn/CSS/Building_blocks/Images_tasks +translation_of: Learn/CSS/Building_blocks/Images_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>该任务的目的是帮助您检查对我们在本课程<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, Media and Form elements</a>(图像，媒体及表格元素）中了解的一些值和单位的理解。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>:您可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a> 之类的在线工具来完成任务可能会更加有所帮助。<br> + <br> + 如果你遇到困难，联系我们获得帮助 — 参见页面底部的{{anch("评价以及更多帮助")}}</p> +</div> + +<h2 id="任务一">任务一</h2> + +<p>在此任务中，您有一张溢出盒子的图像。 我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。</p> + +<p><img alt="An image in a box" src="https://mdn.mozillademos.org/files/17143/mdn-images-object-fit.png" style="height: 384px; width: 746px;"></p> + +<p>在下面的例子中看看你能否能符合上面的图片</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/object-fit-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p> +</div> + +<h2 id="任务二">任务二</h2> + +<p>在此任务中，您会获得一个简单的表格。 您的任务是对该表单的外观进行以下更改：</p> + +<ul> + <li>使用属性选择器定位.myform中的<strong>搜索(search)</strong>字段和按钮。</li> + <li>使表单字段和按钮使用与表单其余部分相同的文本大小。</li> + <li>给表单字段和按钮设置10像素的内边距。</li> + <li>为按钮提供紫色背景，白色前景，无边框和5px的圆角。</li> +</ul> + +<p><img alt="A single line form" src="https://mdn.mozillademos.org/files/17144/mdn-images-form.png" style="height: 120px; width: 1254px;"></p> + +<p>尝试更改下面的实时代码以重新创建图像中显示的示例：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p>为了为了评估或进一步完成任务，请<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/images/form-download.html">下载此任务的起点</a>，以便在您自己的编辑器或在线编辑器中工作。</p> +</div> + +<h2 id="评价以及更多帮助">评价以及更多帮助</h2> + +<p>您可以在上面提到的交互式编辑器中练习这些示例。</p> + +<p>如果您希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：</p> + +<ol> + <li>将您的工作上传到在线共享编辑器中，例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a>.。 您可以自己编写代码，也可以使用以上部分中链接到的起点文件。</li> + <li>在<a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. “学习”类别中写一篇帖子，要求评估帮助。 您的帖子应包括：</li> +</ol> + +<ul> + <li>描述性标题，例如“<strong>Assessment wanted for Images skill test 1”</strong>。</li> + <li>您已经尝试过的内容以及您希望我们做什么的详细信息，例如 <strong>如果您陷入困境并需要帮助</strong>，或者<strong>需要评估</strong>。</li> + <li>指向您要评估或需要帮助的示例的链接（如上面的步骤1中所述）。 这是很好好习惯-如果看不到代码，很难帮助存在问题的人。</li> + <li>指向实际任务或评估页面的链接，因此我们可以找到您需要帮助的问题。</li> +</ul> diff --git a/files/zh-cn/learn/css/building_blocks/index.html b/files/zh-cn/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..f4967d344e --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/index.html @@ -0,0 +1,87 @@ +--- +title: CSS构建 +slug: Learn/CSS/Building_blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">这个模块承接<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>——即你对(CSS)语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。</p> + +<p class="summary">本文目标是，在你进一步了解 <a href="/zh-CN/docs/Learn/CSS/为文本添加样式">为文本添加样式</a>和<a href="/zh_CN/docs/Learn/CSS/CSS_layout">CSS布局</a>之前，为你提供一个助你写出合格CSS和理解所有基本理论的工具箱。</p> + +<h2 id="先决条件">先决条件</h2> + +<p>在开始本模块之前，你应该已经掌握：</p> + +<ol> + <li>使用计算机的基本知识，能够被动使用网络（也就是查看网页的内容）。</li> + <li>建立基本工作环境（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>），知道如何建立和管理文档（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>）。</li> + <li>HTML基础知识（参见<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>模块）。</li> + <li>CSS基础知识（参见<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>模块）。</li> +</ol> + +<div class="note"> +<p><strong>注意：</strong>如果你此刻正使用一台电脑/笔记本/其他设备，而你无法创建自己的文件，那你可以在诸如JSBin或Thimble等网络编辑程序上尝试（多数）程序案例。 </p> +</div> + +<h2 id="指南">指南</h2> + +<p>本模块包含以下文章，这些文章覆盖了绝大部分CSS语言基础。在学习这些文章的过程中，会有很多练习题供你检验自己的理解程度。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承 </a></dt> + <dd>本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></dt> + <dd>有各种类型的CSS选择器，以供我们精确选出要添加样式的元素。在本文及其子文章中，我们会详细过一遍不同类型的选择器，以此窥探CSS选择器的运行机理。子文章包括了：</dd> + <dd> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类以及ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类与伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></dt> + <dd>所有CSS都是包在盒子里的，那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看<em>CSS盒模型</em>，了解其原理及相关术语。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框 </a></dt> + <dd>在这一节课中，我们将会看一下你可以用CSS对背景和边框进行哪些创新。通过添加渐变、背景图片和圆角，背景和边框可以解决许多CSS中的样式问题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同的文本方向</a></dt> + <dd>最近几年来，CSS进行了演化，以更好地支持不同方向的内容，既包括自左至右，又包括自上至下（如日语）的内容——这些不同的排布方向被称作书写模式。随着你在这部分学习中不断前进并开始设计网页布局，理解书写模式将会非常有帮助，因此我们会在本文中进行介绍。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></dt> + <dd>这一节我们会关注CSS中的另一个重要的概念——溢出。溢出发生在一个盒子中包含了过多内容以致超出适当的范围时。在这篇指南中，你将学到什么是溢出以及如何处理它。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></dt> + <dd>CSS中每一个属性都有一个取值或者一系列合理的取值。这一节，我们将了解一些最常用的取值和单位。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></dt> + <dd>通过目前为止的一系列课程，你已经了解了许多使用CSS调整网页项目大小的方法。了解你所设计的不同特性将呈现的大小很重要，我们将在这节课中总结使用CSS调整大小的不同方法，并定义几个有关尺寸的术语，这将对你有所帮助。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图片、媒体和表单元素</a></dt> + <dd>在这一节，我们会了解CSS是如何处理一些特殊元素的。与常规的盒子相比，图片、其他媒体和表格元素对你使用CSS设置样式的能力提出了不同的要求。理解什么能够实现和什么不能够实现将会免去你一些沮丧，这节课会突出一些你需要了解的主要问题。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></dt> + <dd>设计HTML表格的样式并不是多么美妙的工作，但有时却是我们都需要去做的。这篇文章通过突出一些特定的表格样式技巧，为设计好看的HTML表格提供了一份指南。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></dt> + <dd>有时在编写CSS的过程中，你会遇到这样一个问题：你的CSS并没有实现你想要的效果。这篇文章将为你提供指导，教你如何调试CSS问题，以及如何使用所有现代浏览器带有的开发者工具找到问题所在。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></dt> + <dd>当你开始处理更大的样式表和项目时，你将会发现维护一个庞大的样式表非常具有挑战性。在这篇文章中，我们将会简要了解使得CSS易于维护的最佳做法，以及其他人所使用的一些有助于增进可维护性的解决方案。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<p>想要测试一下你的CSS技能吗？下面这些评估将测试你对以上那些指南中的CSS技能的掌握。</p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">CSS基本了解</a></p> + +<p>这项评估测试你对基本语法、选择器、特异性、盒子模型的掌握。</p> + +<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">设计漂亮的信头信笺</a></p> + +<p>如果你想留下良好的印象，用一张漂亮的信头信笺写一封信一定是个好的开始。在这一评估中，你将挑战创建这样一个漂亮的网络样板。</p> + +<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个炫酷的盒子</a></p> + +<p>在这里，你将练习使用背景和边距来创建一个吸引眼球的盒子。</p> + +<h2 id="另见">另见</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></dt> + <dd>这篇文章展示了盒子的小技巧，提供了一些高级特性的介绍，这些特性不适合其他类别的样式，比如盒子阴影、混合模式和滤镜。</dd> +</dl> diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.html b/files/zh-cn/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..6a8b1b7162 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,350 @@ +--- +title: 组织CSS +slug: Learn/CSS/Building_blocks/Organizing +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的CSS文件很有挑战性。在本文中，我们将会简要看一下在编写你的CSS时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>电脑的基本操作，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识, HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），了解CSS的工作方式（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS入门</a>。）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习组织样式表的一些技巧和最佳实践，了解一些命名常规和在组织CSS以及团队协作时广泛使用的工具。</td> + </tr> + </tbody> +</table> + +<h2 id="保持你的CSS整洁的技巧">保持你的CSS整洁的技巧</h2> + +<p>这里有一些关于保持你的样式表整整齐齐的方式的普适性建议。</p> + +<h3 id="你的项目有代码风格规范吗？">你的项目有代码风格规范吗？</h3> + +<p>如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了CSS的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。</p> + +<p>例如你可以看下<a href="/zh-CN/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN的CSS代码规范的示例。</a>.</p> + +<h3 id="保持统一">保持统一</h3> + +<p>如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用Tab还是空格来缩进代码？如果是代码，用多少个？）</p> + +<p>一直遵守一系列规则，你会在编写CSS的时候省去不少精神上的预负担，因为一些决定已经定型了。</p> + +<h3 id="将CSS格式化成可读的形式">将CSS格式化成可读的形式</h3> + +<p>你可以看到很多CSS格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：</p> + +<pre class="brush: css">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>还有的开发者更喜欢将所有的东西放在新的一行：</p> + +<pre class="brush: css">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>CSS不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。</p> + +<h3 id="为你的CSS加注释">为你的CSS加注释</h3> + +<p>在你的CSS里加入注释，不仅可以帮任何未来的开发者处理你的CSS文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。</p> + +<pre class="brush: css">/* 这是一条CSS注释， +它可以分成好几行。*/</pre> + +<p>在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段CSS的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是<code>||</code>。</p> + +<pre class="brush: css">/* || General styles */ + +... + +/* || Typography */ + +... + +/* || Header and Main Navigation */ + +... + +</pre> + +<p>你不必在你的CSS中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。</p> + +<p>为了对旧浏览器保持兼容，你用某种特殊方法使用了一种CSS属性，示例：</p> + +<pre class="brush: css">.box { + background-color: red; /* fallback for older browsers that don't support gradients */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>或许你是照着一个教程来做事的，CSS有些不够直观。此时，你应该在注释里面加入教程的URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。</p> + +<h3 id="在你的样式表里面加入逻辑段落">在你的样式表里面加入逻辑段落</h3> + +<p>在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。典型地，你可以为以下的元素设定规则：</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code>和<code>ol</code></li> + <li><code>table</code>属性</li> + <li>链接</li> +</ul> + +<p>在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。</p> + +<pre class="brush: css">/* || GENERAL STYLES */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。</p> + +<pre class="brush: css">/* || UTILITIES */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。</p> + +<pre class="brush: css">/* || SITEWIDE */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>最后我们可以在CSS里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。</p> + +<pre class="brush: css">/* || STORE PAGES */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。</p> + +<h3 id="避免太特定的选择器">避免太特定的选择器</h3> + +<p>如果你创建了很特定的选择器，你经常会发现，你需要在你的CSS中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有<code>main</code>类的<code><article></code>里面的带有<code>box</code>类的<code><p></code>上应用了规则。</p> + +<pre class="brush: css">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>如果你之后想要在<code>main</code>外的什么地方上应用相同的规则，或者在<code><p></code>外的其他地方，你可能必须在这些规则中加入另一个选择器，或者直接新建个规则。或者，你也可以建立一个名为<code>box</code>的类，在任何地方应用。</p> + +<pre class="brush: css">.box { + border: 1px solid #ccc; +}</pre> + +<p>将东西设置的更为特定，有时也有意义，但是这一般与其说是通常实践，倒不如说是例外。</p> + +<h3 id="将大样式表分成几个小的样式表">将大样式表分成几个小的样式表</h3> + +<p>尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠前的样式表里面的规则会比后面的有更高优先级。</p> + +<p>例如我们会将我们站点的一部分作为一个在线商店，许多CSS只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。</p> + +<p>这可以让你更容易保持CSS的组织性，也意味着如果有多人在写CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。</p> + +<h2 id="其他能帮上忙的工具">其他能帮上忙的工具</h2> + +<p>CSS本身没有什么内置的组织方式，所以你需要自己完成建立编写CSS时维持统一性和规则的工作。Web社区也已经开发了多种工具和方法，帮助你管理大些的CSS项目。由于它们对你的研究会有帮助，而且在你和其他人协作的时候，你也很可能会遇到这些东西，我们加入了一个对其中一些工具和方式的简短的指导。</p> + +<h3 id="CSS方法论">CSS方法论</h3> + +<p>不必需要自己制定编写CSS的规则，你可以选择接纳一个已经已经由社群设计、经由诸多项目检验的方法，并从中获益。这些方法论都是有着结构化的编写和组织CSS途径的CSS代码指南。典型地，与你为你的项目编写和优化每个选择器为自己定义的规则组相比，它们会倾向于产生更多的多余代码。</p> + +<p>但是，在接纳了一个方法以后，你的代码会更有条理，而且因为这些体系许多都是被很广泛使用的，其他的开发者更有可能理解你在使用的方式，会以相同的方式编写他们自己的代码，而不需要从头接纳你自己的个人方法论。</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>你会遇到的大多数方式都有一部分归功于面向对象的CSS（OOCSS）的概念，这是一种因<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan的努力</a>而流行的方式。OOCSS的基本理念是将你的CSS分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS的标准示例是在<a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。</p> + +<p>如果你没有使用一种OOCSS的方法，你或许会创建一个用在这种排布所应用的不同地方的自定义CSS，例如创建一个叫做<code>comment</code>的类，用于组件部分的一组规则，然后是叫做<code>list-item</code>的类，除了一些细小的区别外，它几乎和<code>comment</code>类完全相同。这两个组件之间的不同是列表项有一个底边，在评论里的图像有边框而列表项里面的图像没有。</p> + +<pre class="brush: css">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>在OOCSS中，你可以建立一个叫作<code>media</code>的排布，里面包含所有的两种排布所共有的CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。</p> + +<pre class="brush: css">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + + .list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>在你的HTML里面，评论需要同时应用<code>media</code>和<code>comment</code>类：</p> + +<pre class="brush: html"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>列表项应用了<code>media</code>和<code>list-item</code>：</p> + +<pre class="brush: html"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Nicole Sullivan在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守OOCSS方式的人，今天也可以大致以这种方式复用CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM即为块级元素修饰字符（Block Element Modifier）。在BEM中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用BEM的代码，因为代码中在CSS的类里使用了多余的一个下划线和连字符。例如看看这个来自关于<a href="http://getbem.com/naming/">BEM命名常规</a>的页面里面的HTML所应用的类：</p> + +<pre class="brush: html"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>增加的类和应用到OOCSS例子里面的相似，但是它们遵守了BEM严格的命名常规。</p> + +<p>BEM在大些的Web项目中被广泛使用，许多人用这种方式写他们的CSS。你可能会在没有提及为何CSS如此布局的时候，遇到BEM语法的例子，甚至是在教程中</p> + +<p>阅读<a href="https://css-tricks.com/bem-101/">BEM 101</a> 中关于CSS Tricks的段落以了解更多和这个系统相关的信息。</p> + +<h4 id="其他常见体系">其他常见体系</h4> + +<p>应用中，有很多这样的体系。其他流行的方式包括Jonathan Snook创造的<a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>、Harry Roberts的<a href="https://itcss.io/">ITCSS</a>以及原本由Yahoo!创造的<a href="https://acss.io/">Atomic CSS (ACSS)</a>。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。</p> + +<p>使用这样的体系的缺点是，它们会看起来过于复杂，尤其是对于小项目。</p> + +<h3 id="CSS的构建体系">CSS的构建体系</h3> + +<p>另一种组织CSS的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写CSS。有很多工具，我们将它们分成<strong>预处理工具</strong>和<strong>后处理工具</strong>。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。</p> + +<p>使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。</p> + +<p>最为流行的预处理工具是<a href="https://sass-lang.com/">Sass</a>，这里不是Sass的教程，所以我只会简要地解释一些Sass能做的事情，在组织的时候真的会帮到你，即使你没有用到Sass的任何其他的独特功能。</p> + +<h4 id="定义变量">定义变量</h4> + +<p>CSS现在有原生的<a href="/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">自定义属性</a>，所以这个功能越来越没那么重要了，但是你使用Sass的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。</p> + +<p>如果我们创建了在下面的第一行里面叫做<code>$base-color</code>的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。</p> + +<pre class="brush: css"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>编译完CSS后，你会在最终的样式表里面得到下面的CSS：</p> + +<pre class="brush: css"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="编译组件样式表">编译组件样式表</h4> + +<p>我在上面提到了，一种组织CSS的方式是将样式表分成小的样式表。在使用Sass时，你可以在另一个层次上理解，然后得到许多小样式表——甚至到了每个组件都有一个独立样式表的地步。使用Sass中的include功能，这些都可以被编译为一个、或者少数几个真正链接到你的网站的样式表。</p> + +<p>在<a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">这篇博文</a>里面，你可以看下一个开发者是如何处理这个问题的。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>一个简单的尝试Sass的方式是使用<a href="https://codepen.io">CodePen</a>，你可以为一个Pen在设置中启用用于你的CSS的Sass，CodePen将会为你运行Sass语法分析功能，这样你就能看到应用了普通CSS的生成网页。有时你会发现CSS教程在它们的CodePen演示里面使用了Sass而不是普通CSS，所以了解一点点关于Sass的事情是有用的。</p> +</div> + +<h4 id="后处理以进行优化">后处理以进行优化</h4> + +<p>如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化CSS。后处理解决方案中，通过这种方式实现的一个例子是<a href="https://cssnano.co/">cssnano</a>。</p> + +<h2 id="结语">结语</h2> + +<p>这是我们学习CSS的指导的最后一部分，正如你所见，你可以通过许多方式从这里继续对CSS的探索。</p> + +<p>欲了解更多关于CSS布局的事情，查看<a href="/zh-CN/docs/Learn/CSS/CSS_layout">学习CSS布局</a>这节课.</p> + +<p>你应该也有了探索<a href="/zh-CN/docs/Web/CSS">MDN CSS</a>学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的<a href="/zh-CN/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a>来了解可用的排布，在诸如<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>的一些更加专门的指导里阅读更多。.</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..0e4985ea03 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,119 @@ +--- +title: 溢出的内容 +slug: Learn/CSS/Building_blocks/Overflowing_content +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>本节课，我们来了解一下CSS中另外一个重要的概念——<strong>溢出</strong>。溢出是在盒子无法容纳下太多的内容的时候发生的。在这篇教程里面，你将会学习到什么是溢出，以及如何控制它。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提：</th> + <td>基础的电脑知识，<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>, <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识, HTML基础（学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），对CSS的工作原理有所了解（学习 <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解溢出和控制溢出的方法。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是溢出？">什么是溢出？</h2> + +<p>我们知道，CSS中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。</p> + +<h2 id="CSS尽力减少“数据损失”">CSS尽力减少“数据损失”</h2> + +<p>我们从两个展示了在碰到溢出的时候，CSS默认会如何处理的例子开始吧。</p> + +<p>第一个例子是，一个盒子，在块方向上已经受到<code>height</code>的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>第二个例子是一个单词，位于在内联方向上受到限制的盒子里面。盒子已经被做得小到无法放置那个单词的地步，于是那个单词就突破了盒子的限制。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>你也许会好奇，为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？</p> + +<p>只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。</p> + +<p>如果你已经用<code>width</code>或者<code>height</code>限制住了一个盒子，CSS假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。</p> + +<p>在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！</p> + +<h2 id="overflow属性">overflow属性</h2> + +<p>{{cssxref("overflow")}}属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。<code>overflow</code>的默认值为<code>visible</code>，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。</p> + +<p>如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置<code>overflow: hidden</code>。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>也许你还会想在有内容溢出的时候加个滚动条？如果你用了<code>overflow: scroll</code>，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。</p> + +<p><strong>如果你移除了下面的盒子里的一些内容，你可以看一下，滚动条是否还会在没有能滚动的东西的时候保留。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>在以上的例子里面，我们仅仅需要在<code>y</code>轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用{{cssxref("overflow-y")}}属性，设置<code>overflow-y: scroll</code>来仅在<code>y</code>轴方向滚动。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>你也可以用{{cssxref("overflow-x")}}，以在x轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS里面调整大小</a>这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p>和<code>scroll</code>一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 你可以用<code>overflow</code>属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对<code>overflow-x</code>生效而第二个对<code>overflow-y</code>生效。否则，<code>overflow-x</code>和<code>overflow-y</code>将会被设置成同样的值。例如，<code>overflow: scroll hidden</code>会把<code>overflow-x</code>设置成<code>scroll</code>，而<code>overflow-y</code>则为<code>hidden</code>。</p> +</div> + +<p>如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用<code>overflow: auto</code>。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。</p> + +<p><strong>在下面的例子里面，移除一些内容，直到能够装在盒子里面，你还会看到滚动条消失了。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="溢出建立了块级排版上下文">溢出建立了块级排版上下文</h2> + +<p>CSS中有所谓<strong>块级排版上下文（</strong><strong>Block Formatting Context，BFC）</strong>的概念<strong>。</strong>现在你不用太过在意，但是你应该知道，在你使用诸如<code>scroll</code>或者<code>auto</code>的时候，你就建立了一个块级排版上下文。结果就是，你改变了<code>overflow</code>的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。</p> + +<h2 id="网页设计时不需要的溢出">网页设计时不需要的溢出</h2> + +<p>现代网页布局的方式（正如<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。</p> + +<p>在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。</p> + +<h2 id="小结">小结</h2> + +<p>这节短短的课已经介绍了溢出的概念，你现在明白，CSS会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..20cd580e97 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: 属性选择器 +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习属性选择器是什么，如何使用。</td> + </tr> + </tbody> +</table> + +<h2 id="存否和值选择器">存否和值选择器</h2> + +<p>这些选择器允许基于一个元素自身是否存在（例如<code>href</code>）或者基于各式不同的按属性值的匹配，来选取元素。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素——方括号里的值。</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值正为<em>value</em>——引号中的字符串。</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p>匹配带有一个名为<em>attr</em>的属性的元素 ，其值正为<em>value</em>，或者匹配带有一个<em>attr</em>属性的元素，其值有一个或者更多，至少有一个和<em>value</em>匹配。</p> + + <p>注意，在一列中的好几个值，是用空格隔开的。</p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值可正为<em>value</em>，或者开始为<em>value</em>，后面紧随着一个连字符。</td> + </tr> + </tbody> +</table> + +<p>下面的示例中，你可以看到这些选择器是怎样使用的。</p> + +<ul> + <li>使用<code>li[class]</code>，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。</li> + <li><code>li[class="a"]</code>匹配带有一个<code>a</code>类的选择器，不过不会选中一部分值为<code>a</code>而另一部分是另一个用空格隔开的值的类，它选中了第二项。</li> + <li><code>li[class~="a"]</code>会匹配一个<code>a</code>类，不过也可以匹配一列用空格分开、包含<code>a</code>类的值，它选中了第二和第三项。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="子字符串匹配选择器">子字符串匹配选择器</h2> + +<p>这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有<code>box-warning</code>和<code>box-error</code>类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用<code>[class^="box-"]</code>来把它们两个都选中。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值开头为<em>value</em>子字符串。</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值结尾为<em>value</em>子字符串</td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em>value</em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>匹配带有一个名为<em>attr</em>的属性的元素，其值的字符串中的任何地方，至少出现了一次<em>value</em>子字符串。</td> + </tr> + </tbody> +</table> + +<p>下个示例展示了这些选择器的用法：</p> + +<ul> + <li><code>li[class^="a"]</code>匹配了任何值开头为<code>a</code>的属性，于是匹配了前两项。</li> + <li><code>li[class$="a"]</code>匹配了任何值结尾为<code>a</code>的属性，于是匹配了第一和第三项。</li> + <li><code>li[class*="a"]</code>匹配了任何值的字符串中出现了<code>a</code>的属性，于是匹配了所有项。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="大小写敏感">大小写敏感</h2> + +<p>如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用<code>i</code>值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。</p> + +<p>下面的示例中，第一个选择器将会匹配一个开头为<code>a</code>的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>此外还有一个更加新的<code>s</code>值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为HTML时也没啥用。</p> +</div> + +<h2 id="接下来……">接下来……</h2> + +<p>现在我们完成了属性选择器的学习，你可以继续读下篇文章——关于<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素选择器</a>的事情。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..3766312aff --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,109 @@ +--- +title: 关系选择器 +slug: Learn/CSS/Building_blocks/Selectors/Combinators +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解CSS里面可用的不同关系选择器。</td> + </tr> + </tbody> +</table> + +<h2 id="后代选择器">后代选择器</h2> + +<p>后代选择器——典型用单个空格（<code> </code>）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。</p> + +<pre class="brush: css notranslate">body article p</pre> + +<p>下面的示例中，我们只会匹配处于带有<code>.box</code>类的元素里面的<code><p></code>元素。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="子代关系选择器">子代关系选择器</h2> + +<p>子代关系选择器是个大于号（<code>></code>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<code><article></code>的直接子元素的<code><p></code>元素：</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>下个示例中，我们弄了个有序列表，内嵌于另一个无序列表里面。我用子代关系选择器，只选中为<code><ul></code>的直接子元素的<code><li></code>元素，给了它们一个顶端边框。</p> + +<p>如果你移去指定子代选择器的<code>></code>的话，你最后得到的是后代选择器，所有的<code><li></code>会有个红色的边框。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="邻接兄弟">邻接兄弟</h2> + +<p>邻接兄弟选择器（<code>+</code>）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<code><p></code>元素之后的<code><img></code>元素：</p> + +<pre class="brush: css notranslate">p + img</pre> + +<p>常见的使用场景是， 改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<code><h1></code>的段，然后样式化它。</p> + +<p>如果你往<code><h1></code>和<code><p></code>之间插入其他的某个元素，例如<code><h2></code>，你将会发现，段落不再与选择器匹配，因而不会应用元素邻接时的前景和背景色。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="通用兄弟">通用兄弟</h2> + +<p>如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（<code>~</code>）。要选中所有的<code><p></code>元素后<em>任何地方</em>的<code><img></code>元素，我们会这样做：</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>在下面的示例中，我们选中了所有的 <code><h1></code>之后的<code><p></code>元素，虽然文档中还有个 <code><div></code>，其后的<code><p></code>还是被选中了。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="使用关系选择器">使用关系选择器</h2> + +<p>你能用关系选择器，将任何在我们前面的学习过程中学到的选择器组合起来，选出你的文档中的一部分。例如如果我们想选中为<code><ul></code>的直接子元素的带有“a”类的列表项的话，我可以用下面的代码。</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>不过，建立一长列选中你的文档中很明确的部分的选择器的时候，小心一些。这些CSS规则难以复用，因为你让选择器在表示标记文本中的元素的相对位置上过于明确。</p> + +<p>建立简单的一个类，然后把它应用到有需求的元素上，经常会是更好的做法。不过话说回来，如果你需要让你的文档变换一下样式，但是没法编辑HTML（也许是因为它由CMS生成）的话，你的关系选择器的知识会派上用场。</p> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>我们已经在这篇文章里讲了许多内容，不过你能记住最重要的信息吗？你可以找些更深入的测试，在继续下去之前，验证你是否已经获取了这些信息——见<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">小试牛刀：选择器</a>。</p> + +<h2 id="继续学习">继续学习</h2> + +<p>这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习CSS的另一个重要部分——<a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">CSS盒模型</a>。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cbc655cf38 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,228 @@ +--- +title: CSS选择器 +slug: Learn/CSS/Building_blocks/Selectors +tags: + - CSS + - CSS选择器 + - 初学者 + - 类 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div> {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">{{Glossary("CSS")}}中，选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>计算机的基本知识， <a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基础软件</a>，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识，HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>）以及对CSS工作方式的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>详细学习CSS选择器的工作方式。</td> + </tr> + </tbody> +</table> + +<h2 id="选择器是什么？">选择器是什么？</h2> + +<p>你也许已经见过选择器了。CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如<code>h1</code>的元素，或者是根据class (类) 选择例如<code>.special</code>。</p> + +<p>CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在<a href="https://www.w3.org/TR/selectors-3/">CSS 3</a>中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。</p> + +<h2 id="选择器列表">选择器列表</h2> + +<p>如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的<code>h1</code>和<code>.special</code>类有相同的CSS，那么我可以把它们写成两个分开的规则。</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>我也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>在下面的实时示例中，试着把两个有ID声明的选择器组合起来。外观在组合起来以后应该还是一样的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。</p> + +<p>在下面的示例中，无效的class选择器会被忽略，而<code>h1</code>选择器仍会被样式化。</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>但是在被组合起来以后，整个规则都会失效，无论是<code>h1</code>还是这个class都不会被样式化。</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="选择器的种类">选择器的种类</h2> + +<p>有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。</p> + +<h3 id="类型、类和ID选择器">类型、类和ID选择器</h3> + +<p>这个选择器组，第一个是指向了所有HTML元素<code><h1>。</code></p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>它也包含了一个class的选择器：</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>亦或，一个id选择器：</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="标签属性选择器">标签属性选择器</h3> + +<p>这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>或者根据一个有特定值的标签属性是否存在来选择：</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="伪类与伪元素">伪类与伪元素</h3> + +<p>这组选择器包含了伪类，用来样式化一个元素的特定状态。例如<code>:hover</code>伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，<code>::first-line</code>是会选择一个元素（下面的情况中是<code><p></code>）中的第一行，类似<code><span></code>包在了第一个被格式化的行外面，然后选择这个<code><span></code>。</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="运算符">运算符</h3> + +<p>最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（<code>></code>）选择了<code><article></code>元素的初代子元素。</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="接下来要做的事情">接下来要做的事情</h2> + +<p>你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是MDN上——的各种选择器的直接链接；你也可以继续下去，开始你的了解<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类和ID选择器</a>的旅程。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="选择器参考表">选择器参考表</h2> + +<p>下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的MDN页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验CSS的时候。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">示例</th> + <th scope="col">学习CSS的教程</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Type_selectors">类型选择器</a></td> + <td><code>h1 { }</code></td> + <td><a href="/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">类型选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配选择器</a></td> + <td><code>* { }</code></td> + <td><a href="/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">通配选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Class_selectors">类选择器</a></td> + <td><code>.box { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">类选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/ID_selectors">ID选择器</a></td> + <td><code>#unique { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Attribute_selectors">标签属性选择器</a></td> + <td><code>a[title] { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">标签属性选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Pseudo-classes">伪类选择器</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">伪类</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素选择器</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">伪元素</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Descendant_combinator">后代选择器</a></td> + <td><code>article p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">后代运算符</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Child_combinator">子代选择器</a></td> + <td><code>article > p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子代选择器</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator">相邻兄弟选择器</a></td> + <td><code>h1 + p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">相邻兄弟</a></td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/CSS/General_sibling_combinator">通用兄弟选择器</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="https://developer.mozilla.org/zh-CN/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">通用兄弟</a></td> + </tr> + </tbody> +</table> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">CSS选择器</a> + <ul> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">标签，类，ID选择器</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">属性选择器</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">伪类和伪元素</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a class="new" rel="nofollow" title="该页面尚未创建。">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..776b149893 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,393 @@ +--- +title: 伪类和伪元素 +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>下一组我们将了解的选择器被称为<strong>伪类</strong>和<strong>伪元素</strong>。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的MDN页面都将帮助你了解各浏览器的支持情况。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解伪类和伪元素选择器</td> + </tr> + </tbody> +</table> + +<h2 id="什么是伪类？">什么是伪类？</h2> + +<p>伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。</p> + +<p>伪类就是开头为冒号的关键字：</p> + +<pre class="notranslate">:<em>pseudo-class-name</em></pre> + +<h3 id="简单伪类示例">简单伪类示例</h3> + +<p>让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加CSS，正如下面的示例展示的这样：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>不过，这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用{{cssxref(":first-child")}}伪类选择器——这将<em>一直</em>选中文章中的第一个子元素，我们将不再需要编辑HTML（编辑HTML并不总是可行，也许是因为它是由一个CMS生成的）。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的HTML加入类一样。看下MDN上的另外几个示例：</p> + +<ul> + <li><code><a href="/zh-CN/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/zh-CN/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/zh-Cn/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<h3 id="用户行为伪类">用户行为伪类</h3> + +<p>一些伪类只会在用户以某种方式和文档交互的时候应用。这些<strong>用户行为伪类</strong>，有时叫做<strong>动态伪类</strong>，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code>——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。</li> + <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>——只会在用户使用键盘控制，选定元素的时候激活。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="伪元素是啥？">伪元素是啥？</h2> + +<p>伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号<code>::</code>。</p> + +<pre class="notranslate"><em>::pseudo-element-name</em></pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。</p> +</div> + +<p>例如，如果你想选中一段的第一行，你可以把它用一个<code><span></code>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变HTML的方式来可预测地这么做是不可能的。</p> + +<p><code>::first-line</code>伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>这表现得就像是<code><span></code>神奇地包在第一个被格式化的行一样，每当行长改变的时候还会更新。</p> + +<p>你可以看到它把两段的第一行都选中了。</p> + +<h2 id="把伪类和伪元素组合起来">把伪类和伪元素组合起来</h2> + +<p>如果你想让第一段的第一行加粗，你需要把<code>:first-child</code>和<code>::first-line</code>选择器放到一起。试着编辑前面的实时示例，让它使用下面的CSS。这里的意思是，我们想选择一个<code><article></code>元素里面的第一个<code><p></code>元素的第一行。</p> + +<pre class="brush: css notranslate"><code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="生成带有before和after的内容">生成带有::before和::after的内容</h2> + +<p>有一组特别的伪元素，它们和<code><a href="/en-US/docs/Web/CSS/content">content</a></code>属性一同使用，使用CSS将内容插入到你的文档中中。</p> + +<p>你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变{{cssxref("content")}}属性的文本值，看看输出是怎么改变的。你也能改变<code>::before</code>伪元素为<code>::after</code>，看到这段文本插入到了元素的末尾而不是开头。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>从CSS插入文本字符串，我们并不会在Web浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。</p> + +<p>这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。</p> + +<p>下个示例，我们已经用 <code>::before</code>伪元素加入了个空字符串。我们把它设为了<code>display: block</code>，以让它可以用width和height进行样式化。然后我们可以用CSS像任何元素那样样式化。你可以摆弄CSS，改变它的外观和行为。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p><code>::before</code>和<code>::after</code>伪元素与<code>content</code>属性的共同使用，在CSS中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。<a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>网站就是一个著名的示例，它帮你用CSS生成一个箭头。在你创建你的箭头的时候看下CSS，你将会看到实际使用的{{cssxref("::before")}}和{{cssxref("::after")}}伪元素。无论什么时候你看到了这些选择器，都要看下{{cssxref("content")}}属性，以了解文档中添加了什么。</p> + +<h2 id="参考节">参考节</h2> + +<p>有很多伪类和伪元素，所以有一个用于参考的列表会有用。下面是列出它们的表格，链接到了MDN上它们的参考页。把这作为参考，看看你能选中什么。</p> + +<h3 id="伪类">伪类</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref(":active") }}</td> + <td>在用户激活（例如点击）元素的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":any-link") }}</td> + <td>匹配一个链接的<code>:link</code>和<code>:visited</code>状态。</td> + </tr> + <tr> + <td>{{ Cssxref(":blank") }}</td> + <td>匹配空输入值的<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code>元素</a>。</td> + </tr> + <tr> + <td>{{ Cssxref(":checked") }}</td> + <td>匹配处于选中状态的单选或者复选框。</td> + </tr> + <tr> + <td>{{ Cssxref(":current") }}</td> + <td>匹配正在展示的元素，或者其上级元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":default") }}</td> + <td>匹配一组相似的元素中默认的一个或者更多的UI元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":dir") }}</td> + <td>基于其方向性（HTML<code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code>属性或者CSS<code><a href="/en-US/docs/Web/CSS/direction">direction</a></code>属性的值）匹配一个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":disabled") }}</td> + <td>匹配处于关闭状态的用户界面元素</td> + </tr> + <tr> + <td>{{ Cssxref(":empty") }}</td> + <td>匹配除了可能存在的空格外，没有子元素的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":enabled") }}</td> + <td>匹配处于开启状态的用户界面元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":first") }}</td> + <td>匹配<a href="/en-US/docs/Web/CSS/Paged_Media">分页媒体</a>的第一页。</td> + </tr> + <tr> + <td>{{ Cssxref(":first-child") }}</td> + <td>匹配兄弟元素中的第一个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":first-of-type") }}</td> + <td>匹配兄弟元素中第一个某种类型的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus") }}</td> + <td>当一个元素有焦点的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-visible")}}</td> + <td>当元素有焦点，且焦点对用户可见的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-within") }}</td> + <td>匹配有焦点的元素，以及子代元素有焦点的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":future") }}</td> + <td>匹配当前元素之后的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":hover") }}</td> + <td>当用户悬浮到一个元素之上的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":indeterminate") }}</td> + <td>匹配未定态值的UI元素，通常为<a href="/en-US/docs/Web/HTML/Element/input/checkbox">复选框</a>。</td> + </tr> + <tr> + <td>{{ Cssxref(":in-range") }}</td> + <td>用一个区间匹配元素，当值处于区间之内时匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":invalid") }}</td> + <td>匹配诸如<code><input></code>的位于不可用状态的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":lang") }}</td> + <td>基于语言（HTML<a href="/zh-CN/docs/Web/HTML/Global_attributes/lang">lang</a>属性的值）匹配元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":last-child") }}</td> + <td>匹配兄弟元素中最末的那个元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":last-of-type") }}</td> + <td>匹配兄弟元素中最后一个某种类型的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":left") }}</td> + <td>在<a href="/zh-CN/docs/Web/CSS/CSS_Pages">分页媒体</a>中，匹配左手边的页。</td> + </tr> + <tr> + <td>{{ Cssxref(":link")}}</td> + <td>匹配未曾访问的链接。</td> + </tr> + <tr> + <td>{{ Cssxref(":local-link")}}</td> + <td>匹配指向和当前文档同一网站页面的链接。</td> + </tr> + <tr> + <td>{{ Cssxref(":is", ":is()")}}</td> + <td>匹配传入的选择器列表中的任何选择器。</td> + </tr> + <tr> + <td>{{ Cssxref(":not") }}</td> + <td>匹配作为值传入自身的选择器未匹配的物件。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-child") }}</td> + <td>匹配一列兄弟元素中的元素——兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-of-type") }}</td> + <td>匹配某种类型的一列兄弟元素（比如，<code><p></code>元素）——兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-child") }}</td> + <td>匹配一列兄弟元素，从后往前倒数。兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-of-type") }}</td> + <td>匹配某种类型的一列兄弟元素（比如，<code><p></code>元素），从后往前倒数。兄弟元素按照<var>an+b</var>形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。</td> + </tr> + <tr> + <td>{{ Cssxref(":only-child") }}</td> + <td>匹配没有兄弟元素的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":only-of-type") }}</td> + <td>匹配兄弟元素中某类型仅有的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":optional") }}</td> + <td>匹配不是必填的form元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":out-of-range") }}</td> + <td>按区间匹配元素，当值不在区间内的的时候匹配。</td> + </tr> + <tr> + <td>{{ Cssxref(":past") }}</td> + <td>匹配当前元素之前的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":placeholder-shown") }}</td> + <td>匹配显示占位文字的input元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":playing") }}</td> + <td>匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":paused") }}</td> + <td>匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":read-only") }}</td> + <td>匹配用户不可更改的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":read-write") }}</td> + <td>匹配用户可更改的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":required") }}</td> + <td>匹配必填的form元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":right") }}</td> + <td>在<a href="/zh-CN/docs/Web/CSS/CSS_Pages">分页媒体</a>中，匹配右手边的页。</td> + </tr> + <tr> + <td>{{ Cssxref(":root") }}</td> + <td>匹配文档的根元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":scope") }}</td> + <td>匹配任何为参考点元素的的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":valid") }}</td> + <td>匹配诸如<code><input></code>元素的处于可用状态的元素。</td> + </tr> + <tr> + <td>{{ Cssxref(":target") }}</td> + <td>匹配当前URL目标的元素（例如如果它有一个匹配当前<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL分段</a>的元素）。</td> + </tr> + <tr> + <td>{{ Cssxref(":visited") }}</td> + <td>匹配已访问链接。</td> + </tr> + </tbody> +</table> + +<h3 id="伪元素">伪元素</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">选择器</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref("::after") }}</td> + <td>匹配出现在原有元素的实际内容之后的一个可样式化元素。</td> + </tr> + <tr> + <td>{{ Cssxref("::before") }}</td> + <td>匹配出现在原有元素的实际内容之前的一个可样式化元素。</td> + </tr> + <tr> + <td>{{ Cssxref("::first-letter") }}</td> + <td>匹配元素的第一个字母。</td> + </tr> + <tr> + <td>{{ Cssxref("::first-line") }}</td> + <td>匹配包含此伪元素的元素的第一行。</td> + </tr> + <tr> + <td>{{ Cssxref("::grammar-error") }}</td> + <td>匹配文档中包含了浏览器标记的语法错误的那部分。</td> + </tr> + <tr> + <td>{{ Cssxref("::selection") }}</td> + <td>匹配文档中被选择的那部分。</td> + </tr> + <tr> + <td>{{ Cssxref("::spelling-error") }}</td> + <td>匹配文档中包含了浏览器标记的拼写错误的那部分。</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html new file mode 100644 index 0000000000..17f2ecf366 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -0,0 +1,132 @@ +--- +title: 'Test your skills: Selectors' +slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +--- +<div>{{LearnSidebar}}</div> + +<p>这个任务的目的是帮助你理解CSS里的选择器。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>:你可以 在下面那些交换编辑器中尝试解决问题，然而 把代码下载然后使用一个在线工具比如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> 去解决这些问题可能对你更有作用。</p> + +<p>如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的{{anch("Assessment or further help")}} 部分。</p> +</div> + +<h2 id="选择器一">选择器一</h2> + +<p>在没有改变HTML的情况下，使用CSS去完成下面的要求：:</p> + +<ul> + <li>使一级标题的字体颜色为蓝色</li> + <li>使二级标题有一个蓝色背景且白色文本。</li> + <li>使跨距中换行的文本的字体大小为200%。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器二">选择器二</h2> + +<p>在没有改变HTML的情况下，对本例中内容的外观进行以下更改：</p> + +<ul> + <li>让id为 <code>special</code> 的元素有一个黄色背景。</li> + <li>让使用类 <code>alert</code> 的元素有一个 1px 的灰色边框。</li> + <li>如果一个元素使用了 <code>alert</code> 类还有 <code>stop</code>类， 让它的背景变为红色。</li> + <li>如果一个元素使用 <code>alert</code> 类还有 <code>go</code>类，让它的背景变为绿色。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器三">选择器三</h2> + +<p>在本例中，尝试在不添加HTML的情况下进行以下更改。</p> + +<ul> + <li>链接文本的样式：使链接为橘色，被访问后变为绿色，当被hover时，移除链接文本的下划线。</li> + <li>让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。</li> + <li>让表格中每隔一行条带化，分别给它们一个颜色为#333的背景和一个白色前景。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器四">选择器四</h2> + +<p>在这个任务中尝试下面这个任务:</p> + +<ul> + <li>让任何直接跟随二级标题的段落颜色为红色。</li> + <li>移除使用了list类的无效列表的儿子元素前面的原点并给他们添加一个1px的灰色下边框。</li> +</ul> + +<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="选择器五">选择器五</h2> + +<p>在最后一个任务中，使用属性选择器添加CSS以执行以下操作：</p> + +<ul> + <li>Target the <code><a></code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li> + <li>Target the <code><a></code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li> + <li>Target the <code><a></code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li> +</ul> + +<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..82253a8997 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 类型、类和ID选择器 +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>本节课中，我们看下可用的最简单的选择器，在你的工作中，它们很有可能会是最常用到的。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>基本电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基础的软件</a>，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识，HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的理解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习不同的CSS选择器，通过它们将CSS应用到文档中。</td> + </tr> + </tbody> +</table> + +<h2 id="类型选择器">类型选择器</h2> + +<p><strong>类型选择器</strong>有时也叫做“标签名选择器<em>”</em>或者是”元素选择器“，因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中，我们已经用了span、em和strong选择器，<code><span></code>、<code><em></code>和<code><strong></code>元素的所有实例这样就都被样式化了。</p> + +<p><strong>试着加上一条CSS规则，选择<code><h1></code>元素，把它的颜色变为蓝色。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="全局选择器">全局选择器</h2> + +<p>全局选择器，是由一个星号（<code>*</code>）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。下面的示例中，我们已经用全局选择器，移去了所有元素上的外边距。这就是说，和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>这种行为有时能在“重置样式表”中看到，其中所有浏览器所做的样式化都会被忽略。这些一度很受欢迎，但是把所有的样式化忽略掉的话，通常就是指，你必须做把这些样式带回来的工作！因此我们应小心使用全局选择器，以处理诸如下面所述之类的很特殊的情况。</p> + +<h3 id="使用全局选择器，让选择器更易读">使用全局选择器，让选择器更易读</h3> + +<p>全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。例如，如果我想选中任何<code><article></code>元素的第一子元素，不论它是什么元素，都给它加粗，我可以将{{cssxref(":first-child")}}选择器（我们将会在<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a>课中进一步了解）用作<code><article></code>元素选择器的一个兄弟选择器：</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>但是这会和<code>article:first-child</code>混淆，而后者选择了作为其他元素的第一子元素的<code><article></code>元素。</p> + +<p>为了避免这种混淆，我们可以向<code>:first-child</code>选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中<code><article></code>元素的<em>任何</em>第一子元素：</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="类选择器">类选择器</h2> + +<p>类选择器以一个句点（<code>.</code>）开头，会选择文档中应用了这个类的所有物件。在下面的实时示例中，我们已经建立了一个名为<code>.highlight</code>的类，把它应用到了我的文档中的几个地方。所有包含此类的元素都被高亮了。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="指向特定元素的类">指向特定元素的类</h3> + +<p>你能建立一个指向应用一个类的特定元素。在下一个示例里面，我们将会用不同方式高亮一个带有<code>highlight</code>类的<code><span></code>和带有 <code>highlight</code>类的<code><h1></code>标题。我们通过使用附加了类的欲选元素的选择器做到这点，其间没有空格。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>这种方式使CSS没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。</p> + +<h3 id="多个类被应用的时候指向一个元素">多个类被应用的时候指向一个元素</h3> + +<p>你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上，构建可以以不同方式组合起来的组件的时候，这会有用。</p> + +<p>在下面的示例中，有一个包含了一条笔记的<code><div></code>。灰色的边框在盒子带有<code>notebox</code>类的时候应用。如果它还有一个<code>warning</code>或是<code>danger</code>类，我们改变{{cssxref("border-color")}}。</p> + +<p>为了告诉浏览器我们只想匹配带有所有这些类的元素，我们可以将这些类不加空格地连成一串。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID选择器">ID选择器</h2> + +<p>ID选择器开头为<code>#</code>而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个ID只会用到一次。它能选中设定了<code>id</code>的元素，你能把ID放在类型选择器之前，只指向元素和ID都匹配的类。在下面的示例里，你可以看看这两种用法。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>正如我们在和特定性相关的课里面学到的那样，ID所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用ID，会更好。不过要是ID是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。</p> +</div> + +<h2 id="下一篇">下一篇</h2> + +<p>来看<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a>，继续探索选择器。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签、类和ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/%E5%A4%84%E7%90%86_%E4%B8%8D%E5%90%8C_%E6%96%B9%E5%90%91%E7%9A%84_%E6%96%87%E6%9C%AC">处理不同文字方向的文本</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..870ef031ff --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,129 @@ +--- +title: 在CSS中调整大小 +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>在前面的课程中你已经看到了几种使用CSS为页面中元素设定尺寸的方法。 在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提：</th> + <td>基本的电脑知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装了必要的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基础知识 , HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），理解CSS如何工作（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解在CSS中约束物体大小的不同方式。</td> + </tr> + </tbody> +</table> + +<h2 id="原始尺寸，或固有尺寸">原始尺寸，或固有尺寸</h2> + +<p>在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。</p> + +<p>如果你把图片放置在网页中的时候没有在<code><img></code> 标签或CSS中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>一个空的{{htmlelement("div")}}是没有尺寸的。如果你在你的HTML文件中添加一个空{{htmlelement("div")}} 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>在上面的例子中，试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。</p> + +<h2 id="设置具体的尺寸">设置具体的尺寸</h2> + +<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。</p> + +<h3 id="使用百分数">使用百分数</h3> + +<p>许多时候，百分数是长度单位，正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">Value and units这节课中讨论的那样</a>，它们常常可与长度互换。当使用百分数时，你需要清楚，它是<strong>什么</strong>东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>这是因为百分数是以包含盒子的块为根据解析的。如果我们的<code><div></code>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。</p> + +<h3 id="把百分数作为内外边距">把百分数作为内外边距</h3> + +<p>如果你把<code>margins</code>和<code>padding</code>设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子10%的{{cssxref("margin")}}，外面的盒子10%的{{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>例如，你也许会希望上下的外边距是元素高的一个百分数，左右外边距是元素宽的百分数。但是，情况不是这样的！</p> + +<p>当你用百分数设定内外边距的时候，值是以<strong>内联尺寸</strong>进行计算的，也即对于左右书写的语言来说的宽度。在我们的例子里面，所有的内外边距是这一宽度的10%，也就是说，你可以让盒子周围的内外边距大小相同。在你以这种方式使用百分数的时候，这是一个需要记住的事实。</p> + +<h2 id="min-和max-尺寸">min-和max-尺寸</h2> + +<p>除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它<strong>至少</strong>有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。</p> + +<p>I在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>这在避免溢出的同时并处理变化容量的内容的时候是很有用的。</p> + +<p>{{cssxref("max-width")}}的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。</p> + +<p>作为示例，如果你设定一个图像的属性为<code>width: 100%</code>，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。</p> + +<p>如果你使用了<code>max-width: 100%</code>，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%。</p> + +<p>在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为<code>width: 100%</code>，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为<code>max-width: 100%</code>，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了<code>max-width: 100%</code>属性，这时你能看到它是怎样缩小来和盒子大小相适应的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>这个技术是用来让图片<strong>可响应</strong>的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>了解更多关于<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片技术</a>的事情。</p> +</div> + +<h2 id="视口单位">视口单位</h2> + +<p>视口，即你在浏览器中看到的部分页面，也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的<code>vw</code>单位，以及意为视口高度的 <code>vh</code>单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。</p> + +<p><code>1vh</code>等于视口高度的1%，<code>1vw</code>则为视口宽度的1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为20vh和20vw的盒子。这个盒子里面有一个字母<code>A</code>，其{{cssxref("font-size")}}属性被设成了10vh。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong>如果你改变了<code>vh</code>和<code>vw</code>的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的<code><iframe></code>的大小即是对上面示例而言的视口。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">打开此示例</a>，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。</strong></p> + +<p>在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有100vh高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。</p> + +<h2 id="小结">小结</h2> + +<p>本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS布局</a>的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..cce5429572 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,311 @@ +--- +title: 样式化表格 +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">设计一个 HTML表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使HTML表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识：</th> + <td>HTML 基础(学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), HTML表格(见HTML表格模块(TBD))，了解CSS工作原理(study <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何有效地对HTML表格进行样式化。</td> + </tr> + </tbody> +</table> + +<h2 id="一个典型的HTML表格">一个典型的HTML表格</h2> + +<p>让我们从一个典型的HTML表格开始。恩，我说典型——大多数HTML表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的</p> + +<pre class="brush: html"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>由于{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}}等特性，表格被很好地标记了，易于使用，并且易于访问，不幸的是，它在屏幕上呈现时看起来不太好（见它的预览版 <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>）：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些CSS来解决这个问题。</p> + +<h2 id="自主学习：样式化我们的表格">自主学习：样式化我们的表格</h2> + +<p>在这个自主学习部分中，我们将一起来样式化我们的表格。</p> + +<ol> + <li>首先，复制<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">实例标记</a>到本地，下载这两个图像(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a>和 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>)，然后将三个结果文件放在本地计算机的某个工作目录中。</li> + <li>接下来，创建一个名为<code>style.css</code>的新文件并将其保存在与其他文件相同的目录中。</li> + <li>将CSS链接到HTML中，将下面的HTML代码放到HTML的{{htmlelement("head")}}中：</li> +</ol> + +<pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> + +<h3 id="间距和布局">间距和布局</h3> + +<p>我们需要做的第一件事是整理出空间/布局——默认的表格样式是如此的拥挤！要做到这一点，请将以下CSS添加到您的 <code>style.css</code> 文件：</p> + +<pre class="brush: css">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>需要注意的最重要的部分如下：</p> + +<ul> + <li>在你的表上，给{{cssxref("table-layout")}}属性设置一个为<code>fixed</code>的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 <code>table-layout: fixed</code>，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了<code>thead th:nth-child(<em>n</em>)</code> 选择了四个不同的标题({{cssxref(":nth-child")}})选择器（“选择第n个子元素，它是一个顺序排列的{{htmlelement("th")}}元素，且其父元素是{{htmlelement("thead")}}元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier在<a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>中更详细地讨论了这一技术。<br> + <br> + 我们将它与一个100%的{{cssxref("width")}}组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。</li> + <li>一个{{cssxref("border-collapse")}}属性的<code>collapse</code>值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当您在表元素上设置边框时，它们之间将会有间隔，如下图所示：<img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">这看起来不太好(虽然可能是你想要的样子，谁知道呢?)。使用 <code>border-collapse: collapse;</code> ，让边框合为一条，现在看起来好多了：<img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>我们在整个表设置了一个{{cssxref("border")}}，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。</li> + <li>我们在{{htmlelement("th")}}和{{htmlelement("td")}}元素上设置了一些{{cssxref("padding")}}——这些元素使数据项有了一些空间，使表看起来更加清晰。</li> +</ul> + +<p>此刻，我们的表看起来好多了：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="一些简单的排版：">一些简单的排版：</h3> + +<p>现在我们把类型整理一下。</p> + +<p>首先，我们在<a href="https://www.google.com/fonts">Google Fonts</a>上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，您只需替换我们提供的{{htmlelement("link")}}元素和定制的{{cssxref("font-family")}}声明，并使用Google字体提供给您的内容。</p> + +<p>首先，将下面的{{htmlelement("link")}}元素添加到您的HTML头部，就在您现有的 <code><link></code> 元素之上：</p> + +<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> +</pre> + +<p>现在将下面的CSS添加到您的<code>style.css</code>文件，在之前内容后面添加：</p> + +<pre class="brush: css">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>这里没有什么特别的东西。我们通常会对字体样式进行调整，使其更易于阅读：</p> + +<ul> + <li>我们已经设置了一个全局无衬线字体;这纯粹是一种风格上的选择。我们还在{{htmlelement("thead")}}和{{htmlelement("tfoot")}}元素的标题上设置了自定义字体，这是一种很不错的、很有朋克风格的外观。</li> + <li>我们在标题和单元格上设置了一些{{cssxref("letter-spacing")}}，因为我们觉得它有助于提高可读性。再次强调，这主要是一种风格上的选择。</li> + <li>我们在{{htmlelement("tbody")}}中的表格单元中对文本进行了居中对齐，使它们与标题对齐。默认情况下，单元格被赋予了一个{{cssxref("text-align")}}的<code>left</code>值，并且标题被赋予了一个<code>center</code>值，但是通常情况下，让两者对齐看起来更好。标题字体的默认粗体值足以区分它们的外观。</li> + <li>我们在{{htmlelement("tfoot")}}中对标题进行了右对齐，以便与它的数据点更好地关联。</li> +</ul> + +<p>结果看起来更整洁一些：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="图形和颜色">图形和颜色</h3> + +<p>现在轮到图形和颜色了！因为表格上充满“朋克“和“个性”，我们需要给它再搭配一些鲜艳的造型。别担心，你不必让你的表格”燥起来“，你可以选择一些更巧妙、更有品位的东西。</p> + +<p>首先将下面的CSS添加到<code>style.css</code>文件中，在底部添加:</p> + +<pre>thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>同样，对于表格这里没有什么特别的，但有几件事值得注意。</p> + +<p>我们已经将一个{{cssxref("background-image")}}添加到{{htmlelement("thead")}}和{{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色{{cssxref("color")}}更改为白色(并给它一个{{cssxref("text-shadow")}})，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。</p> + +<p>我们还为{{htmlelement("th")}}和 {{htmlelement("td")}}添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样您就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在{{htmlelement("thead")}}和 {{htmlelement("tfoot")}}元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。</p> + +<h4 id="斑马条纹图案">斑马条纹图案</h4> + +<p>我们想用一个单独的部分来展示如何实现斑马条纹（<strong>zebra stripes</strong>）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的CSS添加到您的 <code>style.css</code> 文件底部：</p> + +<pre class="brush: css">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>您在前面看到了{{cssxref(":nth-child")}}选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式<code>2n-1</code>会选择所有奇数的子元素(1、3、5等)，而公式<code>2n</code>会选择所有偶数的子元素(2、4、6等等)。我们在代码中使用了<code>odd</code>和<code>even</code>的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的(醒目的)颜色。</li> + <li>我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的<code>.png</code>，有一点视觉上的扭曲）来提供一些纹理。</li> + <li>最后，我们给整个表格提供了一个纯的背景颜色，这样浏览器不支持<code>:nth-child</code>选择器仍然有它们的正文行的背景。</li> +</ul> + +<p>这种颜色爆炸的结果如下：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>现在，这可能有点过头不符合你的品味，但我们在这里想要指出的一点是，表格并非只能是枯燥无味的，学术性的。</p> + +<h3 id="样式化标题">样式化标题</h3> + +<p>对我们的表格还有最后一点处理——样式化标题。要做到这一点，请将以下内容添加到您的<code>style.css</code> 文件底部：</p> + +<pre class="brush: css">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>这里没有什么值得注意的地方，除了{{cssxref("caption-side")}}属性，它被赋予了一个<code>bottom</code>的值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观（见预览版<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>）：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="自主学习：样式化你自己的表格">自主学习：样式化你自己的表格</h2> + +<p>现在，我们希望您可以使用我们的示例表格HTML(或者使用您自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。</p> + +<h2 id="表格样式小贴士">表格样式小贴士</h2> + +<p>在继续之前，我们认为我们将为您提供一个快速列表，列出了上面提到的最有用的点：</p> + +<ul> + <li>使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。</li> + <li>使用 {{cssxref("table-layout")}}<code>: fixed</code> 创建更可控的表布局，可以通过在标题{{cssxref("width")}}中设置{{cssxref("width")}}来轻松设置列的宽度。</li> + <li>使用 {{cssxref("border-collapse")}}<code>: collapse</code> 使表元素边框合并，生成一个更整洁、更易于控制的外观。</li> + <li>使用{{htmlelement("thead")}}, {{htmlelement("tbody")}}和{{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。</li> + <li>使用斑马线来让其他行更容易阅读。</li> + <li>使用 {{cssxref("text-align")}}直线对齐您的{{htmlelement("th")}}和{{htmlelement("td")}}文本，使内容更整洁、更易于跟随。</li> +</ul> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> + +<h2 id="总结">总结</h2> + +<p>现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html new file mode 100644 index 0000000000..cb5c0e67d0 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html @@ -0,0 +1,59 @@ +--- +title: 测试技能：表格 +slug: Learn/CSS/Building_blocks/Tables_tasks +tags: + - Beginner + - CSS + - Example +translation_of: Learn/CSS/Building_blocks/Tables_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是为了帮助你检测在<u><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></u>课程中学到的技巧的理解。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> + <br> + If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="任务">任务</h2> + +<p>在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章<u><a href="https://alistapart.com/article/web-typography-tables/">Web排版：设计可读而不是可看的表格</a></u>概述的表格设计良好实践。</p> + +<p>我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。</p> + +<ul> + <li>把标题和包含数字的列数据右对齐</li> + <li>把标题和包含文本的列数据左对齐</li> + <li>添加顶部和底部边框，以及页脚上方的边框</li> + <li>将主表的所有奇数行条纹化</li> +</ul> + +<p><img alt="A table with striped rows." src="https://mdn.mozillademos.org/files/17145/mdn-table-bands.png" style="height: 710px; width: 1266px;"></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/tables/table-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for tables skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.html b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..4d822ed50b --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,348 @@ +--- +title: 盒模型 +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<div></div> + +<p>在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。</p> + +<p>本文围绕 “盒模型” 为主题展开。旨在于完成学习后，您能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识（Prerequisites）:</th> + <td> + <p>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (如果不了解HTML，请移步 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</p> + </td> + </tr> + <tr> + <th scope="row">学习目标（Objective）:</th> + <td>学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。</td> + </tr> + </tbody> +</table> + +<h2 id="块级盒子（Block_box）_和_内联盒子（Inline_box）">块级盒子（Block box） 和 内联盒子（Inline box）</h2> + +<p>在 CSS 中我们广泛地使用两种“盒子” —— <strong>块级</strong><strong>盒子</strong> (<strong>block box</strong>) 和 <strong>内联盒子</strong> (<strong>inline box</strong>)<strong>。</strong>这两种盒子会在<strong>页面流</strong>（page flow）和<strong>元素之间的关系</strong>方面表现出不同的行为:</p> + +<p>一个被定义成块级的（block）盒子会表现出以下行为:</p> + +<ul> + <li>盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽</li> + <li>每个盒子都会换行</li> + <li>{{cssxref("width")}} 和 {{cssxref("height")}} 属性可以发挥作用</li> + <li>内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”</li> +</ul> + +<p>除非特殊指定，诸如标题(<code><h1></code>等)和段落(<code><p></code>)默认情况下都是块级的盒子。</p> + +<p>如果一个盒子对外显示为 <code>inline</code>，那么他的行为如下:</p> + +<ul> + <li>盒子不会产生换行。</li> + <li> {{cssxref("width")}} 和 {{cssxref("height")}} 属性将不起作用。</li> + <li>垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 <code>inline</code> 状态的盒子推开。</li> + <li>水平方向的内边距、外边距以及边框会被应用且会把其他处于 <code>inline</code> 状态的盒子推开。</li> +</ul> + +<p>用做链接的 <code><a></code> 元素、 <code><span></code>、 <code><em></code> 以及 <code><strong></code> 都是默认处于 <code>inline</code> 状态的。</p> + +<p>我们通过对盒子{{cssxref("display")}} 属性的设置，比如 <code>inline</code> 或者 <code>block</code> ，来控制盒子的外部显示类型。</p> + +<h2 id="补充_内部和外部显示类型">补充: 内部和外部显示类型</h2> + +<p>在这里最好也解释下<strong>内部</strong> 和 <strong>外部</strong> 显示类型。如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。</p> + +<p>同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常文档流</a> </strong>布局，也意味着它们和其他块元素以及内联元素一样(如上所述).</p> + +<p>但是，我们可以通过使用类似 <code>flex</code> 的 <code>display</code> 属性值来更改内部显示类型。 如果设置 <code>display: flex</code>，在一个元素上，外部显示类型是 <code>block</code>，但是内部显示类型修改为 <code>flex</code>。 该盒子的所有直接子元素都会成为flex元素，会根据 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox</a> <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">）</a>规则进行布局，稍后您将了解这些规则。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p> +</div> + +<p>当你进一步了解css布局的更多细节的时候，你会了解到 <code>flex</code>， 和其他内部显示类型会用到的值，例如 <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>。</p> + +<p>块级和内联布局是web上默认的行为 —— 正如上面所述， 它有时候被称为 <em>正常文档流</em>， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。</p> + +<h2 id="不同显示类型的例子">不同显示类型的例子</h2> + +<p>让我们继续看看别的例子。下面三个html元素，都有一个外部显示类型 <code>block</code>。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。</p> + +<p>第二个是一个列表，布局属性是 <code>display: flex</code>。 将在容器中建立一个flex布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。</p> + +<p>下面有个块级段落，里面有两个 <code><span></code> 元素。正常情况下是 <code>inline</code>，但是其中一个加了block类，设置属性 <code>display: block</code>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>我们可以看到 <code>inline</code> 元素在下面例子中的表现。 <code><span></code> 在第一段默认是内联元素所以不换行。</p> + +<p>还有一个 <code><ul></code> 设置为 <code>display: inline-flex</code>，使得在一些flex元素外创建一个内联框。</p> + +<p>最后设置两个段落为 <code>display: inline</code>。 inline flex 容器和段落在一行上而不是像块级元素一样换行。</p> + +<p><strong>你可以修改 <code>display: inline</code> 为 <code>display: block</code> 或者 <code>display: inline-flex</code> 改为 <code>display: flex</code> 来观察显示模式切换。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>在后面的内容中会遇到诸如弹性盒子布局的内容；现在需要记住的是， <code>display</code> 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。 </p> + +<p>剩下的内容，我们会专注于外部显示类型。</p> + +<h2 id="什么是CSS_盒模型">什么是CSS 盒模型?</h2> + +<p>完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。</p> + +<h3 id="盒模型的各个部分">盒模型的各个部分</h3> + +<p> CSS中组成一个块级盒子需要:</p> + +<ul> + <li><strong>Content box</strong>: 这个区域是用来显示内容，大小可以通过设置 {{cssxref("width")}} 和 {{cssxref("height")}}.</li> + <li><strong>Padding box</strong>: 包围在内容区域外部的空白区域； 大小通过 {{cssxref("padding")}} 相关属性设置。</li> + <li><strong>Border box</strong>: 边框盒包裹内容和内边距。大小通过 {{cssxref("border")}} 相关属性设置。</li> + <li><strong>Margin box</strong>: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 {{cssxref("margin")}} 相关属性设置。</li> +</ul> + +<p>如下图：</p> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="标准盒模型">标准盒模型</h3> + +<p>在标准模型中，如果你给盒设置 <code>width</code> 和 <code>height</code>，实际设置的是 <em>content box</em>。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。</p> + +<p>假设定义了 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 25px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。</p> + +<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。</p> +</div> + +<h3 id="替代（IE）盒模型">替代（IE）盒模型</h3> + +<p>你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 <code>box-sizing: border-box</code> 来实现。 这样就可以告诉浏览器使用 <code>border-box</code> 来定义区域，从而设定您想要的大小。</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>如果你希望所有元素都使用替代模式，而且确实很常用，设置 <code>box-sizing</code> 在 <code><html></code> 元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>注：</strong> 一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用<code class="language-css"><span class="property token">box-sizing</span></code> 进行切换 ）</p> +</div> + +<h2 id="玩转盒模型">玩转盒模型</h2> + +<p>下面的例子中，你可以看到两个盒子。都有类 <code>.box</code>，给了相同的 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>。唯一区别是第二个设置了替代模型。</p> + +<p><strong>你能改变第二个盒子的大小 (通过添加 CSS 到 <code>.alternate</code> 类中) 让它和第一个盒子宽高一样吗?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">You can find a solution for this task here</a>.</p> +</div> + +<h3 id="使用调试工具来查看盒模型">使用调试工具来查看盒模型</h3> + +<p>您的 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a> 可以使您更容易地理解box模型。如果您在Firefox的DevTools中查看一个元素，您可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断您的盒子大小是否符合预期 !</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="外边距，内边距，边框">外边距，内边距，边框</h2> + +<p>您已经在上面的示例中看到了{{cssxref("margin")}}、{{cssxref("padding")}}和{{cssxref("border")}}属性。该示例中使用的是属性的<strong>简写</strong>，允许我们一次设置盒子的四个边。这些简写等价于分别控制盒子的不同边的普通写法。</p> + +<p>接下来，我们更详细地研究这些属性：</p> + +<h3 id="外边距">外边距</h3> + +<p>外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。</p> + +<p>我们可以使用{{cssxref("margin")}}属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>在下面的示例中，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="外边距折叠"><strong>外边距折叠</strong></h4> + +<p>理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。</p> + +<p>在下面的例子中，我们有两个段落。顶部段落的页 <code>margin-bottom</code>为50px。第二段的<code>margin-top</code> 为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。</p> + +<p><strong>您可以通过将第2段的 <code>margin-top</code> 设置为0来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 <code>margin-bottom</code>设置的50像素。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}} </p> + +<p>有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。相关更多信息，请参阅 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">mastering margin collapsing</a>。现在首先要记住的事情是，外边距会折叠这个事情。如果你用外边距创建空间而没有得到你想要的效果，那这可能就是这个原因。</p> + +<h3 id="边框">边框</h3> + +<p>边框是在边距和填充框之间绘制的。如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。</p> + +<p>为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。</p> + +<p>可以使用{{cssxref("border")}}属性一次设置所有四个边框的宽度、颜色和样式。</p> + +<p>分别设置每边的宽度、颜色和样式，可以使用：</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>设置所有边的颜色、样式或宽度，请使用以下属性：</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。在下面的示例中，我们使用了各种普通属性或者简写属性来创建边框。尝试一下不同的属性，以检查您是否理解它们是如何工作的。MDN中的边框属性页面为您提供可用的不同边框样式的信息。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="内边距">内边距</h3> + +<p>内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。</p> + +<p><br> + 我们可以使用{{cssxref("padding")}}简写属性控制元素所有边，或者每边单独使用等价的普通属性：</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>如果在下面的示例中更改类<code>.box</code>的内边距值，您可以看到，这将更改文本开始的位置。</strong></p> + +<p><br> + <strong>您还可以更改类<code>.container</code>的内边距，这将在容器和方框之间留出空间。任何元素上的内边距都可以更改，并在其边界和元素内部的任何内容之间留出空间。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="盒子模型和内联盒子">盒子模型和内联盒子</h2> + +<p>以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由<code><span></code>元素创建的那些内联盒子。</p> + +<p><br> + 在下面的示例中，我们在一个段落中使用了<code><span></code>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="使用display_inline-block">使用display: inline-block</h2> + +<p>display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。</p> + +<p>一个元素使用 <code>display: inline-block</code>，实现我们需要的块级的部分效果：</p> + +<ul> + <li>设置<code>width</code> 和<code>height</code> 属性会生效。</li> + <li><code>padding</code>, <code>margin</code>, 以及<code>border</code> 会推开其他元素。</li> +</ul> + +<p>但是，它不会跳转到新行，如果显式添加<code>width</code> 和<code>height</code> 属性，它只会变得比其内容更大。</p> + +<p><strong>在下一个示例中，我们将<code>display: inline-block</code>添加到<code><span></code>元素中。尝试将此更改为<code>display: block</code> 或完全删除行，以查看显示模型中的差异</strong>。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>当您想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。<code><a></code>是像<code><span</code>>一样的内联元素；你可以使用<code>display: inline-block</code>来设置内边距，让用户更容易点击链接。</p> + +<p>这种情况在导航栏中很常见。下面的导航使用flexbox显示在一行中，我们为<code><a></code>元素添加了内边距，因为我们希望能够在<code><a></code>在鼠标移动到上面时改变背景色。内边距似乎覆盖了<code><ul></code>元素上的边框。这是因为<code><a></code>是一个内联元素。</p> + +<p><strong>使用<code>.links-list a</code>选择器将<code>display: inline-block</code>添加到样式规则中，您将看到它是如何通过内边距推开其他元素来修复这个问题的。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> + +<h2 id="总结">总结</h2> + +<p>这就是你需要了解的关于盒子模型的大部分内容。如果以后你发现对于盒模型的布局仍有困惑，你将会回来温故这些内容。</p> + +<p>在下一节课中，我们将看看如何使用 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景和边框</a> 来使你的普通盒子看起来更有趣。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..4a8145d460 --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,388 @@ +--- +title: CSS的值与单位 +slug: Learn/CSS/Building_blocks/Values_and_units +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS中使用的每个属性都允许拥有一个或一组值，查看MDN上的任何属性页将帮助您理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本的软件</a>，<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>基本知识, HTML基础知识 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">学习HTML入门</a>)，以及CSS如何工作的基本常识 (如果完全不了解CSS，请移步 <a href="/en-US/docs/Learn/CSS/First_steps">学习CSS第一步</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解CSS属性中使用的不同类型的值和单位。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是CSS的值">什么是CSS的值?</h2> + +<p>在CSS规范和MDN的属性页上，您将能够发现值的存在，因为它们将被尖括号包围，如<code><color></code>或<code><length></code>。当您看到值<code><color></code>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>参考页面所列。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注意</strong>： 是的，CSS值倾向于使用尖括号表示，以区别于CSS属性(例如{{cssxref("color")}}属性和 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 数据类型)。您可能还会混淆CSS数据类型和HTML元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。</p> +</div> + +<p>在下面的例子中，我们使用关键字设置标题的颜色，使用<code>rgb()</code>函数设置背景：</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<code><color></code>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、<code>rgb()</code>函数等等。假设浏览器支持这些可用的<code><color></code>值，则可以使用它们任意一个。MDN上针对每个值的页面将提供有关浏览器支持的信息。例如，如果您查看 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>的页面，您将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。</p> + +<p>让我们来看看您可能经常遇到的一些值和单位类型，并提供一些示例，以便您尝试使用各种值的可能性。</p> + +<h2 id="数字，长度和百分比">数字，长度和百分比</h2> + +<p>您可能会发现自己在CSS中使用了各种数值数据类型。 以下全部归类为数值：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">数值类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code>是一个整数，比如1024或-55。</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code>表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code>是一个<code><number></code>，它有一个附加的单位，例如45deg、5s或10px。<code><dimension></code>是一个伞形类别，包括<code><length></code>、<code><angle></code>、<code><time></code>和<code><resolution></code>类型。</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code>表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。</td> + </tr> + </tbody> +</table> + +<h3 id="长度">长度</h3> + +<p>最常见的数字类型是<code><length></code>，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。</p> + +<h4 id="绝对长度单位">绝对长度单位</h4> + +<p>以下都是<strong>绝对</strong>长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">单位</th> + <th scope="col">名称</th> + <th scope="col">等价换算</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>厘米</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>毫米</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>四分之一毫米</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>英寸</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>十二点活字</td> + <td>1pc = 1/16th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>点</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>像素</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。</p> + +<h4 id="相对长度单位">相对长度单位</h4> + +<p>相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">单位</th> + <th scope="col">相对于</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>字符“x”的高度</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>数字“0”的宽度</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>根元素的字体大小</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>元素的line-height</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>视窗宽度的1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>视窗高度的1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>视窗较小尺寸的1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>视图大尺寸的1%</td> + </tr> + </tbody> +</table> + +<h4 id="探索一个例子">探索一个例子</h4> + +<p>在下面的示例中，您可以看到一些相对长度单位和绝对长度单位的行为。第一个框以像素为单位设置{{cssxref("width")}}。作为一个绝对单位，这个宽度将保持不变，无论其他如何变化。</p> + +<p>第二个框的宽度设置为<code>vw</code>(视口宽度)单位。这个值相对于视口宽度，所以10<code>vw</code>是视口宽度的10%。如果您更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用<iframe>嵌入到页面中，所以这将不起作用。要查看实际情况，您必须在打开示例的浏览器选项卡后尝试该示例 <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">试一试</a>。</p> + +<p>第三个盒子使用em单位。这些是相对于字体大小的。我在包含{{htmlelement("div")}}的元素上设置了一个1em的字体大小，它有一个<code>.wrapper</code>类。将这个值更改为1.5em，您将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。</p> + +<p>按照上面的说明操作之后，尝试以其他方式处理这些值，看看您将收获什么。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems">ems and rems</h4> + +<p><code>em</code>和<code>rem</code>是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或CSS布局。下面的示例提供了一个演示。</p> + +<p>HTML是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的HTML。唯一的区别是第一个类具有ems，第二个类具有rems。</p> + +<p>首先，我们将16px设置为<code><html></code>元素的字体大小。</p> + +<p><strong>概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”</strong>。带有ems类的{{htmlelement("ul")}}内的{{htmlelement("li")}}元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。</p> + +<p><strong>概括地说</strong><strong>，rem单位的意思是“根元素的字体大小”</strong>。(“根em”的rem标准。){{htmlelement("ul")}}内的{{htmlelement("li")}}元素和一个rems类从根元素(<code><html>)</code>中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。</p> + +<p>但是，如果您在CSS中更改<html>字体大小，您将看到所有其他相关内容都发生了更改，包括rem和em大小的文本。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="百分比">百分比</h3> + +<p>在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。</p> + +<p>在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为200px和40%宽。</p> + +<p>不同之处在于，第二组两个框位于一个400像素宽的包装器中。第二个200px宽的盒子和第一个一样宽，但是第二个40%的盒子现在是400px的40%——比第一个窄多了!</p> + +<p>尝试更改包装器的宽度或百分比值，看看这是如何工作的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>下一个示例以百分比设置字体大小。每个<code><li></code>都有80%的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<code><length-percent></code>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。</p> + +<h3 id="数字">数字</h3> + +<p>有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（<code>opacity</code> ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。</p> + +<p>在下面的示例中，尝试将不透明度值更改为0到1之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 当您在CSS中使用数字作为值时，它不应该用引号括起来。</p> +</div> + +<h2 id="颜色">颜色</h2> + +<p>在CSS中指定颜色的方法有很多，其中一些是最近才实现的。在CSS中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。</p> + +<p>现代计算机的标准颜色系统是24位的，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。</p> +</div> + +<h3 id="颜色关键词">颜色关键词</h3> + +<p>在这学习示例或MDN上的其他示例中，您经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！您可以在页面上看到 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a></code>值的完整列表。</p> + +<p><strong>在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的。</strong></p> + +<h3 id="十六进制RGB值">十六进制RGB值</h3> + +<p>您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。</p> + +<p>这些值有点复杂，不太容易理解，但是它们比关键字更通用——您可以使用十六进制值来表示您想在配色方案中使用的任何颜色。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>同样，大胆尝试更改值，看看颜色如何变化吧！</strong></p> + +<h3 id="RGB_和_RGBA的值">RGB 和 RGBA的值</h3> + +<p>我们将在这里讨论的第三种方案是RGB。RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的——这有点容易理解。</p> + +<p>让我们重写上一个例子，使用RGB颜色：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为<code>0</code>，它将使颜色完全透明，而设置为<code>1</code>将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 在颜色上设置alpha通道与使用我们前面看到的{{cssxref("opacity")}}属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。</p> +</div> + +<p>在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当alpha通道值较小时， 背景如何显示的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>在本例中，尝试更改alpha通道值，看看它如何影响颜色输出。</strong><strong> </strong></p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>在某种程度上，现代浏览器得到了更新，从而让<code>rgba()</code> 和<code>rgb()</code> （以及 <code>hsl()</code>和 <code>hsla()</code>;见下文）成为彼此的纯别名并开始表现完全相同，因此<code>rgba()</code> 和<code>rgb()</code> 接受带有和不带有alpha通道值的颜色。 尝试将上面示例的<code>rgba()</code> 函数更改为<code>rgb()</code> ，看看颜色是否仍然有效！ 使用哪种样式由您决定，但是将非透明和透明的颜色定义分开使用不同的功能可以（非常）更好地支持浏览器，并且可以直观地指示代码中定义透明颜色的位置。</p> +</div> + +<h3 id="HSL_和_HSLA_的值">HSL 和 HSLA 的值</h3> + +<p>与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。<code>hsl()</code> 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：</p> + +<ul> + <li><strong>色调</strong>： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。</li> + <li><strong>饱和度</strong>： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度</li> + <li><strong>亮度</strong>：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)</li> +</ul> + +<p>我们可以更新RGB的例子来使用HSL颜色，就像这样:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。我已经在下面通过将RGBA示例更改为使用HSLA颜色来演示了这一点。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>您可以在项目中使用这些颜色值中的任何一个。对于大多数项目，您可能会选择一个调色板，然后在整个项目中使用这些颜色——以及您所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个!</p> + +<h2 id="图片">图片</h2> + +<p><code><a href="/en-US/docs/Web/CSS/image"><image></a></code> 数据类型用于图像为有效值的任何地方。它可以是一个通过 <code>url()</code>函数指向的实际图像文件，也可以是一个渐变。</p> + +<p>在下面的例子中，我们演示了一个图像和一个渐变作为CSS <code>background-image</code>属性的值。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code><image></code>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果您想了解<code><image></code>数据类型，请查看MDN页面。</p> +</div> + +<h2 id="位置">位置</h2> + +<p><code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a></code>)。它可以使用关键字(如 <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, 以及<code>center</code> )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。</p> + +<p>一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 <code>center</code>。</p> + +<p>在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了40px。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>尝试使用这些值，看看如何把这些图像移来移去。</strong></p> + +<h2 id="字符串和标识符">字符串和标识符</h2> + +<p>在上面的示例中，我们看到关键字被用作值的地方(例如<code><color></code>关键字，如 <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。</p> + +<p>在某些地方可以使用CSS中的字符串，例如 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">在指定生成的内容时</a>。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="函数">函数</h2> + +<p>我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——<code>rgb()</code>、<code>hsl()</code>等。用于从文件返回图像的值——<code>url()</code>——也是一个函数。</p> + +<p>行为更类似于传统编程语言的值是<code>calc()</code>函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。</p> + +<p>例如，下面我们使用<code>calc()</code>使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的20%是多少，所以我们使用<code>calc()</code>来告诉浏览器为我们做这个计算。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="总结">总结</h2> + +<p>本文简要介绍了您可能会遇到的最常见的值和单位类型。你可以看看所有不同类型的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS的值和单位</a> 参考页面；当你学习这些课程时，你将会遇到很多这样的情况。</p> + +<p>需要记住的关键一点是，每个属性都有一个已定义的允许值列表，每个值都有一个定义来解释子值是什么。然后您可以在MDN上查看详细信息。</p> + +<p>例如，理解 <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image"><image></a></code>还允许您创建一个颜色渐变有意义的，但也许这个章节并不会提供太多明显的相关知识！</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></li> +</ol> diff --git a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html b/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html new file mode 100644 index 0000000000..f907c93a3c --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html @@ -0,0 +1,151 @@ +--- +title: 处理不同方向的文本 +slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。</p> + +<p>然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件：</th> + <td>计算机基础知识，基本软件（参见<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>），文件管理的基本知识（参见<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>），HTML基础（HTML 学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>）以及CSS基础（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解书写模式对现代CSS的重要</td> + </tr> + </tbody> +</table> + +<h2 id="什么是书写模式">什么是书写模式</h2> + +<p>CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。</p> + +<p>下面的例子中，我们使用<code>writing-mode: vertical-rl</code>对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code>的三个值分别是：</p> + +<ul> + <li><code>horizontal-tb</code>: 块流向从上至下。对应的文本方向是横向的。</li> + <li><code>vertical-rl</code>: 块流向从右向左。对应的文本方向是纵向的。</li> + <li><code>vertical-lr</code>: 块流向从左向右。对应的文本方向是纵向的。</li> +</ul> + +<p>因此，<code>writing-mode</code>属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。</p> + +<h2 id="书写模式、块级布局和内联布局">书写模式、块级布局和内联布局</h2> + +<p>我们已经讨论了块级布局和内联布局（<a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。</p> + +<p>用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是<code>writing-mode: horizontal-tb</code>，这是一个从上到下的横向的书写模式。第二个盒子应用的是<code>writing-mode: vertical-rl</code>，这是一个从右到左的纵向的书写模式。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>当我们切换书写模式时，我们也在改变块和内联文本的方向。<code>horizontal-tb</code>书写模式下块的方向是从上到下的横向的，而 <code>vertical-rl</code>书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 </p> + +<p>这张图展示了在水平书写模式下的两种维度。<img alt="" src="https://mdn.mozillademos.org/files/17148/horizontal-tb-zh.png" style="height: 353px; width: 634px;"></p> + +<p>这张图片展示了纵向书写模式下的两种维度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17149/vertical-zh.png"></p> + +<p>一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。</p> + +<h3 id="方向">方向</h3> + +<p>除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！</p> + +<p>由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的<em>开头</em>和<em>结尾</em>一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。</p> + +<h2 id="逻辑属性和逻辑值">逻辑属性和逻辑值</h2> + +<p>我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。</p> + +<p>让我们再来看看那两个盒子——一个用<code>horizontal-tb</code>设定了书写模式，一个用<code>vertical-rl</code>设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。</p> + +<p>为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（<strong>logical</strong>）和相对变化（<strong>flow relative</strong>）代替了像宽<code>width</code>和高<code>height</code>一样的物理属性。</p> + +<p>横向书写模式下，映射到<code>width</code>的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射<code>height</code>的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉<code>width</code>的<code>inline-size</code>是如何生效的。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="逻辑外边距、边框和内边距属性">逻辑外边距、边框和内边距属性</h3> + +<p>我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。</p> + +<p><code>margin-top</code>属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。</p> + +<p>{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。</p> + +<p>下面是物理和逻辑属性之间的对比。</p> + +<p><strong>如果你用<code>writing-mode</code>把盒子<code>.box</code>的书写模式改为<code>vertical-rl</code>，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。</strong></p> + +<p><strong>你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框<code>border-bottom</code>。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（<a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>）查看所有映射属性。</p> + +<h3 id="逻辑值">逻辑值</h3> + +<p>目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如<code>top</code>、<code>right</code>、<code>bottom</code>和<code>left</code>）。这些值同样拥有逻辑值映射（<code>block-start</code>、<code>inline-end</code>、<code>block-end</code>和<code>inline-start</code>）。</p> + +<p>例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将<code>left</code>替换为<code>inline-start</code> ，就像下面的例子中一样。</p> + +<p><strong>将这个例子的书写模式改为<code>vertical-rl</code>，看看图片会发生什么。将<code>inline-start</code>改为<code>inline-end</code>来改变图片的移动。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。</p> + +<div class="blockIndicator note"> +<p>译者注：<code><a href="/zh-CN/docs/CSS/float">float</a></code>的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。</p> +</div> + +<h3 id="应该使用物理属性还是逻辑属性呢？">应该使用物理属性还是逻辑属性呢？</h3> + +<p>逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。</p> + +<h2 id="总结">总结</h2> + +<p>本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。</p> + +<p>在下一部分，我们将会看一下CSS中的溢出。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ol> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a> + <ul> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">标签，类，ID选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li> + </ul> + </li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同文字方向的文本</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li> +</ol> |