css教程 css和document

1．1．1元素类型：replaced和nonreplaced elements，block-level和inline-level elements replaced elements：元素的内容可以被不是直接由文档表示的内容替换。典型的是xhtml中的img，它可以被指向文档外部的图片文件代替。 nbsp;nbsp;nbsp; Input元素也可以根据其type的不同，而被radio button，checkbox，text input box代替。 nbsp;nbsp;nbsp; Replaced elements也在显示时产生一个box。 Nonreplaced elements：html和xhtml的大多数元素是nonreplaced。就是说，这些元素的内容由用户代理（user agent，通常是指浏览器）在元素产生的box中来表述present。（box是不是指元素对应在页面上的一个region？）。 nbsp;nbsp;nbsp; 比如lt;spangt;hi therelt;/spangt;是nonreplaced，文本hi here将由user agent 来显示。 nbsp; Block-level element块元素：产生一个元素box，该box填充其父元素的内容区域，并且其两边没有其他元素。就是说在默认的情况下每个block-level都是单独一行的。比如p，div。 list items是一种特殊的块元素。为了跟其他块元素具有统一的行为，为无序的lists产生一个符号，如bullet；为有序的lists产生一个数字。将符号或数字加到元素box上。除了符号的表现方式外，其他特性跟其余的块元素一样。 Inline-level element内联元素：产生一个元素box，其中是一行文本，并且不是单独一行的。 典型的例子是xhtml中的a元素，另外如strong，em。因为内联元素不会打断其前后的 显示，所以内联元素出现在其他元素中的话不会打断其他元素的显示。 nbsp; 注意：xhtml和html中块元素不能从内联元素继承，但是css中没有类似规定。没有限制元素嵌套方式。

一个例子：

lt;bodygt;

lt;pgt;This is a paragraph with lt;emgt;an inline elementlt;/emgt; within it.lt;/pgt;

lt;/bodygt;

上例中有两个块元素，p和body，一个内联元素em。 在xhtml中em可以从p继承，反之不行。在xhtml中内联元素可以从块元素继承而来，反之不行。 在css中没有这样的规定，css可以改变上例的结构。 p {display: inline;} nbsp; em {display: block;} 在inline box中插入block box。效果： 改变元素的显示角色在xhtml中很有用。Xml文档没有任何的继承的显示角色，因此通过css来定义就相当重要。

lt;bookgt;

 lt;maintitlegt;Cascading Style Sheets: The Definitive Guidelt;/maintitlegt;

 lt;subtitlegt;Second Editionlt;/subtitlegt;

 lt;authorgt;Eric A. Meyerlt;/authorgt;

 lt;publishergt;O'Reilly and Associateslt;/publishergt;

 lt;pubdategt;2004lt;/pubdategt;

 lt;isbngt;blahblahblahlt;/isbngt;

lt;/bookgt;

lt;bookgt;

 lt;maintitlegt;CSS2 Pocket Referencelt;/maintitlegt;

 lt;authorgt;Eric A. Meyerlt;/authorgt;

 lt;publishergt;O'Reilly and Associateslt;/publishergt;

 lt;pubdategt;2004lt;/pubdategt;

 lt;isbngt;blahblahblahlt;/isbngt;

lt;/bookgt;

默认的显示：

用css来定义显示层次：

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

publisher, pubdate {display: inline;}

现在显示：

nbsp; 能够影响显示角色display roles 的特性是css在多种情况下高度有用的重要原因。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!