0025.htm

来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 367 行 · 第 1/2 页

face="宋体">3</font>种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样式表文件）将以以下方式显示： 
</font>

<ul>
  <font size="2"><tt><p><font face="宋体">P.first { color: green }<br>
  P.second { color: purple }<br>
  P.third { color: gray } <br>
  </font></p>
  </tt></font>
  <li><font size="3" face="宋体">你的HTML代码如下： </font></li>
</ul>
<font size="2">

<ul>
  <tt><p> &lt;P CLASS=first&gt;The first paragraph, <br>
  with a class name of &quot;first.&quot;&lt;/P&gt;<br>
  &lt;P CLASS=second&gt;The second paragraph, with a class name of 
  &quot;second.&quot;&lt;/P&gt;<br>
  &lt;P CLASS=third&gt;The third paragraph, <br>
  with a class name of &quot;third.&quot;&lt;/P&gt;</font></p>
  </tt>
</ul>
</font>

<p><font size="3">你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 
 .</font>） </font></p>

<p><font size="3">你还可以生成不加任何HTML标签的分类： 
</font><font size="2">

<ul>
  <tt><p> .first { color: green }</font></p>
  </tt>
</ul>
</font>

<p><font size="3" face="宋体">这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页&lt;BODY&gt;中，而设定的文字将以绿色显示。<br>
<b><br>
</b><strong>情景选择</strong>：<br>
<br>
如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。 
</font><font size="2">

<ul>
  <tt><p><font face="宋体">P B { color: red } </font></p>
  <p> &lt;H1&gt;&lt;B&gt;Emma Thompson&lt;/B&gt;, Actress<br>
  &lt;/H1&gt;<br>
  &lt;P&gt;Dramatic actor, inspired <br>
  comedienne. Is there &lt;B&gt;nothing&lt;/B&gt; <br>
  she can't do?&lt;/P&gt;</font></p>
  </tt>
</ul>
</font>

<p><font size="3" face="宋体">样式表的规则告诉浏览器只将所有&lt;P&gt;之内加重显示的文字以红色显示。所以，&lt;P&gt;之外标题的加重文字不会以红色显示，而&lt;P&gt;之内的文字则是。 
<br>
<b><br>
</b><strong>注释</strong><br>
<br>
即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：</font><font
size="2" face="宋体"> </font><font size="2">

<ul>
  <tt><p><font face="宋体">P.first { color: green } /* green<br>
  for the first paragraph of every <br>
  page */H1 { text-indent: 10px; <br>
  font-family: verdana }<br>
  IMG { margin-top: 100px } /* give<br>
  all images a top margin */</font></p>
  </tt>
</ul>
</font>

<p><font size="3"><b>串接</b> <br>
<br>
你可能会问这样的问题：“为什么要把它叫做串接样式表呢？下面我们将回答你的问题。
<p><font size="3">屏幕就是一个战场，在一个HTML文件中，如果有<font
face="宋体">3</font>种不同的样式表规则都使用<font face="宋体">P</font>作为其选择。输入的样式表指示浏览器将<font
face="宋体">&lt;P&gt;</font>文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。<br>
<br>
那么可怜的浏览器该听谁的呢？<br>
<br>
好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序： 

<ol>
  <li> <b>Inline styles</b> </font>（行内样式）</li>
  <li> <b>Embedded styles</b> </font>（植入样式）</li>
  <li> <b>Linked styles</b> </font>（链接样式）</li>
  <li> <b>Imported styles</b> </font>（输入样式）</li>
  <li> <b>Default browser styles</b></font>（缺省浏览器样式） </li>
</ol>

<p>浏览器将按照上述顺序执行样式表的指令。<br>
<br>
但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将<font
face="宋体">&lt;P&gt;</font>以绿色显示，而另一个规则要求以红色显示？<br>
<br>
多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序： 
</font>

