神马文学网CSS使用篇(二):样式类的创建与引用
来源：百度文库 编辑：神马文学网 时间：2024/05/01 21:27:20
解决的办法就是采用样式类。
样式类，顾名思义是样式的分类，它可以根据不同的风格需要对某一类型的标志设置几种不同的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="样式类名">
如我们上边用第一种方式建立的样式类在一个段落标志中引用，
你好，欢迎你来到网络学堂
要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。
如果我们要动态改变某个引用了样式类的标志风格， 可通过脚本语言来修改标志对象的className属性，具体方式如下：
所要修改标志的标识号.style.className="样式类名"，如对一标志
hello
修改为右排列的样式，在脚本语言中修改语句如下：p1.style.className="isRight"