建立CSS文档

样式表的建立要符合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的测试页面



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样式表,而你无须再加入

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 />


CSS扩展了HTML的功能,是网页设计者的救星


Stylesheets: The Tool of the Web Design Gods




  在这个例子中,你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。该方法不方便之处在于:你必须在每行指令中都中加入样式规则,否则下一行时浏览器将转回到文件的缺省设置。加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大,但有时候你会发现它也很有用。
  其实,你可以同时使用几种方法,而样式表的能力就在于综合你加入网页的各种样式。有些朋友可能会问,如果我同时使用几种插入样式表的方法,那么浏览器会确认谁先执行呢?下面为CSS样式表的串接顺序,浏览器将按照此顺序执行样式表的指令。
Inline styles (行内样式)
Embedded styles (植入样式)
Linked styles (链接样式)
Imported styles (输入样式)
Default browser styles(缺省浏览器样式)

小 虾

哦也,我是小虾

You may also like...