1. 如何将样式表加入到网页
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>
而在XML中，你应该如下例所示在声明区中加入：
<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下：
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
2 选择符
每个CSS样式定义都有两个组成部分：一是选择符，定义样式所采用的标记；二是属性，指定样式实际要干什么。在上一个例子中，h1、h2是选择符，指定样式应该应用在所有的〈h1〉和〈h2〉标记上。剩余的样式定义由一些属性组成，这些属性指定了样式应该应用的字体和颜色。下面介绍CSS选择符的基本类型，并对每种类型进行举例。
2.1．标记选择符
选择符最基本的形式就是已经看到过的那种。通过一个具体的HTML标记来命名，可以对文档里这个标记出现的每一个地方应用样式定义。这种做法通常用在设置那些在整个网站都会出现的基本样式。例如，下面的定义就用于为一个网站设置默认字体：
body, p, td, th, div, blockquote, dl, ul, ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
这个相当长的选择符是一系列的标记，所有这些标记都将以定义的样式（字体、字号和颜色）显示。理论上，〈body〉标记就是所需要的全部（因为所有其他标记会出现在〈body〉标记内部，并且将因此继承它的属性），但是许多浏览器不能恰当地将这些样式属性带入表格和其他元素里。因此，为了完整这里指定了其他元素。
2.2．伪类选择符
在HTML里，〈a〉标记定义的格式比其他大多数标记的格式更丰富。通过在〈body〉标记里指定link、vlink和alink属性，可以为网页里不同状态的链接（分别是未访问过的链接、访问过的链接和被点击的链接）设置颜色。CSS提供自己的方式来做到这一点，并且增加了第4种状态，就是当鼠标移到链接上时的状态。考虑下面的例子：
a:link { color: #0000FF; }
a:visited { color: #FF00FF; }
a:hover { color: #00CCFF; }
a:active { color: #FF0000; }
这段代码包含了4种CSS样式定义。每个选择符使用一个称之为伪类的〈a〉标记。第1种link，只用于未访问过的链接而且指定它们是蓝色。第2种visited，用于访问过的链接，都是洋红色。第3种样式定义hover，当鼠标移到链接上时，覆盖前两种定义，不管这些链接是否被访问过，都使其显示为淡蓝色。当链接被单击时，最后一种样式定义使链接为红色。因为active出现在最后，所以它覆盖前3种定义，这样不管链接是否已经被访问过也不管鼠标是否移到链接上，active都将起作用。
2.3．类选择符
将样式分配给标记的做法很好，但是如果想将不同的样式分配给位于文档里不同位置的同一标记时会发生什么呢？这就是CSS classes进入的地方。考虑下面的样式，该样式使网页里的所有文本段落为蓝色：
p { color: #0000FF; }
现在，在网页上有一个带蓝色背景的工具条怎么办？你不会希望工具条里的文本也是蓝色，因为这样会看不出文本！这时所需要做的就是为工具条文本定义一个类，然后将一个CSS样式分配给那个类：
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
第2条规则使用了一个类选择符，这个类选择符表示该样式应用在sidebar类的任意一个标记上。下圆点表示不是一个标记而是一个类被命名了。为了创建该sidebar类的一段文本，在标记上添加一个class属性：
<p class="sidebar">This text will be white, as specified by the
CSS style definitions above.</p>
现在，如果在工具条内有链接怎么办？默认时这些链接会被看成和网页里其他链接一样，但是，在标记里加入一个class="sidebar"属性，它们也将转变成白色：
<p class="sidebar">This text will be white, <a class="sidebar"
href="link.html">and so will this link</a>.</p>
那样是相当整齐的，但是如果想通过以黑体文本显示的方法使这些链接显得更突出一点怎么办？在sidebar类里加入bold文本属性会使整个工具条的文本为黑体。这时需要一个CSS选择符，它只选择sidebar类的链接。通过将一个标记选择符和一个类选择符结合起来，就能够精确地做到：
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
a.sidebar:link, a.sidebar:visited { font-weight: bold; }
注意，已经使用：link和：visited伪类来指定作为链接的〈a〉标记（与不是链接的〈a name="…"〉标记形成对比）。
还注意到工具条中的链接依然是白色，属于工具条类的两种样式都应用在工具条链接上。如果为第3种样式指定一种不同的颜色，那么链接就会采取那种新颜色，因为第3种选择符更具体，而且是按照指定的选择符的增加顺序来应用CSS样式的。
巧的是，将多种样式应用在单一网页元素上的过程叫做层叠，这也是层叠样式表得名的原因。
2.4．关联选择符
如果工具条里碰巧包含了大量的链接，将sidebar类分配给每个单一〈a〉标记的任务就会变得繁重了。用一个选择符来选择出现在sidebar类的某一个段落里的所有链接不是很好吗？这就是关联选择符要做的事情：选择一个基于一个链接的关联的标记，也就是基于包含该链接的标记。
这是新的CSS：
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
p.sidebar a:link, p.sidebar a:visited {
font-weight: bold;
color: #FFFFFF;
}
这是已经更新了的HTML：
<p class="sidebar">This text will be white,
<a href="link.html">and so will this link</a>.</p>
正如你所看到的，一个关联选择符提供了用空格隔开的一列选择符，这些选择符必须与由外而内的标记相匹配。在这个例子里，因为该链接（与a：link或a：visited选择符相匹配）出现在一个工具条段落（与p.sidebar选择符相匹配）里面，所以这个样式应用在了该链接上。
注意，为了让链接保持白色，不得不为链接的CSS属性加上白色，因为sidebar类的样式不再应用在这些链接上了。
2.5．ID选择符
类似于类选择符，ID选择符用于选择一个特殊的标记而不是一组标记。所选择的标记会被一个ID属性按如下形式标识：
<p id="sidebar1">This paragraph is uniquely identified by the ID
"sidebar1".</p>
一个ID选择符只是在ID前加一个井号（#）。因此，下面的样式将使以上的段落变成白色：
#sidebar1 { color: #FFFFFF; }
ID选择符可以与其他类型的选择符结合使用。例如，将下面的样式应用在sidebar1段落里出现的未访问过的链接上：
#sidebar1 a:link {
font-weight: bold;
color: #FFFFFF;
}
还有其他的选择符，但它们用得不广。最好的情况下，在一些支持它们的浏览器（尤其是网景4）中使用也会有一些小错误。
7939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
