From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../cascading_and_inheritance/index.html | 124 +++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html (limited to 'files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance') diff --git a/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..8bc02fb698 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,124 @@ +--- +title: 层叠和继承 +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} 这是 开始学CSS 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。

+ +

资料: 层叠和继承

+ +

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

+ +

对于层叠来说，共有三种主要的样式来源：

+ + + +

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。

+ +
+
示例
+ +

就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。

+ +

有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的userContent.css 样式文件并放到“用户配置”的文件夹中。

+ +

另外，还有一部分样式来自外链的wiki服务器上的样式表。

+
+ +

在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。

+ +

而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。

+ +

同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。

+ +

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

+ +

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

+ +

当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。

+ +
+
更多细节
+ +

CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。

+ +

这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

+ +

如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：Assigning property values, Cascading, and Inheritance。

+
+ +

动手: 使用继承

+ +
    +
  1. 编辑你之前创建的style.css文件。
    2. +
  2. 把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. 现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。
    + +

    但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.

    +
    4. +
+ + +
+ + + + + + + + +
修改前
Cascading Style Sheets
+ + + + + + + + +
修改后
Cascading Style Sheets
+ +
+
挑战
+改动一下样式表，完整如下效果：只在红色的字母上加下划线： + + + + + + + +
Cascading Style Sheets
+ +
+
参考答案
+ +

把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+隐藏答案
+查看参考答案
+ +

下一节?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<p> 和 <strong>，你可以尝试着改变一下页面中它们的样式。下一节会介绍怎样通过更有效的方式定义样式。

-- cgit v1.2.3-54-g00ecf