<ol>
  <li><b><font face="宋体" size="3">使用特别说明的样式表规则，例</font><font
    size="2" face="宋体">：</font></b><font size="2"> <p> <tt>BODY { 
    color: green }<br>
    P { color: red }</tt> </font></p>
    </font><p><font size="3"><tt>有一项规则特别说明 &lt;P&gt;</font></tt> 
    中的文字一红色显示，但它同时也继承了<font face="宋体">&lt;BODY&gt;</font>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以<font
    face="宋体">&lt;P&gt;</font>之内的文字一红色显示。 </font></p>
  </li>
  <font size="3">
  <li><b>应用继承的样式表规则</b> <p>如果不存在第<font face="宋体">1</font>步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第<font
    face="宋体">3</font>步。 </p>
  </li>
  </font>
  <li><font size="3"><b>按照样式表规则在HTML中的显示顺序执行。</b> 
    </font><font size="2"><p> <tt>P { color: green }<br>
    P { color: red }</tt> </font></p>
    </font><p><font size="3">当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，<font
    face="宋体">&lt;P&gt;</font>作为讲座一红色显示，因为它是最后给出的规则。 
    </font></p>
  </li>
</ol>

<p><font size="3">注意：正式的串接样式表规定对于串接 
顺序有更详细的规定。但由于执行规定<font face="宋体">Netscape 
Communicator </font>和<font face="宋体">Internet Explorer</font>都不支持，所以本文中不再细述。 
<br>
<br>
最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子： 
</font><font size="2">

<ul>
  <tt><p><font face="宋体">I { font-family: impact } </font></p>
  <p> &lt;P&gt;I think &lt;I&gt;&lt;FONT FACE=&quot;Times&quot;&gt;<br>
  East of Eden&lt;/FONT&gt;&lt;/I&gt; is Stein<br>
  beck's best novel.&lt;/P&gt;</font></p>
  </tt>
</ul>
</font>

<p><font size="3" face="宋体">该例中样式表规则要求浏览器使用Impact，但是传统的HTML&lt;FONT 
FACE&gt;标签要求用Times字体，一个很明显的传统。<br>
<br>
根据正式的样式表规定，应该优先执行样式表规则。<br>
<br>
但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉.......<br>
<br>
你看到了吧，浏览器不能如我们希望的那样应用串接样式表。节哀顺变吧。
<p><font size="3">我必须得作这个简短而又尖刻的评价：串接样式表很伟大，但浏览器却不怎么样。<br>
<br>
<font face="宋体">Internet Explorer 3.0</font>是第一个试图支持样式表的浏览器，它的尝试是很有勇气的，特别是在尚未确定样式表的正式标准的时候更显得可贵。但也因为如此，<font
face="宋体">IE 3.0</font>支持了CSS的大部分属性，但也存在一些小毛病。<br>
<br>
你可能以为等<font face="宋体">Netscape Communicator</font>和<font face="宋体">IE 
4.0</font>问世的时候将会更坚定地支持CSS。很可惜。似乎微软和网景关系的开发者对CSS的某些属性都作了自己的阐释。而双方的阐释彼此互不支持。<br>
<br>
结果如何呢？应用样式表就象是行走在地雷区一般。大部分的东西都很正常，但有些不是。甚至有些东西都能运转，但在不同的浏览器上的显示却不同。<br>
<br>
在以后<font face="宋体">4</font>天的学习中，我将尽力说明不同的浏览器各自支持什么属性。但是其中的细节就需要你自己亲自去趟这个雷区了。将利用样式表制作的产品放到不同的浏览器和平台上进行测试是非常有必要的。这是避免令人不愉快的结果的唯一办法。<br>
<br>
同时，我们应该大声疾呼，让微软和网景公司明白必须统一对串接样式表的支持，只有这样才能实现标准化的设计。
<p><font size="3">今天我们探索了样式表的神奇魅力及其基本使用方法。<br>
<br>
为什么使用串接样式表？因为它能对网页的设计施以绝对的控制。它还是维护和更新一个网站最有效的途径。它能使网页的体积更小下载速度更快。<br>
<br>
CSS如何应用呢？通过每一项样式表规则应用。样式表规则由选择和说明两项构成。规则可以被植入、链接、输入HTML或加入HTML文件行内。每种网网页中加入样式表的方法都有各自的优势。<br>
<br>
下面的<font face="宋体">4</font>天中，我们将深入学习样式表的各项属性，了解它的威力。以下是大致的学习计划： 

<ul>
  <li>第<font face="宋体">2</font>日：字体 </li>
  <li>第<font face="宋体">3</font>日：图文和布局 </li>
  <li>第<font face="宋体">4</font>日：颜色和背景 </li>
  <li>第<font face="宋体">5</font>日：定位 </li>
</ul>
</font>

<p><font face="宋体" size="3">明天见！</font></p>

  </table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>