内容。你甚至可以通过将样式表用于![]()
将串接样式表的属性用于图象。
从我们的第1个样式表实例中可以发现，你可以归类样式表的规则。
我们将3种不同的说明都用于
。
与之类似，你也可以归类选择：
H1,P,BLOCKQUOTE
{font-family:
arial}
这项规则设定所以位于
、
和的标签将用Arial字体显示。
继承性
样式表的规则可从母体延续到子体。
下面是一个例子：
B{color:
blue}
这项规则告诉浏览器将所有之内的文字用蓝色显示。
但是在下列情况下，浏览器该如何处理呢？
AllmyWebpageswillusecascadingstylesheetswithinfourweeks.
对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。
AllmyWebpageswillusecascadingstylesheetswithinfourweeks.
现在我们已经明白了串接样式表的规则如何运作，还看到将样式表加入网页的一种方法但还有其它方法，让我们继续学习。
zzz1.4将样式加到你的网页中
我们已经学了将样式表加到网页的一种方法。
实际上你可以使用4种方法。
每种方法都有其不同的优点：
∙将样式表植入HTML文件中。
∙将一个外部样式表链接到HTML文件上。
∙将一个外部样式表输入到HTML文件中。
∙将样式表加入到HTML文件行中。
植入样式表：
这就是我们在上一页中用的方法，所有的样式表信息都列于HTML文件的顶部，同
分离，例：
--
H1{color:
green;font-family:
impact}
P{background:
yellow;font-family:
courier}
-->
MyFirstStylesheetStylesheets:
TheTooloftheWebDesignGods
Amazeyourfriends!
Squashyourenemies!
植入样式表规则后，浏览器在整个HTML页面中都执行该规则。
如果你想对网页一次性加入样式表，就可采用该方法。
你可能注意到代码中有两处很奇怪：
TYPE="text/css"属性和注释标签。
TYPE="text/css"设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。
注释标签（
--and-->）更为重要。
有些老的浏览器（如MAC机用的IE2.0）即使在设定了TYPE="text/css"属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。
而使用注释标签则可以避免发生这种情况。
链接到样式表上
这里是样式表功能发挥得淋漓尽致的地方。
你可以将多个HTML文件都链接到一个中心样式表文件。
这个外部的样式表文件将设定你所有网页的规则。
如果你改变样式表文件中的额某一细节，所有页面都会随之改变。
如果你维护的站点很大，则这项功能绝对会有其用武之地。
它的使用方法：
产生一个普通的网页，但使用
MyFirstStylesheet</p><p>Stylesheets:
TheToolof
theWebDesignGods
Amazeyourfriends!
Squash
yourenemies!
而其中输入的company.css文件内容如下：
H1{color:
green;font-family:
times}
P{background:
yellow;font-family:
courier}
在本例中，浏览器首先输入company.css的规则（@import必须打头）,然后加入移植的规则从而为这个网页产生规则集合。
请注意：
对于H1，在外部样式表文件和植入的样式表中都设定了规则。
在两者冲突的情况下，浏览器应执行哪一项规则呢？
植入的规则此时将占上风。
所以文字显示效果如下：
Stylesheets:
TheTooloftheWebDesignGods
Amazeyourfriends!
Squashyourenemies!
如果你的浏览器不支持CSS请点击这里观看显示效果。
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。
但是目前只有IE4.0支持输入法。
在行内加入样式
最后，你还可以在HTML行中加入样式规则，如下：
MyFirstStylesheet</p><p>orange;font-family:
impact">Stylesheets:
TheTooloftheWebDesignGods
yellow;font-family:
courier">Amazeyourfriends!
Squashyourenemies!
在这个例子中，你无须在HTML顶部加入样表代码。
加入行内的样式表属性将使浏器同样执行样式表规则。
该方法不方便之处在于：
你必须在每行指中都中加入样式规则，否则下一行时浏器将转回到文件的缺省设置。
加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。
分类及其它技巧
我们已经学习了所有的样式表基本语法。
下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.
分类
我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？
比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？
这种情况下分类将发挥作用。
你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。
这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：
P.first{color:
green}
P.second{color:
purple}
P.third{color:
gray}
∙你的HTML代码如下：
Thefirstparagraph,
withaclassnameof"first."
Thesecondparagraph,withaclassnameof"second."
Thethirdparagraph,
withaclassnameof"third."
你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的.）
你还可以生成不加任何HTML标签的分类：
.first{color:
green}
这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页
中，而设定的文字将以绿色显示。情景选择：
如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。
不可能吗？
利用样式表可以实现你最狂野的梦想。
情景选择将使你梦想成真，心想事成。
情景选择要求你设定一个可以执行选择说明的情景即可。
PB{color:
red}
EmmaThompson,Actress
Dramaticactor,inspired
comedienne.Istherenothing
shecan'tdo?
样式表的规则告诉浏览器只将所有
之内加重显示的文字以红色显示。
所以，
之外标题的加重文字不会以红色显示，而
之内的文字则是。
注释
即使是用样式表制作出的非常简练的代码也应该加上注释。
利用样式表代码就可以做到这一点。
例：
P.first{color:
green}/*green
forthefirstparagraphofevery
page*/H1{text-indent:
10px;
font-family:
verdana}
IMG{margin-top:
100px}/*give
allimagesatopmargin*/
串接
你可能会问这样的问题：
“为什么要把它叫做串接样式表呢？
下面我们将回答你的问题。
串接
屏幕就是一个战场，在一个HTML文件中，如果有3种不同的样式表规则都使用P作为其选择。
输入的样式表指示浏览器将
文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。
那么可怜的浏览器该听谁的呢？
好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。
总有几种样式表规则要比其它的规则更重要。
根据正式的规定，以下为样式表的串接顺序：
1.Inlinestyles（行内样式）
2.Embeddedstyles（植入样式）
3.Linkedstyles（链接样式）
4.Importedstyles（输入样式）
5.Defaultbrowserstyles（缺省浏览器样式）
浏览器将按照上述顺序执行样式表的指令。
但是还要一个问题。
如果同一种类的多个规则相互冲突怎么办？
比如，如果一项植入样式表规则将
以绿色显示，而另一个规则要求以红色显示？
多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。
这里有一个极其简单的解决顺序：
1.使用特别说明的样式表规则，例：
BODY{color:
green}
P{color:
red}
有一项规则特别说明
中的文字一红色显示，但它同时也继承了
的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以
之内的文字一红色显示。
2.应用继承的样式表规则
如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。
如果找不到继承的规则，则浏览器转向执行第3步。
3.按照样式表规则在HTML中的显示顺序执行。
P{color:
green}
P{color:
red}
当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。
在上例中，
作为讲座一红色显示，因为它是最后给出的规则。
注意：
正式的串接样式表规定对于串接顺序有更详细的规定。
但由于执行规定NetscapeCommunicator和InternetExplorer都不支持，所以本文中不再细述。
最后一个问题：
如果样式表规则同HTML标签冲突时，如何处理？
我们看一下这个例子：
I{font-family:
impact}
Ithink
EastofEdenisStein
beck'sbestnovel.
该例中样式表规则要求浏览器使用Impact，但是传统的HTML标签要求用Times字体，一个很明显的传统。
根据正式的样式表规定，应该优先执行样式表规则。
字体样式
欢迎进入串接样式表第2天的课程，昨天我们已经学习了如何使用及在网页中加入串接样式表，今天我们将深入学习串接样式表每一项精彩绝伦的特点。
今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。
想想如果只用HTML标签你能做到这些吗？
接着往下读。
今天要学习的CSS特点包括：
∙字模系列
∙字号
∙字重
∙字体风格
∙字体参数
∙文字变形
∙文字修饰
∙字体
按照字体名称调用字体
第1个问题：
你如何指示浏览器显示你希望的字体?
仅仅在字模后面键入字体的名称就行了吗？
很可惜，事情还不是这么简单，字体在各个操作平台之上叫的名称可能会有变化。
比如，Courier在MAC机上叫做COurierNew。
在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。
你仔细研究
之后会发现更多的这样的例子。
所以，我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。
而你必须确定使你所用的字体名称就是计算机所以的字体名称。
那么你怎么确定计算机对一种字体的确切名称是什么呢？
这取决于于计算机所用的操作平台。
∙Windows的用户：
使用应用软件比如word中的字体菜单中所列出的确切的字体名称。
∙Mac机用户：
不要相信应用软件给你列出的字体名称。
而应该打开你的systemfolder，按照其中对字体的拼写在你的样式表中使用字体名称。
字模系列
字模系列就是CSS中称呼一种字体的名称属
性。
其基本语法如下：
H2{font-family:
helvetica,
impact,sans-serif}
这里是Web浏览器阐释样式表的规则：
首先在列表中寻找字体的名称（helvetica），如果在该计算机中安装了这种字体，就使用它。
如果没有安装，则移向下一种字体（impact），如果这种字体也没有安装，则移向第3种字体（sans-serif）。
sans-serif字体参数是浏览器可以依据的最后一种参数，它告诉浏览器使用任何一种缺省sans-serif字体（或许就是Arial）。
以下为你所用浏览器的实际显示结果：
CSSfontcontrolispeachy.
如
展开阅读全文
相关搜索