css实例教程:css和document

2021-03-16 12:07 jianzhan
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. W3cCss首页: http://www.w3.org/Style/CSS/ 1 css和document 1.1 elements html中的元素很非常容易辨识,如p,table,span,a,div。 xml中元素由dtd界定,或xml schema界定。每一个元素一部分意味着了其主要表现方法。 Css中能够看做每一个元素造成1个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也在显示信息时造成1个box。 Nonreplaced elements:html和xhtml的大多数数元素是nonreplaced。便是说,这些元素的內容由客户代理商(user agent,一般是指访问器)在元素造成的box中来描述present。(box是否指元素对应在网页页面上的1个region?)。 例如<span>hi there</span>是nonreplaced,文字hi here将由user agent 来显示信息。 Block-level element块元素:造成1个元素box,该box填充其父元素的內容地区,而且其两侧沒有别的元素。便是说在默认设置的状况下每一个block-level全是独立1行的。例如p,div。 list items是1种独特的块元素。以便跟别的块元素具备统1的个人行为,为无序的lists造成1个标记,如bullet;为井然有序的lists造成1个数据。将标记或数据加到元素box上。除标记的主要表现方法外,别的特点跟其余的块元素1样。 Inline-level element内联元素:造成1个元素box,在其中是1写作本,而且并不是独立1行的。 典型的事例是xhtml中的a元素,此外如strong,em。由于内联元素不容易打断其前后左右的 显示信息,因此内联元素出現在别的元素中的话不容易打断别的元素的显示信息。 留意:xhtml和html中块元素不可以从内联元素承继,可是css中沒有相近要求。沒有限定元素嵌套循环方法。
块元素(block element)1般是别的元素的器皿元素,块元素1般都重新行刚开始,它能够容下内联元素和别的块元素,普遍块元素是段落标识'P。"form"这个块元素较为独特,它只能用来容下别的块元素。
   假如沒有css的功效,块元素会次序以每次另起1行的方法1直往下排。而有了css之后,大家能够更改这类html的默认设置合理布局方式,把块元素放置到你想 要的部位上去。而并不是每次都愚昧的另起1行。必须指出的是,table标识也是块元素的1种,table based layout和css based layout从1般应用者(不包含眼睛视力阻碍者、视障等)的角度看来这两种合理布局,除网页页面加载速率的区别外,沒有别的的区别。可是假如一般应用者无意间点了 查询网页页面源码按钮后,二者所主要表现出来的差别就十分大了。根据优良重构理念设计方案的css合理布局网页页面源代码,最少也能让沒有web开发设计工作经验的一般应用者把內容快 速的读懂。从这个角度来讲,css layout code应当有更好的艺术美学体验吧。
  你可以把块器皿元素div想像成1个个box或假如你玩过剪贴文载的话,那就更为非常容易了解了。大家先把必须的文章内容从各种各样报纸、杂志总剪 下来。每块剪下来的內容便是1个block。随后大家把这些纸块依照自身的排版用意,用胶水再次贴到1张空白的新纸上。这样就产生了你自身与众不同的文摘快报 了。做为1种技术性的拓宽,网页页面合理布局设计方案也遵照了一样的方式。.
  内联元素(inline element)1般全是根据词义级(semantic)的基础元素。内联元素只能容下文字或别的内联元素,普遍内联元素"a"
   块元素(block element)和内联元素(inline element)全是html标准中的定义。块元素和内联元素的基础差别是块元素1般都重新行刚开始。而当添加了css操纵之后,块元素和内联元素的这类属 性差别就不了为差别了。例如,大家彻底能够把内联元素cite再加display:block这样的特性,让他也是有每次都重新行刚开始的特性。
  可变元素的基础定义便是他必须依据左右文关联明确该元素是块元素或内联元素。可变元素還是属于上述两种元素种别,1旦左右文关联明确了他的种别,他就要遵照块元素或内联元素的标准限定。大概的元素归类见全文。
   ps:有关inline element的汉语称呼,有多种多样内联元素、嵌入元素、行内元素、直进式元素。基础上沒有统1的汉语翻译,爱如何叫如何叫吧。此外提到内联元素,大家会想起有 个display的特性是display:inline;这个特性可以修补知名的IE双倍波动界限难题。
块元素(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 - 顾客端脚本制作
1个事例:
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body> 上例中有两个块元素,p和body,1个内联元素em。 在xhtml中em能够从p承继,反之不好。在xhtml中内联元素能够从块元素承继而来,反之不好。 在css中沒有这样的要求,css能够更改上例的构造。 p {display: inline;} em {display: block;} 在inline box中插进block box。实际效果: 更改元素的显示信息人物角色在xhtml中很有效。Xml文本文档沒有任何的承继的显示信息人物角色,因而根据css来界定就非常关键。
<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>
默认设置的显示信息:

css来界定显示信息层级:
book, maintitle, subtitle, author, isbn {display: block;}
publisher, pubdate {display: inline;}
如今显示信息:
可以危害显示信息人物角色display roles 的特点是css在多种多样状况下高宽比有效的关键缘故。