您當(dāng)前位置：首頁 > web前端 > htmlcss > css教程:css和document

css教程:css和document

來源：程序員人生發(fā)布時(shí)間：2014-02-23 20:18:22 閱讀次數(shù)：2978次

Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individual CSS property and how it interacts with other properties, and shows how to avoid common mistakes in interpretation.

W3c的Css主頁：

http://www.w3.org/Style/CSS/

1 css和document

1．1 elements

html中的元素很容易辨識(shí)，如p，table，span，a，div。

xml中元素由dtd定義，或者xml schema定義。每個(gè)元素部分代表了其表現(xiàn)方式。

Css中可以看作每個(gè)元素產(chǎn)生一個(gè)box，該box包含了元素的內(nèi)容。

1．1．1元素類型：replaced和nonreplaced elements，block-level和inline-level elements

replaced elements：元素的內(nèi)容可以被不是直接由文檔表示的內(nèi)容替換。典型的是xhtml中的img，它可以被指向文檔外部的圖片文件代替。

Input元素也可以根據(jù)其type的不同，而被radio button，checkbox，text input box代替。

Replaced elements也在顯示時(shí)產(chǎn)生一個(gè)box。

Nonreplaced elements：html和xhtml的大多數(shù)元素是nonreplaced。就是說，這些元素的內(nèi)容由用戶代理（user agent，通常是指瀏覽器）在元素產(chǎn)生的box中來表述present。（box是不是指元素對(duì)應(yīng)在頁面上的一個(gè)region？）。

比如<span>hi there</span>是nonreplaced，文本hi here將由user agent

來顯示。

Block-level element塊元素：產(chǎn)生一個(gè)元素box，該box填充其父元素的內(nèi)容區(qū)域，并且其兩邊沒有其他元素。就是說在默認(rèn)的情況下每個(gè)block-level都是單獨(dú)一行的。比如p，div。

list items是一種特殊的塊元素。為了跟其他塊元素具有統(tǒng)一的行為，為無序的lists產(chǎn)生一個(gè)符號(hào)，如bullet；為有序的lists產(chǎn)生一個(gè)數(shù)字。將符號(hào)或數(shù)字加到元素box上。除了符號(hào)的表現(xiàn)方式外，其他特性跟其余的塊元素一樣。

Inline-level element內(nèi)聯(lián)元素：產(chǎn)生一個(gè)元素box，其中是一行文本，并且不是單獨(dú)一行的。

典型的例子是xhtml中的a元素，另外如strong，em。因?yàn)閮?nèi)聯(lián)元素不會(huì)打斷其前后的

顯示，所以內(nèi)聯(lián)元素出現(xiàn)在其他元素中的話不會(huì)打斷其他元素的顯示。

注意：xhtml和html中塊元素不能從內(nèi)聯(lián)元素繼承，但是css中沒有類似規(guī)定。沒有限制元素嵌套方式。

塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內(nèi)聯(lián)元素和其他塊元素,常見塊元素是段落標(biāo)簽'P。"form"這個(gè)塊元素比較特殊，它只能用來容納其他塊元素。

　　如果沒有css的作用，塊元素會(huì)順序以每次另起一行的方式一直往下排。而有了css以后，我們可以改變這種html的默認(rèn)布局模式，把塊元素?cái)[放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標(biāo)簽也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種布局，除了頁面載入速度的差別外，沒有其他的差別。但是如果普通使用者不經(jīng)意點(diǎn)了查看頁面源代碼按鈕后，兩者所表現(xiàn)出來的差異就非常大了?；诹己弥貥?gòu)理念設(shè)計(jì)的css布局頁面源碼，至少也能讓沒有web開發(fā)經(jīng)驗(yàn)的普通使用者把內(nèi)容快速的讀懂。從這個(gè)角度來說，css layout code應(yīng)該有更好的美學(xué)體驗(yàn)吧。

　　你能夠把塊容器元素div想象成一個(gè)個(gè)box，或者如果你玩過剪貼文載的話，那就更加容易理解了。我們先把需要的文章從各種報(bào)紙、雜志總剪下來。每塊剪下來的內(nèi)容就是一個(gè)block。然后我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨(dú)特的文摘快報(bào) 了。作為一種技術(shù)的延伸，網(wǎng)頁布局設(shè)計(jì)也遵循了同樣的模式。.

