第一章 ：CSS和文档
层叠样式表( Cascading Style Sheets ,CSS ) 的功能非常强大，可以影响一个或一组文档的表现。显然，如果不存在某种文档，CSS基本毫无用处、因为这样一来他将没有要表现的内容。当然，“文档”的定义相当宽泛。例如，Moziliia和相关的浏览器就使用CSS来影响浏览器Chrome本身的表现。不过，如果没有Chrome的内容 —— 按钮、地址栏输入、对话框、窗口等——也就没有使用CSS（或其他任何表现信息）的必要。
Web的衰落
也许你还能大致记得，在Web早期(1990~1993)，HTML是一个很有限的语言。它几乎完全用于描述段落、超链接、列表和标题的结构化元素组成。我们可能认为表、框架或复杂标记等等内容是创建Web页面必不可少的，可是那时在HTML中连与之稍有些相似的东西都没有。HTML原本是要作为一种结构化标记语言，用于描述文档的各个部分；而对于这些部分应当如何显示则很少谈及。这种语言并不关心外观，它只是一种简介的小型标记机制。
接下来Mosaic出现了。
仿佛突然之间，在网上流连超过10分钟的人几乎都认识到了万维网的强大。从一个文档跳入另一个文档很容易，无非是把光标指向有特殊颜色的部分文本，只需要一个纯文本编辑器就能创建页面。这是免费而且开放的，确实很酷。
网站开始导出涌现。期刊网站，大学网站，公司网站等等应运而生。随着网站数目的增加，人们越来越需要新的HTML元素，希望这些元素各自完成一个特定的功能。创作人员开始要求能够将文本变为粗体或斜体。
而此时HTML却不足以处理这样一些需求。利用HTML可以声明强调部分文本，但不一定是将其置为斜体，这取决于用户的浏览器和首选项，可能只是改为粗体，或者仍然是正常文本，只不过有不同的颜色而已。这就无法保证读者看到的正是创作人员所创建的文档。
迫于这些压力，开始出现诸如<Font><Big>之类的标记元素。突然之间，原来描述结构的语言开始描述外在表现了。
一片混乱
几年之后，这种随便的做法所存在的问题开始暴露出来。例如，HTML 3.2和HTML 4.0的很大一部分都是关于表现问题。此时能够通过font元素对文本设置颜色和大小，对文档和表格应用背景色和图像，使用table属性（如cellspaceing）,并且还能让文本闪烁，这些都是原先要求“有更多控制”的后果。
下面举例说明这种混乱的具体情况，简单地看一下几乎所有公司网站都用到的标记。这些网站中往往标记相当多，而真正有用的信息并不多，二者的差距大的惊人。更糟糕的是，在大多数网站中，标记几乎完全由表和font元素组成，他们对于所要表现
CSS 做救星
W3C （World Wide Web Consortiam,万维网联盟） 1995年发布一种正在进行的计划(work in progress),称为CSS。
到了1996年，已经称为了一种成熟的推荐草案（Recommendation），其地位与HTML同样举足轻重。
丰富的样式：
1.与HTML相比，CSS支持更丰富的文档外观，其表现程度也远非HTML力所能及。CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围创建边框，同时能增大和减少元素外的空间；允许改变文本的大小、装饰方式、间隔、甚至可以确定是否显示文本；还允许改变其他的效果。
易于使用：
层叠：CSS规定了冲突规则：这些规则统称为层叠（cascade）。例如，还是考虑前面的情况，将一个样式表导入到多个WEB页面。现在增加一组页面，其中有些样式是相同的
元素：元素（element）是文档结构的基础。在HTML中，最常用的元素很容易识别，如p、table、span、a和div。文档中的每个元素都对文档的表现起一定作用。在CSS 中，至少在CSS2.1中，这意味着每个元素生成一个框（box,也称为盒），其中包含元素的内容。
替换和非替换元素：
尽管CSS依赖于元素，但并非所有元素都以相同的方式创建。例如，图像和段落就不是同类元素，span和div也不相同。在CSS 中，元素通常有两种形式：替换和非替换。（详见第7章）
替换元素：替换元素(replaced element)是指用来替换元素内容的部分并非由文档内容直接表示。在xhtml中，我们最熟悉的替换元素例子就是img元素，它由文档本身之外的一个图像文件来替换。实际上，img没有具体的内容，通过以下简单的例子可以了解这一点：
<img src="photo.jpg">
这个标记片段不包含任何具体内容，只有一个元素名和一个属性。除非将其指向一个外部的内容（在这里，就是由src属性指向的一个图像）。
非替换元素：
大多数HTML和 XHTML元素都是非替换元素（noreplace element）。这意味着，其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示。例如：
<span>hithere</span>就是一个非替换元素
元素显示角色（块级元素 block-level 和 行内元素 inline-level ）元素：
块级元素：
块级元素生成一个元素框，默认他会填充其父元素的内容区，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了‘分隔符’。我们最熟悉的html块级元素是p和div。替换元素可以是块级元素，不过通常都不是。
列表项是块级元素的一个特例。除了表现方式与其他块元素一致，列表项还会生成一个标记符——无序列表中通常是一个圆点，有序列表则是数字——这个标记符会“关联”到元素框。除了这个标记符外，列表项在所有其他方面都与其他块元素相同。
行内元素：
行内元素在一个文本行内生成块元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或者之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意：尽管“块”和“行内”这两个词与XTML中的块级元素和行内元素有很多共同点，但也存在一个重要差别。在HTML和XHTML中，块级元素不能继承自身行内元素（即不能嵌套在行内元素中）。但是在CSS中，对于显示角色如何嵌套不存在任何限制。
要了解这是如何工作的，下面来考虑一个CSS属性：display。
你可能已经注意到，display有很多值，其中只有3个在前面提到过block、inline和list-item。我们并不打算现在就讨论其他的值，因为他们将在第2章和第7章中更详细的介绍。
目前，我们只关心block和inline。考虑以下标记：
<body> <p>This is paragrph with <em>an inline element </em> within it.</p> </body>
| Display | |
| 值 | none | inline | block |inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | |
| 初始值 | inline |
| 应用于 | 所有元素 |
| 继承性 | 无 |
| 计算值 | 对于浮动元素、定位元素和根元素可变（参见css2.1第9.7节）；否则为指定值 |
这里有两个块级元素body和p，一个行内元素（em）。按照规范,em可以继承p，但是反过来不行。一般XHTML层次结构要求：行内元素可以继承块级元素。而反之不允许。
与此不同，CSS没有这种限制。仍然是上述标记，不过可以改变两个元素的显示角色，如下：
p {display : inline } em {display : block }
这可以让行内元素中生成一个块框。这是完全合法的，不违反任何规范。唯一的问题是，如果试图如下反转元素的嵌套关系：
<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>
不论通过CSS对显示角色做了什么改变，在XHTML中哲都是不合法的。
结合CSS和HTML
link标记，首先考虑link标记的使用：
<link rel="stylesheet" type="text/css" href="css.css" media="all">
这样称为外部样式表
属性：
rel 代表 “关系”（relation）,在这里，关系为stylesheet . type 总是设置为text/css。这个值描述了使用link标记加载的数据的类型。
href 值为样式表的url
media，这里使用的all ，说明这个样式表要应用于所有表现媒体。还可以为：
all , 用于所有媒体
aural 语音合成器，屏幕阅读器和文档的其他声音表现
braille 用braille设备表现文档使用
handheld用于手持设备，如个人数字助理或支持web的蜂窝电话。
print为视力正常的用户打印文档时使用，另外还会在显示文档的打印预览时使用
projection 用于投影仪，如发表演讲时显示幻灯片的数字投影仪。
screen 在屏幕媒体中表现文档时使用。
tty 在固定间距环境
tv在电视上显示文档时使用。
Style 元素（文档样式表/嵌套样式表）
可以用sytle元素包含样式表，它在文档中单独出现，必须使用style type="text/css"
@import 指令
和link 一样，可以限制所有导入的样式表应用于一种或多种媒体，可以在样式表的url之后列出应用此样式的媒体：
@import url(css1.css) all;
@import url(css2.css) screen;
body{}
@import url(css.css); /*除了IE浏览器，其它浏览器会忽略此处*/
/*@import 必须要放在其他规则之前 ，除了IE其它浏览器会忽略放置不当的@import指令*/
注意：许多较老的浏览器无法处理不同形式的@import指令。可以适当的利用这一点，对这些浏览器“隐藏”样式。相关的更多细节，请参见http://w3development.de/css/hide_css_from_browsers
如果有一个外部样式表，它需要使用其它的外部样式表中的样式，此时@import就非常有用。由于外部样式表不能包含任何文档标记，所以不能使用link元素。但能用@import 。因此可以专门有一个包含其它样式的外部样式表。
内联样式：
如果你只是想为单个元素制定一些样式，而不需要嵌套或外部样式表，就可以使用HTML的style属性来设置一个内联样式(inline-style)
<p style="color:gray;font-size:12px;"> this is the contents. </p> <!-- XHTML 1.1已经将其标注为不建议使用，XML中不太可能出现这个属性， -->
浙公网安备 33010602011771号