0031.htm

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

<p> <b><tt>z-index</tt></b> </font></p>

<p>当你定位多个要素并将其重叠时，你可以使用<font face="宋体"><tt>z-index</tt></font>来设定哪一个要素应出现在最上层。 

<ul>
  <tt><p><font face="宋体">H2 { position: relative; left: 10px; top: 0px; z-index: 10 }<br>
  H1 { position: relative; left: 33px; top: -35px; z-index: 1 }</font></p>
  </tt>
</ul>

<p>观察这条<font face="宋体">CSS</font>规则的执行效果（我将<font
face="宋体">&lt;H2&gt;</font>的文字设为绿色，以便你观察其不同之处）：</p>

<h2 style="position: relative; left: 10px; top: 0px; z-index: 10; color: green"><font
face="宋体">Stylesheets</font></h2>

<h1 style="position: relative; left: 33px; top: -35px; z-index: 1"><font face="宋体">Mania</font></h1>

<p>由于<font face="宋体"><tt>&lt;H2&gt;</tt></font>文字的<font face="宋体"><tt>z-index</tt></font>参数值更高，所以它显示在 
 <tt>&lt;H1&gt;</tt></font>文字的上面。（<font face="宋体">IE 
4</font>在<font face="宋体">MAC</font>机上执行这一项时会出问题，它会将<font
face="宋体">&lt;H1&gt;</font>放在最上面。</p>

<p>该参数值使用纯整数。 <tt>z-index</tt></font>用于绝对定位或相对定位了的要素。 
</p>

<p>你也可以给图象设定 <tt>z-index</tt></font>。（对于<font
face="宋体">Communicator</font>，最好将  <tt>&lt;IMG&gt;</tt></font>标签包在<font
face="宋体"><tt>&lt;SPAN&gt;</tt></font>或  <tt>&lt;DIV&gt;</tt></font>标签内，然后将<font
face="宋体">z-index</font>应用到 <tt>&lt;SPAN&gt;</tt></font>或 <font
face="宋体"><tt>&lt;DIV&gt;</tt></font>。）
<p><font size="3">好的网页设计同低版本的兼容性都很好。 </font></p>
<font size="3">

<p>你为<font face="宋体">4.0</font>版浏览器设计的网页如果在<font
face="宋体">3.0</font>版的浏览器上是一团糟，则你的设计是失败的。<br>
<br>
利用样式表时，你更应该考虑到兼容性的问题，因为许多用户使用的浏览器都不支持<font
face="宋体">CSS</font>属性。</p>

<p>当然你可以为不同的浏览器设计出不同的网页。但是我们想尽可能地避免这些麻烦，以减少空间占用和网页维护工作。 
</p>

<p>让我们看看如何使利用样式表设计的网页能被其它低版本浏览器兼容。 
</p>

<p><b>方法 #1: </font>在类似的<font face="宋体">HTML</font>标签上应用样式表</b> 
</p>

<p>如果你想利用字重属性控制文字的加重显示程度，为什么不使用<font
face="宋体">&lt;B&gt;</font>标签加入这种效果呢？这样以来，在所有的浏览器中都可以显示出文字的加重显示效果。<br>
<br>
尽量使用和<font face="宋体">CSS</font>说明相应的<font face="宋体">HTML</font>标签，以便在老的浏览器中也能达到<font
face="宋体">4.0</font>版浏览器相同的显示效果。 </p>

<p><b>方法 #2: </font>用<font face="宋体">HTML</font>标签重复加入样式</b> 
</p>

<p>如果你想确保使段落显示蓝色，那么你应该同时使用样式表属性和<font
face="宋体">HTML</font>标签设定段落的颜色。  <tt>color: 
blue</tt></font>同时设定 <tt>&lt;FONT COLOR=&quot;blue&quot;&gt;</tt></font>。如果你想使某要素居中，则同时使用<font
face="宋体"><tt>text-align: center</tt> </font>和<font face="宋体"><br>
<tt>&lt;CENTER&gt;</tt></font>。 </p>

<p><b>方法 #3: </font>隐藏不想要的要素</b> </p>

<p>如果你使用了大的装饰性的文字符号，而这个文字符号在老的浏览器中显得很怪很傻，你可以使用 
 <tt>&lt;FONT COLOR=&quot;xyz&quot;&gt;</tt> </font>使它的要素同背景色相同，从而使得它在老的浏览器中被“隐藏”起来。而在新的浏<br>
览器中，<font face="宋体">CSS</font>属性仍将它用红色（或其它任何颜色）显示，用户在新浏览器中仍然可以看到它的效果。 
</p>

<p>使你的网页同老式浏览器兼容并不只是在设计末尾时花几分钟加入几行命令，你必须在整个设计过程中都时刻考虑到兼容性的问题，并作出相应的设计。</p>

<p>而最重要的是：测试、测试、再测试。
<p><font size="3"> <a href="javascript:if(confirm('../../www.w3.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/default.htm'" tppabs="http://www.w3.org/">World Wide Web</a></font>组织自规定了样式表标准之后并未止步不前。甚至在主要的几种浏览器尚未完全支持<font
face="宋体">CSS</font>功能时，<font face="宋体">CSS2</font>已经在酝酿之中。<font
face="宋体">CSS2</font>的标准已经制定。而接下来的问题只是：<font
face="宋体">5.0</font>版本的浏览器是否会支持<font face="宋体">CSS2</font>。<br>
<br>
以下简要介绍<font face="宋体">CSS</font>的新增功能： </font></p>
<font size="3">

<p><b>对<font face="宋体">CSS1</font>的调整</b> </p>