　　內(nèi)聯(lián)元素(inline element)一般都是基于語義級(jí)(semantic)的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素"a"。

　　塊元素(block element)和內(nèi)聯(lián)元素(inline element)都是html規(guī)范中的概念。塊元素和內(nèi)聯(lián)元素的基本差異是塊元素一般都從新行開始。而當(dāng)加入了css控制以后，塊元素和內(nèi)聯(lián)元素的這種屬性差異就不成為差異了。比如，我們完全可以把內(nèi)聯(lián)元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。

　　可變?cè)?/strong>的基本概念就是他需要根據(jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素。可變?cè)剡€是屬于上述兩種元素類別，一旦上下文關(guān)系確定了他的類別，他就要遵循塊元素或者內(nèi)聯(lián)元素的規(guī)則限制。大致的元素分類見全文。

　　ps:關(guān)于inline element的中文叫法，有多種內(nèi)聯(lián)元素、內(nèi)嵌元素、行內(nèi)元素、直進(jìn)式元素?；旧蠜]有統(tǒng)一的翻譯，愛怎么叫怎么叫吧。另外提到內(nèi)聯(lián)元素，我們會(huì)想到有個(gè)display的屬性是display:inline;這個(gè)屬性能夠修復(fù)著名的IE雙倍浮動(dòng)邊界問題。

塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對(duì)齊塊
* dir - 目錄列表
* div - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標(biāo)題
* h2 - 副標(biāo)題
* h3 - 3級(jí)標(biāo)題
* h4 - 4級(jí)標(biāo)題
* h5 - 5級(jí)標(biāo)題
* h6 - 6級(jí)標(biāo)題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - ）可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

內(nèi)聯(lián)元素(inline element)
* a - 錨點(diǎn)
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
* dfn - 定義字段
* em - 強(qiáng)調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標(biāo)簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義范例計(jì)算機(jī)代碼
* select - 項(xiàng)目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
* strike - 中劃線
* strong - 粗體強(qiáng)調(diào)
* sub - 下標(biāo)
* sup - 上標(biāo)
* textarea - 多行文本輸入框
* tt - 電傳文本

* u - 下劃線
* var - 定義變量

可變?cè)?/span>
可變?cè)貫楦鶕?jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區(qū)塊(map)
* object - object對(duì)象
* script - 客戶端腳本

一個(gè)例子：

<body>

<p>This is a paragraph with <em>an inline element</em> within it.</p>

</body>

上例中有兩個(gè)塊元素，p和body，一個(gè)內(nèi)聯(lián)元素em。

在xhtml中em可以從p繼承，反之不行。在xhtml中內(nèi)聯(lián)元素可以從塊元素繼承而來，反之不行。

在css中沒有這樣的規(guī)定，css可以改變上例的結(jié)構(gòu)。

p {display: inline;}

em {display: block;}

在inline box中插入block box。效果：

改變?cè)氐娘@示角色在xhtml中很有用。Xml文檔沒有任何的繼承的顯示角色，因此通過css來定義就相當(dāng)重要。

<book>

 <maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>

 <subtitle>Second Edition</subtitle>

 <author>Eric A. Meyer</author>

 <publisher>O'Reilly and Associates</publisher>

 <pubdate>2004</pubdate>

 <isbn>blahblahblah</isbn>

</book>

<book>

 <maintitle>CSS2 Pocket Reference</maintitle>

 <author>Eric A. Meyer</author>

 <publisher>O'Reilly and Associates</publisher>

 <pubdate>2004</pubdate>

 <isbn>blahblahblah</isbn>

</book>

默認(rèn)的顯示：

用css來定義顯示層次：

book, maintitle, subtitle, author, isbn {display: block;}

publisher, pubdate {display: inline;}

現(xiàn)在顯示：

能夠影響顯示角色display roles 的特性是css在多種情況下高度有用的重要原因。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 Access入門教程 11.1 什么是窗體

下一篇 使用WebService與Oracle EBS進(jìn)行集成

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

css教程:css和document