样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：
HTML标志{标志属性:属性值; 标志属性:属性值; 标志属性:属性值; 标志属性:属性值; …}
下面我们分别讲述：
．HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是
、
以及。
．标志属性:属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以”-“隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
如:H2{font-size:15pt;
font-family:’宋体’;
font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置。
层叠样式单写好后，放在什么地方呢？实际上你可以使用4种方法，而且每种方法都有其不同的优点：
● 将样式表植入HTML文件中。
● 将一个外部样式表链接到HTML文件上。
● 将一个外部样式表输入到HTML文件中。
● 将样式表加入到HTML文件行中。
四种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。我们分别讲述：
1．植入样式表
这就是我们在刚才范例中用的方法，所有的样式表信息都列于HTML文件的顶部，CSS的代码直接定义在文档头之间。这种风格定义产生作用的范围也只局限于本文件。
这是CSS的测试页面
植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你只是想对网页进行一次性加入样式表的话，就可采用该方法。如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。
你可能一直都注意到代码中有两处很奇怪：TYPE=”text/css”属性和注释标签。
TYPE=”text/css” 设定采用MIME类型，这样一来，不支持CSS的浏览器可以忽略样式表。
注释标签更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE=”text/css” 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。
2．链接到样式表上
这是CSS样式表最值得令人振奋的一项功能。你可以将多个HTML文件都链接到一个中心样式表文件。而这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的某一个细节，某一个语句定义，那么所有页面都会随之改变。维护大型站点的Webmaster们知道这功能后，一定会惊喜若狂。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为.css。
使用方法很简单，首先建立一个单独的文本文件，起名mystyles.css (或者任何你喜欢的名字)。文件内容如下：
H1{ color:red;font-size:12pt;font-family:宋体 }
P{color:white;background:black;font-family:courier}
把文件存在你的主页目录下，之后，你只需要在你站点网页内的内使用标签，把mystyles.css的存放路径填写上去（在HREF属性中你可以选择使用绝对或相对URL），就能实现你定义的CSS样式表，而你无须再加入
My First Stylesheet<br />
</TILTE><br />
</HEAD><br />
<BODY><br />
<H1>Stylesheet:The Tool of the Web Design Gods</H1><br />
<P> Amaze your friends! Squash your enemies!</P><br />
</BODY><br />
</HTML><br />
而其中输入的 company.css文件内容如下：<br />
H1{color:green;font-family:times}<br />
P{background:yellow;font-family:courier}<br />
在本例中，浏览器首先输入 company.css的规则 ( @import 必须打头), 然后加入移植的规则从而为这个网页产生规则集合。请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。所以文字显示效果如下：<br />
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。 （但是目前只有IE 4.0支持输入法。 ）<br />
4．在行内加入样式<br />
最后，你还可以在HTML行中加入样式规则，这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。如下：<br />
<HTML><br />
<HEAD><br />
<TITLE>My First Stylesheet<br />
在这个例子中，你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。该方法不方便之处在于：你必须在每行指令中都中加入样式规则，否则下一行时浏览器将转回到文件的缺省设置。加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
其实，你可以同时使用几种方法，而样式表的能力就在于综合你加入网页的各种样式。有些朋友可能会问，如果我同时使用几种插入样式表的方法，那么浏览器会确认谁先执行呢？下面为CSS样式表的串接顺序，浏览器将按照此顺序执行样式表的指令。
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
．标志属性:属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以”-“隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
如:H2{font-size:15pt;
font-family:’宋体’;
font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置。
层叠样式单写好后，放在什么地方呢？实际上你可以使用4种方法，而且每种方法都有其不同的优点：
● 将样式表植入HTML文件中。
● 将一个外部样式表链接到HTML文件上。
● 将一个外部样式表输入到HTML文件中。
● 将样式表加入到HTML文件行中。
四种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。我们分别讲述：
1．植入样式表
这就是我们在刚才范例中用的方法，所有的样式表信息都列于HTML文件的顶部，CSS的代码直接定义在文档头之间。这种风格定义产生作用的范围也只局限于本文件。
CSS扩展了HTML的功能，是网页设计者的救星
Stylesheets:The Tool of the Web Design Gods
植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你只是想对网页进行一次性加入样式表的话，就可采用该方法。如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。
你可能一直都注意到代码中有两处很奇怪：TYPE=”text/css”属性和注释标签。
TYPE=”text/css” 设定采用MIME类型，这样一来，不支持CSS的浏览器可以忽略样式表。
注释标签更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE=”text/css” 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。
2．链接到样式表上
这是CSS样式表最值得令人振奋的一项功能。你可以将多个HTML文件都链接到一个中心样式表文件。而这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的某一个细节，某一个语句定义，那么所有页面都会随之改变。维护大型站点的Webmaster们知道这功能后，一定会惊喜若狂。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为.css。
使用方法很简单，首先建立一个单独的文本文件，起名mystyles.css (或者任何你喜欢的名字)。文件内容如下：
H1{ color:red;font-size:12pt;font-family:宋体 }
P{color:white;background:black;font-family:courier}
把文件存在你的主页目录下，之后，你只需要在你站点网页内的内使用标签，把mystyles.css的存放路径填写上去（在HREF属性中你可以选择使用绝对或相对URL），就能实现你定义的CSS样式表，而你无须再加入
CSS扩展了HTML的功能，是网页设计者的救星
Stylesheets: The Tool of the Web Design Gods
在这个例子中，你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。该方法不方便之处在于：你必须在每行指令中都中加入样式规则，否则下一行时浏览器将转回到文件的缺省设置。加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
其实，你可以同时使用几种方法，而样式表的能力就在于综合你加入网页的各种样式。有些朋友可能会问，如果我同时使用几种插入样式表的方法，那么浏览器会确认谁先执行呢？下面为CSS样式表的串接顺序，浏览器将按照此顺序执行样式表的指令。
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
Share with
/
发表回复
您的邮箱地址不会被公开。