mozilla

比较版本

层叠和继承

更改版本

修订版 528787:

由 Chajn 在 进行的修订 528787

修订版 530281:

由 jedmeng 在 进行的修订 530281

标题:
层叠和继承
层叠和继承
网址缩略名:
CSS/开始/Cascading_and_inheritance
CSS/开始/Cascading_and_inheritance
内容:

修订版 528787
修订版 530281
n11      {{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工n11      {{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工
>作")}} <span class="seoSummary">这是&nbsp;<a href="/en-US/docs/Web/G>作")}} <span class="seoSummary">这是&nbsp;<a href="/en-US/docs/Web/G
>uide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Gett>uide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Gett
>ing Started</a>&nbsp;教程的第4节; 这一节介绍了样式表中级联是如何工作的,以及元素如何从父级继承样式。通过在>ing Started</a>&nbsp;教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式,以及不同层级的样式如何相互作
>样式表中添加级联样式语句,教你进一步控制页面元素的展现。</span>>用决定最终显示效果教给你通过在样式表中添加级联样式语句,进一步控制页面元素的展现。</span>
n17      一个元素的样式,可以通过多种方式来定义,而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSn17      一个元素的样式,可以通过多种方式来定义,而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CS
>S的强大,也导致CSS显得“混乱”而且难以调试。>S的强大,也导致CSS显得如此“混乱”而且难以调试。
n32            <span style="line-height: 1.5;">定义在外部文件(外链样式):本教程主要是通n32            <span style="line-height: 1.5;">定义在外部文件(外链样式):本教程中案例
>过这种形式定义样式。</span>>要是通过这种形式定义样式。</span>
n42      用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。在这个教程中,你就是网页的开发者n42      用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。在这个教程中,你作为网页的开发者
>,而且你只需要编辑开发者样式。>只需要关注开发者样式。
n49        你现在看到的这个页面,有一部分样式是来自浏览器定义的默认的HTML样式。n49        你现在看到的这个页面而言,有一部分样式是来自浏览器定义的默认的HTML样式。
n52        部分样式可能来自用户通过浏览器自定义的样式,或者为浏览器引入自定义的样式表。例如,在Firefox中,在“首选项”n52        有一部分样式可能来自用户通过浏览器自定义的样式,或者为浏览器引入自定义的样式表。例如,在Firefox中,在“首选
>对话框中中就可以自定义样式,也可以建立一个单独的<code>userContent.css</code>&nbsp;文件并放到“用>项”对话框中可以自定义样式,也可以建立一个单独的<code>userContent.css</code>&nbsp;样式文件并放到
>户配置”的文件夹中。>“用户配置”的文件夹中。
n55        另外还有一部分样式来自外链的wiki服务器上的样式表。n55        另外还有一部分样式来自外链的wiki服务器上的样式表。
n59      使用浏览器打开前面写的简单页面,你能看到 {{ HTMLElement("strong") }} 元素中的文字会比其他n59      浏览器打开前面写的例子页面,你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他
>文字粗一些。这些是在浏览器默认HTML样式中定义的>文字粗一些。这些样式就是在浏览器定义的默认HTML样式。
n62      {{ HTMLElement("strong") }} 元素是红色的,这是在自己的样式表中定义的。n62      {{ HTMLElement("strong") }} 元素是红色的,这是在自己的样式表中定义的样式
n65      同时,{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子n65      同时,{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子
>元素,也继承了&nbsp;{{ HTMLElement("p") }}&nbsp;的样式。同样的, {{ HTMLElement(>元素,也继承了&nbsp;{{ HTMLElement("p") }}&nbsp;的样式。同样的, {{ HTMLElement(
>"p") }} 也从 {{ HTMLElement("body") }} 中继承了许多样式。>"p") }} 也从 {{ HTMLElement("body") }} 中继承了许多样式。
n74      当然,关于优先级还有更多的知识点,我们会在后面的章节里讲到n74      当然,关于优先级还有更多的知识点,我们会在后面的章节中继续介绍
n78        更多细节n78        更多细节
n81        CSS 提供了一个!important关键字,用户可以通过这个关键字使自己定义的样式覆盖掉开发者定义的样式。n81        CSS 另外提供了一个!important关键字,用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式
 >
n84        这就意味着,作为开发者,你很难准确的预知页面在用户电脑上显示效果。n84        这就意味着,作为开发者,你很难准确的预知页面<span style="line-height: 1.5;">最终<
 >/span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span>
n96      <li>把下面这行代码粘到以前的文件中,粘在前的代码之前之后可以。 不过,加在css文件头部会更符合逻辑一些n96      <li>把下面这行代码粘到以前的文件中,粘在前的代码的上面下面都可以。 不过,加在css文件头部会更符合逻辑一些
>,因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元>,因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元
>素:>素:
n101      <li>现在刷新你的浏览器,应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线,也包括大写的首字母。{{ Hn101      <li>现在刷新你的浏览器,应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线,也包括大写的首字母。{{ H
>TMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承了下划线的样式>TMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承了下划线的样
>。<br>>式。<br>
n136      </div>改动一下样式表,完整如下效果只在红色的字母上加下划线:n136      </div>改动一下样式表,完整如下效果只在红色的字母上加下划线:
t166      {{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selet166      {{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Sele
>ctors", "选择器")}} 到目前为止,你在样式表中所有的样式都是写在标签上的,<code>&lt;p&gt;</code>>ctors", "选择器")}} 到目前为止,你在样式表中所有的样式都是标签上的,<code>&lt;p&gt;</code>&
>&nbsp;和&nbsp;<code>&lt;strong&gt;,你可以尝试着改变一下页面中它们的样式。</code>下一节会介>nbsp;和&nbsp;<code>&lt;strong&gt;,你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍
>绍怎样通过<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors>怎样通过<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors"
>" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/CSS/Gett> style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getti
>ing_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">>ng_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定
>定义样式。</span>>义样式。</span>

返回历史