开发路程(26):CSS继承—深入剖析

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明。而需要要指定为其它样式的部份设定在个别元素里即可达到效果。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑。
  CSS允许我们为文档设置更为丰富且便于修改的外观。我们现在主要想和朋友们一起对CSS的继承性进行一点深入的探讨。

  CSS的一个主要特征就是继承,它是依赖于祖先—后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明:
Example Source Code
  样式定义:body{color:blue;}
  应用举例代码:<p>CSS<strong>继承性</strong>之深入剖析</p>

  看下面的这个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!-- body{color:blue;}-->
</style>
</head>
<body>
<p>CSS<strong>继承性</strong>之深入剖析</p>
</body>
</html>

 运行上面的代码,我们看到的结果是:“CSS继承性之深入剖析”这段话是蓝色。“继承性”由于应用了strong元素,所以是粗体。这很符合作者的意图,也是为什么CSS继承了一部分的原因。

  在实际工作中,我们编写代码,往往在CSS文档的最前部,首先定义:

Example Source Code

*{margin: 0; padding: 0; border: 0;}

  这些代码的真正用意在于,在缺省定义的情况下,所有无素的margin、padding、border的值都为零。当需要应用不同的样式的时候,再单独的对某元素进行定义即可。也就是整个网页的样式预设、整体布局声明。而需要指定为其它样式的部份设定在个别元素里即可达到效果。

在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。

  首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的,标准就是如此。举个例子来说:border属性,大家都明白border属性的作用是设置元素的边框的,它就没有继承性。如果继承了边框属性,那么文档看起来就会很奇怪。例如我们定义容器div的边框为1px,而在此容器内的ul li在正常情况下我们都不希望它有边框,如果border有继承性,我们就要再去掉它们的边框。这样显然是不合理的。

  多数边框类的属性,如:Border(边框)、Padding(补白)、Margin(边界)、背景等等,都是没有继承性的。

  在某些时候继承也会带来一些错误,比如说下面这条CSS定义:

  Body{color:blue}

  这是定义了Body中的文本颜色为蓝色。如果Body中含有表格,在有些浏览器中这句定义会使除表格之外的文本变成蓝色,而表格内部的文本颜色并不是蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

  Body,table,th,td{color:blue}

  这样表格内的文字也会变成蓝色了。

在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。

  首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的,标准就是如此。举个例子来说:border属性,大家都明白border属性的作用是设置元素的边框的,它就没有继承性。如果继承了边框属性,那么文档看起来就会很奇怪。例如我们定义容器div的边框为1px,而在此容器内的ul li在正常情况下我们都不希望它有边框,如果border有继承性,我们就要再去掉它们的边框。这样显然是不合理的。

  多数边框类的属性,如:Border(边框)、Padding(补白)、Margin(边界)、背景等等,都是没有继承性的。

  在某些时候继承也会带来一些错误,比如说下面这条CSS定义:

  Body{color:blue}

  这是定义了Body中的文本颜色为蓝色。如果Body中含有表格,在有些浏览器中这句定义会使除表格之外的文本变成蓝色,而表格内部的文本颜色并不是蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

  Body,table,th,td{color:blue}

  这样表格内的文字也会变成蓝色了。

时间: 2024-08-11 03:36:39

开发路程(26):CSS继承—深入剖析的相关文章

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片.单靠jquery和图片,你便可以做出不同的效果.由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作.这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用. 1 <!doctype html> 2 <html lang="e

开发路程(8):图片和byte[]的互相转换

1 //图片的"读"操作 2 //①参数是图片路径:返回Byte[]类型: 3 //参数是图片的路径 4 public byte[] GetPictureData(string imagePath){ 5 FileStream fs=new FileStream(imagePath,FileMode.Open); 6 byte[] byteData=new byte[fs.Length]; 7 fs.Read(byteData,0,byteData.Length); 8 fs.Clos

开发路程(7):关于HTML中的object元素

<object>元素:它主要用于定义网页中的多媒体,比如音频,视频,Java applets,PDF,Active和Flash.object标签内除了param标签外,其他的内容将在浏览器不支持object标签时显示.注意,在HTML5尚未制定完成且普及时,最好使用flash在网页播放音频和视频,以保证最大兼容性. 1 object标签的主要可选属性: 2 type->被规定在data属性中指定的文件中出现的数据的MIME类型 3 width->对象的宽 4 height->

开发路程(13):树形控件

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="http://code.jquery.com/jquery.min.js"></script> 6 <script> 7 function rootClicked(v) 8 { 9 var newItem=document.creat

开发路程(11): 日期时间选择器datetimepicker

在做项目中,往往会遇到需要用户输入2014-07-19 09:55:53这样的格式的数据.就是典型的年月日时分秒这样的格式.这个时候,使用datetimepicker会比较简单. DateTimePicket jQuery 插件:使用此插件非强制性地将 datetimepicker. datepicker 或 timepicker 下拉列表添加到您的窗体.就是这样.很好看吧. 添加jquery.datetimepicker和datetimepicker.css到您的页面: 1 <link rel

开发路程(4):C#中的SubString()的用法

先看语法: String.SubString(int index,int length)     index:开始位置,从0开始       length:你要取的子字符串的长度 例子: 1 using System; 2 using System.Collections.Generic; 3 using System.Text; 4 5 namespace str_sub 6 { 7 class Program 8 { 9 static void Main(string[] args) 10

css选择器、css继承关系、css盒子模型

一.摘要 总结前端部分css选择器.css继承关系.css盒子模型等相关知识,并对容易出错的地方进行分析说明. 二.原因 在开发前端页面时如果对css选择器.继承关系,层叠,以及padding.margin区别和浮动问题理解不到位,会导致不知道什么时候该用哪种方法来处理问题.此文档是针对这些问题进行说明. 以下是对相关知识点的总结与分析: 三.选择器 1.基本选择器 (1)* 通配符选择器  代表所有元素 例子: *{ margin:0; padding:0;} (2)标签选择器 代表网页中的所

开发路程(12):颜色采集器colpick Color Picker

简单 RGB.HSB.十六进制颜色选取器 jQuery 插件. 非常直观类似 Photoshop 的界面. 光明和黑暗很容易自定义 CSS3 外观. 28 KB 总由浏览器加载看起来不错甚至在 IE7及工程非常容易实现.下过如图: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>colpick</title> 6 <s

css 继承和层叠

css继承 1.css 可以继承的是背景(background).字体(font).文本(text) 宽高.浮动的元素不会继承. 2.css样式:浏览器默认样式.用户指定样式.作者定义样式. 3.css优先级(权值) 选择器   a  b  c   d 内嵌     1   0   0  0 id       0   1   0   0 属性/伪类 0   0   1   0 元素         0   0    0   1 !important 最高 一般:内嵌>内联/外部 eg: #con