css常用属性文档格式.docx
《css常用属性文档格式.docx》由会员分享，可在线阅读，更多相关《css常用属性文档格式.docx（39页珍藏版）》请在冰点文库上搜索。
包在<
P>
外边控制文章主体的外观等等。
然后我们将所有东西都放入表格，用隐式GIF空格产生一个20象素的边距。
一切都变得乱七八糟。
编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。
串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。
HTML仍可以保持简单明了的初衷。
CSS代码独立出来从另一角度控制页面外观。
你可以以前所未有的能力控制页面的布局。
<
FONTSIZE>
能使我们调整字号，表格标签帮助我们生成边距，这都没错。
但是，我们对HTML总体上的控制却很有限。
我们不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。
但是现在，样式表使这一切都成为可能。
而即将推出的新的CSS功能更令人兴奋。
以后4天内，你将会明白我所说的意味着什么。
你可以制作出体积更小下载更快的网页
还有更好的消息：
样式表只是简单的文本，就象HTML那样。
它不需要图象，不需要执行程序，不需要插件，不需要流式。
它就象HTML指令那样快。
有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。
还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。
你可以更快更容易地维护及更新大量的网页。
没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。
即便站点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的<
。
样式表的主旨就是将格式和结构分离。
利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。
浏览器将成为你更友好的界面。
不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。
只要是可以识别串接样式表的浏览器就可以应用它。
怎么样，样式表的确是一个很不错的注意吧？
那么，现在我们就开始制作一份样式表。
zzz1.3你的第1张样式表
现在我们就开始制作样式表。
打开你最喜欢的HTML编辑器生成基本的网页：
HTML>
HEAD>
TITLE>
MyFirstStylesheet<
/TITLE>
/HEAD>
BODY>
H1>
Stylesheets:
TheTooloftheWebDesignGods<
/H1>
Amazeyourfriends!
Squashyourenemies!
/P>
/BODY>
/HTML>
很好。
现在，让我们给它加一些样式表。
只需在最初的<
和<
标签之间插入以下代码：
STYLETYPE="
text/css"
>
!
--
H1{color:
green;
font-size:
37px;
font-family:
impact}
P{text-indent:
1cm;
background:
yellow;
courier}
-->
/STYLE>
从浏览器中打开页面，你将会看到：
TheTooloftheWeb
DesignGods
做得很好！
你已经制作出了你的第1份样式表支持的网页。
（如果“amazeyourfriends!
”一行的背景不是黄色，则说明你需要升级你的浏览器，否则你将无法学完整个教程。
建议你安装NetscapeCommunicator或者InternetExplorer4）
一些术语
让我们学习一下这些新的编码：
串接样式表的核心是规则。
最简单的规则就象这样：
green}
整个规则告诉浏览器将所有<
包围的文字以绿色显示。
每一条规则包含一个选择及说明。
在上述例子中，H1就是选择，它是一个附带样式功能的HTML标签。
说明用于定义实际的样式，包括两部分：
属性（本例中即color）和参数（green）。
任何HTML标签都可用作标签。
所以你可以将样式表的信息附加到任何要素。
从通常的<
到<
CODE>
及<
TABLE>
内容。
你甚至可以通过将样式表用于<
IMG>
将串接样式表的属性用于图象。
从我们的第1个样式表实例中可以发现，你可以归类样式表的规则。
我们将3种不同的说明都用于<
与之类似，你也可以归类选择：
H1,P,BLOCKQUOTE
{font-family:
arial}
这项规则设定所以位于<
和<
BLACKQUOTE>
的标签将用Arial字体显示。
继承性
样式表的规则可从母体延续到子体。
下面是一个例子：
B{color:
blue}
这项规则告诉浏览器将所有<
B>
之内的文字用蓝色显示。
但是在下列情况下，浏览器该如何处理呢？
AllmyWebpageswillusecascadingstylesheetswithin<
four<
/I>
weeks.<
/B>
对于<
标签并没有设定样式，但因为<
位于<
之中，所以它将继承母体<
设定的样式，也以蓝色显示。
AllmyWebpageswillusecascadingstylesheetswithinfourweeks.
现在我们已经明白了串接样式表的规则如何运作，还看到将样式表加入网页的一种方法但还有其它方法，让我们继续学习。
zzz1.4将样式加到你的网页中
我们已经学了将样式表加到网页的一种方法。
实际上你可以使用4种方法。
每种方法都有其不同的优点：
∙将样式表植入HTML文件中。
∙将一个外部样式表链接到HTML文件上。
∙将一个外部样式表输入到HTML文件中。
∙将样式表加入到HTML文件行中。
植入样式表：
这就是我们在上一页中用的方法，所有的样式表信息都列于HTML文件的顶部，同<
分列，例：
P{background:
植入样式表规则后，浏览器在整个HTML页面中都执行该规则。
如果你想对网页一次性加入样式表，就可采用该方法。
你可能注意到代码中有两处很奇怪：
TYPE="
属性和注释标签。
设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。
注释标签（<
--and-->
）更为重要。
有些老的浏览器（如MAC机用的IE2.0）即使在设定了TYPE="
属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。
而使用注释标签则可以避免发生这种情况。
链接到样式表上
这里是样式表功能发挥得淋漓尽致的地方。
你可以将多个HTML文件都链接到一个中心样式表文件。
这个外部的样式表文件将设定你所有网页的规则。
如果你改变样式表文件中的额某一细节，所有页面都会随之改变。
如果你维护的站点很大，则这项功能绝对会有其用武之地。
它的使用方法：
产生一个普通的网页，但使用<
STYLE>
规则，而是在<
内使用<
LINK>
标签：
MyFirstStylesheet
LINKREL=stylesheetHREF="
mystyles.css"
TheToolof
theWebDesignGods<
Squash
yourenemies!
（使用链接的样式表时，你无须使用注释标签。
）
现在生成一个单另的文本文件，起名mystyles.css（或者其任何你喜欢的名字）。
文件内容如下：
courier}
如同发布HTML文件那样，将这个CSS文件布到你的服务器中。
在浏览器中观看网时，你会发现浏览器将依照链接标签将有链接了的HTML网页按照样式表的规则示，在HREF属性中你可以选择使用绝对相对URL。
输入样式表
输入外部样式表的方法同链接的方法类似。
不同之处在于链接法不能同其它方法结合使用，但输入法则可以。
例：
@importurl（company.css）;
orange;
而其中输入的company.css文件内容如下：
times}
在本例中，浏览器首先输入company.css的规则（@import必须打头）,然后加入移植的规则从而为这个网页产生规则集合。
请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。
在两者冲突的情况下，浏览器应执行哪一项规则呢？
植入的规则此时将占上风。
所以文字显示效果如下：
TheTooloftheWebDesignGods
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。
但是目前只有IE4.0支持输入法。
在行内加入样式
最后，你还可以在HTML行中加入样式规则，如下：
H1STYLE="
color:
impact"
PSTYLE="
background:
courier"
在这个例子中，你无须在HTML顶部加入样表代码。
加入行内的样式表属性将使浏器同样执行样式表规则。
该方法不方便之处在于：
你必须在每行指中都中加入样式规则，否则下一行时浏器将转回到文件的缺省设置。
加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。
分类及其它技巧
我们已经学习了所有的样式表基本语法。
下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.
分类
我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？
比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？
这种情况下分类将发挥作用。
你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。
这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：
P.first{color:
P.second{color:
purple}
P.third{color:
gray}
∙你的HTML代码如下：
PCLASS=first>
Thefirstparagraph,
withaclassnameof"
first."
PCLASS=second>
Thesecondparagraph,withaclassnameof"
second."
PCLASS=third>
Thethirdparagraph,
third."
你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的.）
你还可以生成不加任何HTML标签的分类：
.first{color:
这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页<
中，而设定的文字将以绿色显示。
情景选择：
如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。
不可能吗？
利用样式表可以实现你最狂野的梦想。
情景选择将使你梦想成真，心想事成。
情景选择要求你设定一个可以执行选择说明的情景即可。
PB{color:
red}
EmmaThompson<
Actress
Dramaticactor,inspired
comedienne.Isthere<
nothing<
shecan'
tdo?
样式表的规则告诉浏览器只将所有<
之内加重显示的文字以红色显示。
所以，<
之外标题的加重文字不会以红色显示，而<
之内的文字则是。
注释
即使是用样式表制作出的非常简练的代码也应该加上注释。
利用样式表代码就可以做到这一点。
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:
P{color:
有一项规则特别说明<
中的文字一红色显示，但它同时也继承了<
的绿色规定。
但是特别说明了的规则的重要性要大于继承的规则，所以<
之内的文字一红色显示。
2.应用继承的样式表规则
如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。
如果找不到继承的规则，则浏览器转向执行第3步。
3.按照样式表规则在HTML中的显示顺序执行。
当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。
在上例中，<
作为讲座一红色显示，因为它是最后给出的规则。
注意：
正式的串接样式表规定对于串接顺序有更详细的规定。
但由于执行规定NetscapeCommunicator和InternetExplorer都不支持，所以本文中不再细述。
最后一个问题：
如果样式表规则同HTML标签冲突时，如何处理？
我们看一下这个例子：
I{font-family:
impact}
Ithink<
FONTFACE="
Times"
EastofEden<
/FONT>
isStein
beck'
sbestnovel.<
该例中样式表规则要求浏览器使用Impact，但是传统的HTML<
标签要求用Times字体，一个很明显的传统。
根据正式的样式表规定，应该优先执行样式表规则。
字体样式
我们已经学习了如何使用及在网页中加入串接样式表，我们将深入学习串接样式表每一项精彩绝伦的特点。
今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。
想想如果只用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.
你可以在列表中加入任何种字体名称。
当你对一种字体在不同的操作平台上的名称没有把握时，这样做无疑是一种好办法。
浏览器更倾向于认可小写的名称。
当然，只用你对所有项目都进行了测试，就
升级会员 