CSS入門:XHTML文檔結(jié)構(gòu)樹
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:35:53 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇器（selector）來達到控制頁面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對于行為層（例如使用JavaScript控制元素的行為）同樣也非常重要。
CSS
CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇器（selector）來達到控制頁面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對于行為層（例如使用JavaScript控制元素的行為）同樣也非常重要。
CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇器（selector）來達到控制頁面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對于行為層（例如使用JavaScript控制元素的行為）同樣也非常重要。
文檔結(jié)構(gòu)(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>文檔結(jié)構(gòu)與選擇器- www.dbjr.com.cn</title>
</head>
<body>
<h1>第3章<em>CSS入門</em></h1>
<p><acronym title="Cascading Style Sheets，層疊樣式表">CSS</acronym>是一種標記性語言。</p>
<ol>
<li>CSS的<em>優(yōu)缺點</em></li>
<li>CSS的使用方法
<ul>
<li>內(nèi)聯(lián)式樣式</li>
<li>嵌入式樣式表</li>
<li>外部樣式表</li>
</ul>
</li>
<li><strong>基本</strong>樣式規(guī)則</li>
</ol>
<p>CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的<a href="selector01.html" title= "關(guān)于選擇器的內(nèi)容">選擇器（<em>selector</em>）</a>來達到控制頁面表現(xiàn)的目的。 </p>
</body>
</html>
文檔結(jié)構(gòu)樹
CSS大部分能力是基于元素的“父子”關(guān)系，如果元素A包含了元素B，那么元素A就是“父元素”，被包含的元素B是“子元素”。每個元素都是另一個元素的 “父”或者“子”或者兩者都是。例如：<body>既是<html>的子元素，又是<h1>的父元素。在家族樹中， 父子元素是相連的，而且父元素在子元素的上面一層。
“父”與“子”有時候又被一般化為“祖先（或稱前輩）”和“后代（或稱子孫）”，從一個元素到另一個元素中間跨越了一層或更多層，就是“祖先/ 后代”關(guān)系。例如圖4-1中，<html>就是<h1>的祖先，<h1>則是<html>的后代。 <body>是所有瀏覽器能顯示的元素的祖先，而<html>是所有元素的祖先，也稱為“根元素（root）”。“祖先/后代” 關(guān)系包含“父子”關(guān)系。
有著相同父元素的元素之間互為“兄弟”關(guān)系。例如圖4-1中，<h1>和<ol>為兄弟關(guān)系，<body>是它們共同的父元素，<ul>里的3個<li>也互相為兄弟關(guān)系。
提示：很多選擇器都是針對文檔結(jié)構(gòu)匹配的，因此掌握文檔結(jié)構(gòu)的意義非常重要。
相關(guān)文章
- 這篇文章主要介紹了HTML5的文檔結(jié)構(gòu)和新增標簽完全解析,需要的朋友可以參考下2017-04-21
- 這篇文章給大家介紹了html5文檔結(jié)構(gòu)標簽的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-04-21
如何在Dreamweaver cs6 中設(shè)置默認文檔格式為html5
怎么設(shè)置Dreamweaver cs6 中默認文檔格式為html5，很簡單，在編輯->首選參數(shù)中便可設(shè)置，如截圖，有需求的朋友可以參考下，希望對大家有所幫助2013-07-28- 想實現(xiàn)跨文檔消息傳輸首先要對窗口對象的message事件進行監(jiān)聽，然后使用window對象的postMessage()方法向其他窗口發(fā)送消息，接下來為大家詳細介紹下，感興趣的朋友可以參考2013-04-01
HTML5之SVG 2D入門8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)
前面介紹了很多的基本元素，包括結(jié)構(gòu)相關(guān)的組合和重用元素，這里主要是對SVG的文檔結(jié)構(gòu)中剩下的相關(guān)元素簡單總結(jié)一下，感興趣的朋友可不要錯過哦，然后繼續(xù)向前領(lǐng)略SVG的其2013-01-30- 多數(shù)人使用 HTML 4 和 XHTML 1 編寫網(wǎng)頁。相對較少的 HTML 狂熱者了解語義 HTML 的概念、驗證 HTML 結(jié)構(gòu)和改進文檔的可訪問性。高質(zhì)量的 HTML 文檔是反復(fù)權(quán)衡、設(shè)計優(yōu)選和2008-10-17
- 這篇文章主要介紹了詳解HTML編程的標記與文檔結(jié)構(gòu),是HTML入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-01
- 在HTML中定義CSS的方式有：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式），下面通過實例為大家詳細介紹下它們的特點2014-06-04
- 能在html文檔中遇到極大的ol列表可能性不大，本文只是純粹技術(shù)探討，感興趣的朋友可以了解下2013-10-14
- 昨天給添加了在線測試效果！打開后發(fā)現(xiàn)JS彈出框位置和效果不對！但是我在我本地測試是沒問題的！仔細檢查后發(fā)現(xiàn)原來是由于博客園的HTML文檔類型和我的不一樣。2010-10-29