📄 0073.htm

📁 新时代软件教程:操作系统主页制作服务器设计软件网络技术编程语言文字编辑
💻 HTM
字号:
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>创建并引用样式类</strong></big></p>

<div align="right">---（文/秋实）</div>

        　　在用CSS进行网站设计时，会遇到一种情况：相同的标志可能在不同的地方显示的效果不一样。怎么办呢，有一种办法即是采用上节所讲的直接插入式，逐个逐个地进行属性设置，如果该类标志比较少，这倒还可以；如果多了，可就有点令人厌烦了。<br>
        　　解决的办法就是采用样式类。<br>
        　　样式类，顾名思义是样式的分类，它可以根据不同的风格需要对某一类型的标志设置几种不同的CSS属性，也可以对整个风格分成几个类而不是只针对某一种类型的标志。<p>　　一、样式类的建立<br>
        <br>
        　　样式类可在我们上节讲的外部文件与文档头方式中建立，而不能在直接插入式中建立。它的建立格式有以下两种：<br>
        </p>
        <table align="center" border="1" borderColor="#3399ff" width="60%">
<TBODY>
          <tr>
            <td>第一种：<br>
            <font color="#3333ff">　标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 
            <br>
            　标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 
            <br>
            　标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 
            <br>
            　　．．．．． </font><br>
            第二种：<br>
            <font color="#0000ff">　　．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 
            </font></td>
          </tr>
</TBODY>
        </table>
        <p>　　在第一种方式中，我们可对某一类型的标志建立样式类，如：　 
        </p>
        <table align="center" border="1" borderColor="#3399ff" width="60%">
<TBODY>
          <tr vAlign="top">
            <td height="36"><font color="#0000ff">P{font-family:'宋体'；font-size:10pt；font-color；Red}<br>
            P.isLeft{text-align:left} <br>
            P.isRight{text-align:right} <br>
            P.isCenter{text-align:center} </font></td>
          </tr>
</TBODY>
        </table>
        <p>上边的例子中，所有段落标志的字体都为宋体，大小为10pt，颜色为红色，由于排版的需要又分成了三个样式类，分别具有不同的排版属性，从这个例子你可以看出层叠样式单之所以为层叠，其意义也在于此。<br>
        　　第二种方式的用处则在于它规定的样式类，没有特定于某一类标志，而是其它类型的标志都可以用。 
        如： </p>
        <table align="center" border="1" borderColor="#3399ff" width="76%">
<TBODY>
          <tr vAlign="top">
            <td height="36"><font color="#0000ff">．isLeft{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:left} 
            <br>
            ．isRight{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:right} <br>
            ．isCenter{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:center} </font></td>
          </tr>
</TBODY>
        </table>
        <p><br>
        它规定了三个样式类，几乎所有的类型都可以引用它们。 <br>
        </p>
        <p>　　有一点要注意，样式类与我们上节所讲的统一风格形式并不相冲突，样式类更多地强调了风格的异，而统一的设置形式则强调了风格的同。两者常相互结合，实现样式风格的叠加，使网页风格在整体统一的基础上而各自又绚丽多彩。 
        <br>
        <br>
        　　二、样式类的引用<br>
        <br>
        　　 样式类的引用很简单，只需在标志后面设置Class属性值为样式类名即可，引用格式如下：<br>
        <br>
        　　　　<font color="#0000ff">&lt;标志 Class=&quot;样式类名&quot;&gt; <br>
        <br>
        　　</font>如我们上边用第一种方式建立的样式类在一个段落标志中引用，<font
        color="#0000ff"><br>
        　　　&lt;P Class=&quot;isLeft&quot;&gt;你好，欢迎你来到网页陶吧&lt;/p&gt;。<br>
        　　 </font><br>
        要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。<br>
        <br>
        　　如果我们要动态改变某个引用了样式类的标志风格， 
        可通过脚本语言来修改标志对象的className属性，具体方式如下：<br>
        　　<font color="#0000ff">所要修改标志的标识号.style.className=&quot;样式类名&quot;</font>，如对一标志&lt;p 
        id=&quot;p1&quot; class=&quot;isLeft&quot;&gt;hello&lt;/p&gt;修改为右排列的样式，在脚本语言中修改语句如下：<br>
        　　　<font color="#0000ff">p1.style.className=&quot;isRight&quot;</font>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -