css教學 css與document_經驗交流

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中的元素很容易辨识，如p，table，span，a，div。

xml中元素由dtd定义，或者xml schema定义。每个元素部分代表了其表现方式。

Css中可以看作每个元素产生一个box，该box包含了元素的内容。

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

replaced elements：元素的内容可以被不是直接由文档表示的内容替换。典型的是xhtml中的img，它可以被指向文档外部的图片文件代替。

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

    Replaced elements也在显示时产生一个box。

Nonreplaced elements：html和xhtml的大多数元素是nonreplaced。就是说，这些元素的内容由用户代理（user agent，通常是指浏览器）在元素产生的box中来表述present。（box是不是指元素对应在页面上的一个region？）。

    比如hi there是nonreplaced，文本hi here将由user agent

来显示。

 

Block-level element块元素：产生一个元素box，该box填充其父元素的内容区域，并且其两边没有其他元素。就是说在默认的情况下每个block-level都是单独一行的。比如p，div。

list items是一种特殊的块元素。为了跟其他块元素具有统一的行为，为无序的lists产生一个符号，如bullet；为有序的lists产生一个数字。将符号或数字加到元素box上。除了符号的表现方式外，其他特性跟其余的块元素一样。

Inline-level element内联元素：产生一个元素box，其中是一行文本，并且不是单独一行的。

典型的例子是xhtml中的a元素，另外如strong，em。因为内联元素不会打断其前后的

显示，所以内联元素出现在其他元素中的话不会打断其他元素的显示。

 

注意：xhtml和html中块元素不能从内联元素继承，但是css中没有类似规定。没有限制元素嵌套方式。

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

　 　如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設佈局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是區塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種佈局，除了頁面載入速度的差異外，沒有其他的差異。但是如果一般使用者不經意點了 查看頁面原始碼按鈕後，兩者所表現出來的差異就非常大了。基於良好重構理念設計的css佈局頁面源碼，至少也能讓沒有web開發經驗的普通用戶把內容快速的讀懂。從這個角度來說，css layout code應該會有更好的美學體驗。

　　你能夠把塊容器元素div想像成一個個box， 或者如果你玩過剪貼文載的話，那就更容易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是一個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報 了。作為一種技術的延伸，網頁佈局設計也遵循了同樣的模式。 .

　　內聯元素(inline element)一般都是基於語意級(semantic )的基本元素。內聯元素只能容納文字或其他內聯元素，常見內聯元素"a"。

　 　塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內聯元素的這種屬 性差異就不成為差異了。例如，我們完全可以把內嵌元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。

　　可變元素的基本概念是他需要根據上下文關係確定該元素是塊元素或內聯元素。可變元素還是屬於上述兩種元素類別，一旦上下文關係確定了他的類別，他就要遵循塊元素或內聯元素的規則限制。大致的元素分類請見全文。

　 　ps:關於inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫。另外提到內聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修復著名的IE SPAN>雙倍浮動邊界問題。

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本

* u - 下划线
* var - 定义变量

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

一个例子：

<span style="FONT-SIZE: 10.5pt"></span>

<span style="FONT-SIZE: 10.5pt"><p>This is a paragraph with <em>an inline element</em> within it.</p></span>

<span style="FONT-SIZE: 10.5pt"></span>

上例中有两个块元素，p和body，一个内联元素em。

在xhtml中em可以从p继承，反之不行。在xhtml中内联元素可以从块元素继承而来，反之不行。

在css中没有这样的规定，css可以改变上例的结构。

p {display: inline;}

 

em {display: block;}

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

改变元素的显示角色在xhtml中很有用。Xml文档没有任何的继承的显示角色，因此通过css来定义就相当重要。

<span style="FONT-SIZE: 10.5pt"><book></book></span>

<span style="FONT-SIZE: 10.5pt"> <maintitlephpcngtcn maintitle> </maintitlephpcngtcn></span>

<span style="FONT-SIZE: 10.5pt"> <subtitle>第二版</subtitle></span>

phpcnltphp style="FONTtlephpcngt SIZE: 10.5pt "> <author>Eric A. Meyer</author>

<span style="FONT-SIZE: 10.5pt"> phpcnltphp ><pre class="brush:php;toolbar:false"> <span style="FONT-SIZE: 10.5pt"> <pubdate>2004</pubdate></span>

<span style="FONT-SIZE: 10.5pt"> <isbn>blahblahblah</isbn></span>

<span style="FONT-SIZE: 10.5pt"></span>

<span style="FONT-SIZE: 10.5pt"><bookphpcnphpcn><span style="FONT-SIZE: 10.5pt"> <maintitle>CSS2 口袋參考</maintitle></span></bookphpcnphpcn></span>

<scnltphpcn></scnltphpcn>

<scnltphpcn></scnltphpcn>

<scnltphpcn pan pt> <author>Eric A .Meyer</author></scnltphpcn>

<span style="FONT-SIZE: 10.5pt"> phpcnlt? ><span style="FONT-SIZE: 10.5pt"> <pubdate>2004</pubdate></span></span>

<span style="FONT-SIZE: 10.5pt>

 <span style="FONT-SIZE: 10.5pt"></span>

<span style="FONT-SIZE: 10.5pt">預設的顯示：前>
 <img src="/static/imghw/default1.png" data-src="http://www.webjx.com/files/allimg/080827/0125162.png" class="lazy" alt=""></span>

<span style="FONT-SIZE: 10.5pt">用</span><span style="FONT-SIZE: 10.5pt">css</span><span>來定義顯示層級：</span>

<span style="FONT-SIZE: 10.5pt">書籍、主標題、副標題、作者、isbn { display : block;}</span>

<span style="FONT-SIZE: 10.5pt">發布者，發布日期{display: inline;}</span>

<span style="FONT-SIZE: 10.5pt">現在顯示：</span>

<span>
 <img src="/static/imghw/default1.png" data-src="http://www.webjx.com/files/allimg/080827/0125163.png" class="lazy" alt=""></span>

 

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