css使用编

来源：互联网发布：淘宝不买东西怎么投诉编辑：程序博客网时间：2024/05/13 08:43

将层叠样式单放在何处

　　层叠样式单写好后，放在什么地方呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。我们分别讲述：

　　一、外部文件方式
外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为CSS。

　　CSS文件的引用是在HTML的<head></head>标志之间写下列语句：

　　<Link Rel="STYLESHEET" Href="文件名.CSS" Type="text/css">,如当前文件目录下有一CSS 文件名为myStyle.css，内容如下

P{font-family:'宋体';
　font-size:9pt;
　color:blue}
H2{font-family:‘宋体’;
　font-size:13pt;
　color:red
}

　　则在引用时，用下列语句

　　<Link Rel="STYLESHEET" Href="myStyle.css" Type="text/css">，当然，如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件，这些语句会自动生成的。

　　应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件进行整理，你说是不是挺方便的呀！特别提醒一下，如果你想建立自己的网站，这方面不可忽视哟，如果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会累死你的。

　　二、内部文档头方式

　　这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<Head></Head>之间，而不是形成文件。这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS)

　　如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。这两种方式并不相排斥，而是相互结合，比如在CSS文件中定义了P标志的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;而在另一个HTML文件中定义颜色为Green，从这里，你也可能明白为什么风格样式单叫层叠式样单了。

　　三、直接插入式

　　直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：

　　这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。

　　综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式；在整个页内风格统一上，用第二种方式；而在页内某个标志的具体微调上，第三种方式也有用武之地，所以各有千秋吧！前两种的目的在于一是统一风格，二是减少繁琐的标志属性设置，真是功不可没哟!

样式类的创建与引用

　　在用CSS进行网站设计时，会遇到一种情况：相同的标志可能在不同的地方显示的效果不一样。怎么办呢，有一种办法即是采用上节所讲的直接插入式，逐个逐个地进行属性设置，如果该类标志比较少，这倒还可以；如果多了，可就有点令人厌烦了。

　　解决的办法就是采用样式类。

　　样式类，顾名思义是样式的分类，它可以根据不同的风格需要对某一类型的标志设置几种不同的CSS属性，也可以对整个风格分成几个类而不是只针对某一种类型的标志。

　　一、样式类的建立

　　样式类可在我们上节讲的外部文件与文档头方式中建立，而不能在直接插入式中建立。它的建立格式有以下两种：

第一种：

　标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝

　标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝
　　．．．．．

第二种：

　　．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝

　　在第一种方式中，我们可对某一类型的标志建立样式类，如：　

P{font-family:'宋体'；font-size:10pt；font-color；Red}
P.isLeft{text-align:left}
P.isRight{text-align:right}
P.isCenter{text-align:center}

上边的例子中，所有段落标志的字体都为宋体，大小为10pt，颜色为红色，由于排版的需要又分成了三个样式类，分别具有不同的排版属性，从这个例子你可以看出层叠样式单之所以为层叠，其意义也在于此。

　　第二种方式的用处则在于它规定的样式类，没有特定于某一类标志，而是其它类型的标志都可以用。如：

．isLeft{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:left}
．isRight{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:right}
．isCenter{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:center}

它规定了三个样式类，几乎所有的类型都可以引用它们。

　　有一点要注意，样式类与我们上节所讲的统一风格形式并不相冲突，样式类更多地强调了风格的异，而统一的设置形式则强调了风格的同。两者常相互结合，实现样式风格的叠加，使网页风格在整体统一的基础上而各自又绚丽多彩。

　　二、样式类的引用

　　样式类的引用很简单，只需在标志后面设置Class属性值为样式类名即可，引用格式如下：

　　　　<标志 Class="样式类名">

　　如我们上边用第一种方式建立的样式类在一个段落标志中引用，

　　　<P Class="isLeft">你好，欢迎你来到网络学堂</p>。

　　要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。

　　如果我们要动态改变某个引用了样式类的标志风格，可通过脚本语言来修改标志对象的className属性，具体方式如下：

　　所要修改标志的标识号.style.className="样式类名"，如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式，在脚本语言中修改语句如下：

　　　p1.style.className="isRight"

创建CLASS

　　以上所介绍的样式表规则，我们发现在一个HTML页中中，每种HTML标志只能为其定义一种风格，然而我们有时候会碰到其他一些情况，比如：同一个HTML标志需要呈现不同的风格；有若干个不同的HTML标志采用相同的样式规则。

　　采用上面提到的直接插入方式可以一一的对之进行定义，但这样做有个问题，一旦这类定义多了起来，又会使事情变得相当复杂，与我们采用样式表以求风格的统一和形式简单的初衷大相违背。

　　样式表提供了解决方法，创建类（CLASS）可以创建同一个HTML标志的多种风格。

　　其语法为：

　　标志.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}

　　引用方法是：

　　 < 标志 CLASS="类名">

　　例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用< P>这个标记。

　　代码书写如下：

< html>< head>< title>This is a sample< /title>< style type="text/css">< !--p.first {  text-indent: 0.5in}p.second {  text-indent: 1.0in}-->< /style>< /head>< body bgcolor="#FFFFFF">……< p class="first">这个段落将缩进0.5in< /p>< p class="second">这个段落将比上面缩进一倍距离< /p>……< /body>< /html>

　　显示该页面时，第二个段落将比第一个段落多缩进出一倍距离。

　　此外，可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志：

　　 .类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}

　　例如：

< style type="text/css">< !--.main01 { font-size: 10pt; color: blue}-->< /style>

　　该CLASS规定了字符的大小和颜色，当HTML文档中任何地方，无论是段落< p>、表格< table>，需要其字体大小为10pt颜色为红色时，就可以引用这个CLASS。引用的方法和上面一样：

　　 < HTML标志 CLASS="类名">

　　例如要设置某单元格中的字符大小为main10所定义的风格，则可写为：

　　 < td class="main01">

　　而设置某一段落字符风格为main10，可写为：

　　 < p class="main01">

　　如上所举，我们可以在同一HTML文档中多次引用这个类，引用该类的地方都将呈现同一种风格。

　　创建CLASS并不是建立多种风格的唯一手段， ID也可以用来实现同一规则被应用到页面中不同的地方。

　　它的语法是：

　　 #id名 {标志属性：属性值；标志属性：属性值；……标志属性：属性值}

　　如上面的例子，可以改写为：

　　 < style type="text/css">
　　 < !--
　　 #001 { font-size: 10pt; color: red}
　　 #002 { font-size: 12pt; color: blue}
　　 -->
　　 < /style>

　　引用的方法也相同：< 标志　ID＝"ID名">。