CSS教程_CSS免费实例教程_全面精通Css样式（6）

2012-02-14 02:06:10 评论 1,072次浏览

今天我们主要介绍下：CSS样式表分类及其它技巧

我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.

分类我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：

P.first { color: green }
P.second { color: purple }
P.third { color: gray }

你的HTML代码如下：

The first paragraph,
with a class name of "first."
The second paragraph, with a class name of "second."
The third paragraph,
with a class name of "third."

你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .）

你还可以生成不加任何HTML标签的分类：

.first { color: green }

这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页<BODY>中，而设定的文字将以绿色显示。情景选择：

如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

P B { color: red }

<H1>Emma Thompson, Actress
</H1>
Dramatic actor, inspired
comedienne. Is there nothing
she can't do?

样式表的规则告诉浏览器只将所有之内加重显示的文字以红色显示。所以，之外标题的加重文字不会以红色显示，而之内的文字则是。注释

即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：

P.first { color: green } /* green
for the first paragraph of every
page */H1 { text-indent: 10px;
font-family: verdana }
IMG { margin-top: 100px } /* give
all images a top margin */

串接

你可能会问这样的问题：“为什么要把它叫做串接样式表呢？下面我们将回答你的问题。

教程共享：尽享网 jinshare.com