强烈推荐：非常不错的样式表CSS教程(1)

2022-07-15 80酷酷网 80kuku.com

　　css|教程|样式表

本文是一篇关于CSS的应用概述，并提供了一些示例来演示CSS是如何工作的，以便于你更加有效的学习CSS。

本文并不是参考或者兼容性指南一类的文章（尽管其中有一些非常好的参考和兼容性注解的链接)。如果你已经习惯了使用CSS，并想学到更多样式表的知识，我们保证你会在本文中能够找到一些非常有用的信息:)。

●CSS不能做什么？

层叠样式表通常被理解为实现“内容”和“风格”分开的手段。其实这种说法并不完全正确，因为根据你对“风格”和“内容”的定义不同，层叠样式表的作用也不尽相同。

HTML定义了文档的结构，同时将正文和图像及其他资料通过标记(tags)组织到一起。而CSS并不能影响文档的结构组成。

层叠样式表(CSS)所做的是定义这些元素以什么样的版式、什么样的颜色、间距……显示到页面当中，它还可以影响页面内容的布局,却不可能改变页面的结构。CSS只能在有限的限度内应用于元素(不是万能的)，而文档元素的结构还是要通过标记语言HTML来定义。

●使用CSS有什么好处？

所有的HTML标记(Tags)都有各自默认的样式(style).也就是说,浏览器会按照一定的基本规则来解释和显示每一个标记中的内容，但是我们通过内联样式(inline style)就可以优先于浏览器的默认样式来控制内容的显示样式。浏览器默认的样式表优先权最低。内联样式示例如下：

内联样式影响的仅仅是某些特定的标记，如上面示例当中的<P>...</P>。而层叠样式表却提供了应用于所有给定标记样式或者特定子集合样式的途经。

CSS允许你设置与内容文档分离的“批量”样式表文档，和样式内嵌(inline style)至HTML代码当中的方法不同，这就是样式表使“内容”和“样式”分离说法的由来。同时，层叠样式表文档可以让更多的内容文档共享使用。

●包含样式表

每一个样式表都是一系列的样式规则的集合。可以在内容文档的<HEAD>...</HEAD>之间使用STYLE标记来定义，示例如下：

...style rules...

</style>

或者象调用JavaScript脚本文件那样通过URL链接到外部样式表文件，外联样式表利用 LINK 标记来设置，位置在内容文件的<HEAD>...</HEAD>内，示例如下：

注：在WEB站点内共享一个公共样式表是非常有用的，只要修改公共样式表，就能够影响所有调用该样式表的内容文档。

在同一文档内可以设置多个内联样式(inline style)和外联样式(link),但是具体文档显示时浏览器要根据那些样式的顺序来确定使用什么样式。(顺序非常重要)

●定义样式规则

CSS规则设置由下面所示的语句组成：

selector { property : value }

selector {
property : value;
property : value;
property : value;
...
}

"Selector"定义了什么元素将要被样式规则所影响。紧接下来是声明区，由大括号"{","}"包围。内部由若干个声明(声明个数大于等于零>=0)组成。每一声明之间由分号“；”隔开。

每个声明由“属性(property)”和具体的一个“值(value)”组成，他们之间通过冒号连接。“属性”是一个标识符，例如字体大小“font-size”，背景色“background-color”...等等。"值"的多少要控制在标识符属性值的范围内。

空白处以及分行形式来显示主要是为了阅读方便，空白处可以加入“注解”文字，示例如下：

selector { /* a comment for this rule */
property : value;
property : value;
property : value;
}

注解包含在/ *和* /内，同JavaScript、C程序设计语言的注释写法一样。

●Selectors 选择器

最简单的形式由标记名称组成，不同的标记样式规则相同时可以通过逗号“，”连接合并到一起说明，示例：

h1 { background-color: #ffff00 }
h2 { background-color: #ffff00 }
h3 { background-color: #ffff00 }

上面的样式说明合并到一起，写法如下：

h1, h2, h3 { background-color: #ffff00 }

这种定义称为“群组”定义。注意同一标记可以再次设置，次数不限，例：

h1, h2, h3 { background-color: #ffff00 }
h1 { color: red }

HTML标识名是不区分大小写的，所以“H1”等价于“h1”，但是语法更加严格的XHTML中，标识名必须小写，所以最好有一个良好的书写习惯，建议在书写你的样式表时使用小写字母。

●Pattern Matching模式匹配

Selectors并不仅仅局限于标识名，事实上，有多种匹配模式可以定义元素的样式，甚至利用元素的属性来定义。

Internet Explorer现在还不能支持所有的selector的匹配模式。建议使用Netscape或者Opera来测试下面的演示。

列表中例举了Selectors不同的匹配模式和解释以及在线演示的示例链接。

模式	说明	演示
E	标准的selector、标识名E相配元素E
E F	Descendant selector, 如果E标记包含F时，匹配F
E>F	Child selector 、如果F是E的子标记，则匹配F
E+F	Adjacent selector、如果E和F有相同的parent父标识同时F紧临着E，则匹配F

注意：其中" parent "、" child "、" descendant "、和" adjacent "这些名词涉及到文档内部的标记分级关系结构。举例来说明：

<div>
<h3>What Good is CSS?</h3>
<p>CSS gives you <i>very precise control</i> over how your web ages
look. Use it to your advantage!
</p>
</div>

Selector中还可以使用通用匹配符“*”：

h2 + * { color: red }

将任何紧接着H2的任何元素显示为红色