理解(X)HTML的文档结构-2A Blog

CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而文档结构不仅仅在CSS的应用上非常重要，对于行为层（例如使用JavaScript控制元素的行为）同样也非常重要。

文档结构

(X)HTML文档可以看作一个家族树，这个树有1个祖先——根元素，然后各元素依次向下排列，例如有XHTML代码如下，其文档树如图4-1所示。

<! 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=gb2312" />
< title > 文档结构与选择器 </ title >
</ head >
< body >
   < h1 > 第3章 < em > CSS入门 </ em ></ h1 >
   < p >< acronym title ="Cascading Style Sheets，层叠样式表" > CSS </ acronym > 是一种标记性语言。 </ p >
   < ol >
     < li > CSS的 < em > 优缺点 </ em ></ li >
     < li > CSS的使用方法
       < ul >
         < li > 内联式样式 </ li >
         < li > 嵌入式样式表 </ li >
         < li > 外部样式表 </ li >
       </ ul >
     </ li >
     < li >< strong > 基本 </ strong > 样式规则 </ li >
   </ ol >
   < p > CSS通过与(X)HTML的文档结构相对应的 < a href ="selector01.html" title = "关于选择器的内容" > 选择器（ < em > selector </ em > ） </ a > 来达到控制页面表现的目的。 </ p >
</ body >
</ html >

图4-1 文档结构树

CSS大部分能力是基于元素的“父子”关系，如果元素A包含了元素B，那么元素A就是“父元素”，被包含的元素B是“子元素”。每个元素都是另一个元素的 “父”或者“子”或者两者都是。例如：<body>既是<html>的子元素，又是<h1>的父元素。在家族树中，父子元素是相连的，而且父元素在子元素的上面一层。

“父”与“子”有时候又被一般化为“祖先（或称前辈）”和“后代（或称子孙）”，从一个元素到另一个元素中间跨越了一层或更多层，就是“祖先/ 后代”关系。例如图4-1中，<html>就是<h1>的祖先，<h1>则是<html>的后代。

理解(X)HTML的文档结构

Tags:

发布:Atk| 分类:程序人生| 评论:0| 引用:0| 浏览:

日历

支持我们

最新评论及回复

最近发表

Search

网站分类