📄 8.2.1.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">样式定义</h2>
<p>HTML 的本质就是通过标记符为网页内容应用一定的格式，例如，包含在 H1 标记符中的内容以粗体和大字号显示，包含在 I 标记符中的内容以斜体显示等。然而，单纯用
HTML 标记符设置格式，所能达到的效果是非常有限的，此时就要用到 CSS 技术。</p>
<p>
CSS（Cascading Style Sheet），也就是层叠样式表是一种格式化网页的标准方式，它就颜色、字体、边框、定位等格式提供了多种属性，这些属性均可适用于
HTML 标记符，从而使网页的格式设置功能大大增强。
<p> 例如，以下一个简单示例显示了 CSS 的功能。
<p><a href="../src/tu8.2.htm" target="_blank">示例</a>
<p>这段代码的显示效果所有包含在 P 标记符中的内容都以 0.75 cm 的首行缩进和"楷体"字体显示。
<p>
<p> 在这个示例中，我们对 P 标记符定义了特定的 CSS 属性，使包含在该标记符中的内容都具有一致的格式。实际上，样式定义并不局限于 HTML 标记符，它的基本格式如下：
<p>
selector { property1:value1; property2:value2; ... ...}<p>
其中 selector 表示需要应用样式的内容，property 表示由 CSS 定义的标准样式属性（请参见第 8.2.3 节），value 表示样式属性的值。<p>
以下是几种常用的 selector 类别：
<ul>
<li> HTML 标记符</li>
<li> 具有上下文关系的 HTML 标记</li>
<li> 用户定义的类（class）</li>
<li> 用户定义的 ID</li>
<li> 虚类</li>
</ul>
<p>
1. HTML 标记符 selector<p>
HTML 标记符是最典型的 selector 类型，网页设计者可以为某个或某些具体的 HTML 元素应用样式声明。对于不同的标记符 selector，我们可以采用编组的方式简化样式定义。例如，如果
3 个样式定义如下：<p>
H1 {color:#ff0000}<p>
H2 {color:#ff0000}<p>
H3 {color:#ff0000}<p>
则可以将其转换成编组样式，用逗号将不同的 selector 分开，如下所示：<p>
H1,H2,H3 {color:#ff0000}<p>
2. 具有上下文关系的 HTML 标记符 selector<p>
如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将 selector 指定为具有上下文关系的 HTML 标记。例如，如果只想使位于 H1 标记符内的
B 标记符具有特定的属性，则应使用以下格式：<p>
H1 B{color:blue} /* 注意 H1 和 B 之间以空格分隔 */<p>
这表示只有位于 H1 标记符内的 B 元素具有指定样式，而其他 B 元素不具有该样式。实际上，这种嵌套关系可以有多层，不过通常仅用一层。<p>
3. 用户定义的类 selector<p>
可以使用类（Class）来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中，可将一个句点和一个类名称添加到 selector 后，如下所示：<p>
selector.classname {property：value； ... ...}<p>
可以使用任何名称命名类，但通常应使用有具体含义的名称。例如，如果需要在网页的三处使用 H1 标记符，每处的文本具有不同的颜色，此时可以定义以下类样式：<p>
H1.color_red{color:red}<p>
H1.color_yellow{color:yellow}<p>
H1.color_blue{color:blue}<p>
然后在网页中需要使用该类处用 CLASS 属性引用这些类，如下所示：<p>
<H1 CLASS＝"color_red">此标题为红色。</H1><p>
<H1 CLASS＝"color_yellow">此标题为黄色。</H1><p>
<H1 CLASS＝"color_blue">此标题为蓝色。</H1><p>
此时如果使用了 H1 标记符但没有使用相应的 CLASS 属性，则不应用所定义的样式。<p>
实际上，不仅可以为某个或某些标记符定义类，还可以定义应用于所有标记符的类，此时直接用句点后跟类名即可，如下所示：<p>
.classname{property:value; ... ...} <p>
例如，可以定义一个类：<p>
.red {color:red}<p>
然后在需要引用该类的任意标记符内使用 class 属性，以便所有引用该类的标记符都可以采用所定义的样式。在定义了以上的 red 类后，就可以用以下方式引用它：<p>
<P class="red"> 本行文字为红色。</P><p>
<H1 class="red"> 本标题为红色。</H1><p>
4. 用户定义的 ID selector<p>
当网页设计者在整个网页或几个页面上有许多想以相同样式显示的标记符时，除了使用 .classname 的方式定义一个类样式以外，还可以使用 ID 定义样式。<p>
要将一个 ID 包括在样式定义中，应用一个井号（#）作为ID名称的前缀，如下所示：<p>
#IDname{property:value ... ...}<p>
定义了 ID 样式后，需要在引用该样式的标记符内使用 id 属性。例如，可以定义一个 ID 样式如下：<p>
#red {color:red}<p>
然后可以在若干不同的 HTML 标记符中使用该样式规则，如下所示：<p>
<P id="red"> 本行文字为红色。</P><p>
<H1 id="red"> 本标题为红色。</H1><p>
注意：使用 .classname 和使用 #IDname 这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。<p>
5. 虚类 selector<p>
对于 A 标记符，可以用虚类的方式设置不同类型链接的显示方式。所谓不同类型链接，是指访问过的、未访问过的和激活的这三种状态的链接。<p>
可以通过指定下列 selector 之一设置链接样式：
<ul>
<li> A:link 或 :link 当超链接没被访问过时，所设置的样式应用于超链接。</li>
<li> A:visited 或 :visited 当超链接已被访问过时，所设置的样式应用于超链接。</li>
<li> A:active 或 :active 当超链接当前为被选中状态时，所设置的样式应用于超链接。</li>
</ul>
<p>
例如，可以使用以下方式更改超链接的颜色显示：<p>
:link {color:blue}<p>
:visited {color:purple}<p>
:active {color:gray}<p>
对于虚类也可以使用编组的方法。例如，要去掉所有超链接的下划线，可以使用以下样式：<p>
A:link, A:visited, A:active {text-decoration：none}<p>
对于 Internet Explorer，还有一个特殊的虚类叫做 hover，表示当浏览者将鼠标悬停在超链接上时的样式。例如，以下定义使浏览者将鼠标悬停到超链接时，超链接显示为红色：<p>
A:hover {color:red} /*也可以使用 A:hover{color:red}*/
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -