CSS样式表继承详解

最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解 。这次是对 css 继承 特性的学习。

什么是css 继承?
要想了解css样式表的继承,我们先从文档树(HTML DOM)开始。文档树由HTML元素组成。

文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧,笔者在这里就不一一赘述了。希望深入了解的朋友请google之。

那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。

下面举个例子,有如下html代码片段:

<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

需要注意的是em是包含在p之内的。

当我们指定p的css样式时,看看em会有什么变化呢?

<style>
p { color:red; }
</style>

在浏览器中p 和 em 字体同时变红。我们并没有指定em的样式,但em继承了它的父亲元素p的样式特性。

也许各位看了以后觉得这是理所当然的,根本不值一哂^_^。其实,这就是继承。在不知不觉中影响这我们的代码(想像一下如果没有继承特性,你就需要为每一个元素定义颜色属性,这是多么痛苦的一件事情!!!=_=!)。

当然也不是所有的css属性都会被子类继承,例如border属性。继续利用上面的一段代码。我们为p元素添加border属性

p { border: 1px solid red; }

还好,p的border属性没有被em继承,否则是不是怪怪的呢?!^_^

那么,哪些属性是可以继承的呢?css样式表属性可以继承的有如下:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

吓?!这么多?!怎么记得住呢?别急,我们来理一理这些属性。

文本相关属性:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

列表相关属性:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

还有一个属性比较重要,color属性。

值得一说的是font-size。很显然font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值,而是计算后的值。下面解释下为什么font-size会这么特别呢?

看一个例子:

<p>
字体大小属性<em>继承特性</em>的演示代码
</p>

为p定义字体大小为默认字体的80%。

p { font-size:80%}

如果font-size继承的是相对值,那么结果会怎么样呢?依照这样的逻辑,em的font-size为80%X80%=64%,网页看起来应该是这样的。

但,实际情况却不是如此。em内的文字并没有改变大小,而是和p保持一致。

下面举三个例子,让各位有个直观的认识

p { font-size:14px;}

由于浏览器默认字体大小是16px,而p定义了字体14px,所以em继承了p的字体大小属性,也是14px;

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 14px 14px
<em> 未指定 继承值=14px

p { font-size:85%;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 85% = 13.6px). 13.6px这个值将被子元素em继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 85% 16px X 85% = 13.6px
<em> 未指定 继承值=13.6px

p { font-size:0.85em;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 0.85em = 13.6px). 13.6px这个值将被子元素em继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 0.85em 16px X 0.85em= 13.6px
<em> 未指定 继承值=13.6px

上面的例子都比较简答,再来个复杂的

body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }

浏览棋默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 85% 16px X 85% = 13.6px
<h1> 200% 继承值=13.6px X 200%= 27.2px
<h2> 150% 继承值=13.6px X 150%= 20.4px
<p> 未指定 继承值=13.6px
<em> 未指定 继承值=13.6px

说到这里,CSS样式表的继承基本上讲完了。在实践中,还有一个特性值需要解释一下,这和继承的应用也是息息相关的。

样式表中的特性值描述了不同规则的相对权重,它的基本规则是:

◆统计选择符中的ID属性个数。

◆统计选择符中的CLASS属性个数。

◆统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。(注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表:

H1{color:blue;}     特性值为:1
PEM{color:purple;} 特性值为:2
.apple{red;}   特性值为:10
P.bright{color:yellow;}    特性值为:11
P.brightEM.dark{color:brown;}   特性值为:22
#id316{color:yellow}    特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。而继承属性的特性值为0;也就是说,任何一条与css继承值冲突的属性值都会覆盖继承的属性值!!!

这点是需要各位注意的,Enjoy it!!

时间: 2024-10-18 13:13:17

CSS样式表继承详解的相关文章

(转)CSS样式表继承详解

什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<em>继承特性</em>的演示代码</p> 需要注意的是em是包含在p之内的.

css样式之background详解

background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) hex_number          规定颜色值为十六进制值的背景颜色(比如 #ff0000) rgb_number          规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0)     transparent           默认 背景颜色为透明 html代码 <div

通俗易懂的CSS的浮动float详解

目录: 1. CSS浮动属性float详解 2. CSS常见页面布局 3. CSS浮动清除和清除浮动的几种方法 4. 高度塌陷的产生条件和解决方法 ## CSS浮动属性float详解 *首先,我们需要了解什么是浮动?浮动是指(浮动的特点):- 将元素排除在普通流之外,即元素将脱离标准文档流.- 元素将不在页面占用空间.- 将浮动元素放置在包含框的左边或者右边.- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.- 经常使用它来实现特殊的定位效果. float的属性

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

css样式表分类

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="index.css"><!--用link标签引入的是外部样式表--> 7 8 9 &

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.