<p><font face="宋体">CSS</font>属性中又加了几项，比如<font face="宋体">icon</font>将意味着文字内容的尺寸应符合计算机正在使用的<font
face="宋体">icon</font>文字的尺寸。定义选择器（selector）和情景选择器（contextual 
selector）的方法也将更加灵活。 </p>

<p><b>新增的“绝技”</b> </p>

<p>新的文字阴影属性将会受到大家的欢迎。 </p>

<p>想使鼠标滑过某一链接时鼠标显示的手形有所改变吗？你可以使用光标属性设定鼠标显示的不同形状。 
</p>

<p>记得我们怎样用  <tt>A:active</tt></font>来设定用户点击链接文字时的属性吗？<font
face="宋体"><tt>:hover</tt></font>将使我们能够实现当鼠标移到文字上面时就改变文字显示。很酷吧！</p>

<p>这些只是未来<font face="宋体">CSS</font>的几种小把戏。</p>

<p><b>控制表格</b> </p>

<p>我们设计网页布局时总是要用到表格，学习完本课程之后，我们还可以用<font
face="宋体">CSS</font>来设计网页布局。如果利用<font face="宋体">CSS</font>能更好地控制表格，那该有多好。是的，它能够做到。 
<br>
<br>
此外，你还能够控制文件打印时的分页，你还可以制定某些打印指令。<br>
<br>
你还有可能实现通过声控系统进入你的网页。诸如<font face="宋体"><tt>voice-family</tt></font>和<font
face="宋体"><tt>speech-rate</tt></font>等属性将设定如何将你的网页内容用声音自动朗读出来。
<p><font size="3">熟能生巧。所以我们需要加强实践。  </font></font></p>
<p><font size="3">祝贺你学完了本次课程！<br>
<br>
今天我们学习了定位和叠放，总结如下： 

<ul>
  <li><tt>定位（<font face="宋体">position</font></tt>）是最令人中意的<font
    face="宋体">CSS</font>属性，你可以利用它精确地控制某要素在页面的位置。</li>
  <li><tt>左边（<font face="宋体">left</font></tt>）用于设定要素的水平位置。</li>
  <li><tt>顶部（<font face="宋体">top</font></tt>）用于设定要素的垂直位置。</li>
  <li><tt>宽度（<font face="宋体">width</font></tt>）使你能控制要素的显示宽度。</li>
  <li><tt>高度（<font face="宋体">height</font></tt>）用于设定要素的高度。</li>
  <li><tt>可视性（<font face="宋体">visibility</font></tt>）用于设定显示还是隐藏某要素。</li>
  <li> <tt>z-index</tt></font>使你能设定重叠的要素中那个要素显示在最上面。 
  </li>
</ul>

<p>希望本次课程对你有所帮助。还有很多<font face="宋体">CSS</font>的功能我们还没有涉及。还有一些小的浏览器问题我们也没有一一列出。所以你自己还必须继续深入学习。 
</p>

<p><b>互联网上的<font face="宋体">CSS</font>资源</b> 

<ul>
  <li> <a href="javascript:if(confirm('../../www.w3.org/Style/css/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/Style/css/default.htm'" tppabs="http://www.w3.org/Style/css/">The Official Home of CSS</a> 
    -&nbsp; World Wide Web</font>组织有关<font face="宋体">CSS</font>的新闻和动向，包括正式制定的 
     <a href="javascript:if(confirm('../../www.w3.org/TR/REC-CSS1  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/TR/REC-CSS1'" tppabs="http://www.w3.org/TR/REC-CSS1">CSS1</a> </font>和 <font
    face="宋体"><a href="javascript:if(confirm('../../www.w3.org/TR/PR-CSS2/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.w3.org/TR/PR-CSS2/default.htm'" tppabs="http://www.w3.org/TR/PR-CSS2/">CSS2</a> </font>标准（<font
    face="宋体">CSS2</font>目前还只是一个待批准的建议）</li>
  <li> <a href="javascript:if(confirm(' /webmonkey/stylesheets/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location=' /webmonkey/stylesheets/default.htm'" tppabs="http://www.hotwired.com/webmonkey/stylesheets/">Webmonkey's 
    Stylesheets Collection</a> - </font>网猴的<font face="宋体">CSS</font>内容集锦。</li>
  <li> <a href="javascript:if(confirm('../../style.webreview.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../style.webreview.com/default.htm'" tppabs="http://style.webreview.com/">Web Review Style Sheets 
    Reference Guide</a> - CSS</font>在不同浏览器上的适用规格最新指南。</li>
  <li> <a href="javascript:if(confirm('../../www.htmlhelp.com/tools/csscheck/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../www.htmlhelp.com/tools/csscheck/default.htm'" tppabs="http://www.htmlhelp.com/tools/csscheck/">CSSCheck</a> - </font>检查你的<font
    face="宋体">CSS</font>代码的语法。</li>
  <li> <a href="javascript:if(confirm('../../home.att.net/~sjacct/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server@'))window.location='../../home.att.net/~sjacct/default.htm'" tppabs="http://home.att.net/~sjacct/">CSS Pointers</a> - </font>有关<font
    face="宋体">CSS</font>相当完整的资源链接清单。</li>
  <li> <a href="news:comp.infosystems.www.authoring.stylesheets">comp.infosystems.www.authoring.stylesheets</a> 
    - Usenet</font>新闻组，共享和探讨<font face="宋体">CSS</font>的问题及解决方案。</li>
</ul>
</font>

<p><font size="3">感谢你学完了本课程。你现在已经掌握了样式表的威力。你可以利用<font
face="宋体">CSS</font>在互联网尽情发挥自己的创意，体现你的才华！</font></p>

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