CSS父标记、子标记及元素的关系
在CSS中有这样一段代码text-align:inherit;，这段代码一般不常用，在网页制作中用得很少，它是代表继承父标记的样式，CSS是一种上下继承的语言，如果你的网页里设置的父标记是红色的，那么它里面的内容就自然而然的是红色的标记。把下面的这段代码复制到网页中预览就可以看出它是继承父标记的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</p>
<p style="color:red;font-size:24px;font-family:华文隶书; background:#ccc; width:1000px; text-align:inherit;">
奔欣网络科技http://www.shwzsj.co
</p>
<div style="color:#00F;">
<p>
奔欣网络科技http://www.shwzsj.co
</p>
</div>
</body>
</html>
下面是预览后的页面：
下面我们来分析下上下继承的关系是怎么体现的，
上面的这段代码我们把这个<div>设置它的风格样式style="color:#00F;是蓝色，而在上面的p标记里面什么都没有设置：
<p>
奔欣网络科技http://www.shwzsj.com
</p>
如果按照顶行的标记设置颜色应为黑色。因为顶行的是父标记，页下面的一行是子标记，也就是说；包含标记属父标记，而被包含标记为子标记。所以继承的是子标记。比如一座房子，房子里面有柜子。柜子里面有书，那么柜子是父标记，书是柜子的子元素，如果书中有书签，这书签就是书的子元素。它就是这样一级一级无限级的划分的。<div>是<p>标记的父元素，<p>标记是<div>的子元素。上面的是在<div>里面设置了color:#00F这个蓝色，而在<p>标记里面什么都没有设。但是<p>标记里却完全继承了<div>标记里面的元素。
所以在编写代码时我们在可能的情况下能首即省，如果再在<p>标记里再编写color:#00F这个蓝色就是多余的了，耗时费力。
再加上下面的一行代码，可以发现CSS标记样式的继承方式：它是它是绿色的，而又是单独的不继承父标记的样式。
<p style="color:#0C0">
奔欣网络科技http://www.shwzsj.co
</p>
只要理解了这些父标记与子标记元素的关系，在实际操作中就不会出现问题。
|
