0030.htm
来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 321 行 · 第 1/2 页
HTM
321 行
<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>CSS教程（七）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p><font size="3">欢迎进入第<font face="宋体">4</font>天的课程。在此之前我们主要谈了文字样式设定，现在我们探讨一下要素和图象方面的样式设置。通过学习今天的课程，我们将掌握如何给要素赋予色彩，将图象放在要素后面。如果以前你一直不认为<font
face="宋体">CSS</font>是一种很有用的东西，那么今天将是你大彻大悟的一天。
</font></p>
<font size="3">
<p>我们将学习以下<font face="宋体">CSS</font>属性：
<ul>
<li>颜色 </li>
<li>背景色 </li>
<li>背景图象 </li>
<li>重复背景 </li>
<li>固定背景 </li>
<li>背景定位 </li>
<li>背景 </li>
</ul>
</font>
<p><font size="3">首先，我们谈一下将颜色加到网页要素上。 </font></p>
<font size="3">
<p><b><tt>颜色</tt></b> </p>
<p>颜色属性并不陌生，它的用法很象<font face="宋体">HTML</font>中使用的参数值。
<ul>
<tt><p><font face="宋体">B { color: #333399 }</font></p>
</tt>
</ul>
<p>根据这项<font face="宋体">CSS</font>规则，浏览器将网页上所有的加重体字以设定的颜色显示，象<b
style="color: #333399">这几个字那样。</b></p>
<p>有<font face="宋体">3</font>种方法用于设定你所需要的颜色：
<ul>
<li><b>颜色名称</b> <p><font face="宋体">CSS</font>所用的颜色名称同我们常用的称呼方式。<font
face="宋体">16</font>种基本色为 <tt>aqua</tt>, <tt>black</tt>, <tt>blue</tt>,
<tt>fuchsia</tt>, <tt>gray</tt>, <tt>green</tt>, <tt>lime</tt>,<tt>maroon</tt>, <tt>navy</tt>,
<tt>olive</tt>, <tt>purple</tt>, <tt>red</tt>, <tt>silver</tt>, <tt>teal</tt>, <tt>white</tt>,
and <tt>yellow</tt>. </font></p>
<p>但是<font face="宋体">Netscape</font>和<font face="宋体">Microsoft</font>的浏览器还认可数百种其它色彩名称，参见
<br>
<a
href="javascript:if(confirm('../../www.users.interport.net/~giant/COLOR/1ColorSpecifier.html \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.users.interport.net/~giant/COLOR/1ColorSpecifier.html'" tppabs="http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html" target="_blank">HYPE's
Color Specifier</a>. </font></p>
</li>
<li><b><font face="宋体">16</font>进制（<font face="宋体">hex</font>）色彩控制</b>
<p>使用<font face="宋体">16</font>进制数可实现对色彩的更精确的控制，其格式为
<tt>#336699</tt></font>。<font face="宋体">16</font>进制（<font
face="宋体">hex</font>）色彩控制详见<font face="宋体"><a
href="javascript:if(confirm('../../www.webreference.com/graphics/color.html \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.webreference.com/graphics/color.html'" tppabs="http://www.webreference.com/graphics/color.html" target="_blank">Webreference.com</a></font>。
</p>
<p><font face="宋体">CSS</font>还支持某些<font face="宋体">hex</font>值的快捷计数法。比如，
<tt>#336699</tt></font>可以被称为 <tt>#369</tt></font>。浏览器会将其按照<font
face="宋体">16</font>进制格式阐释。 </p>
</li>
<li><b><font face="宋体">RGB</font>值</b> <p>对于习惯于<font face="宋体">RGB</font>计数法的用户，这里将提供一种全新的色彩设定方法。<font
face="宋体">RGB</font>法通常用于图象应用软件例如<br>
<font face="宋体">Photoshop</font>。利用<font face="宋体">RGB</font>设定色彩的方法如下：
</p>
<p> <tt>B { color: rgb(51,204,0) }</tt> <br>
<br>
RGB</font>的数值范围从<font face="宋体">0</font>到<font face="宋体">255</font>，<font
face="宋体">R</font>代表红色，<font face="宋体">G</font>代表绿色，<font
face="宋体">B</font>代表蓝色。</p>
<p><font face="宋体">IE 3</font>不支持<font face="宋体">RGB</font>格式，但是<font
face="宋体">4.0</font>版本的浏览器都支持。
<p><font size="3">在传统的网页设计中，为了在某一要素后面加上背景色，你必须先在要素周围生成表格单元，
然后在表格单元中添加颜色。 利用 <font face="宋体">CSS</font>添加背景色则相当容易。
</font></p>
<font size="3">
<p><b><tt>背景色</tt></b> </p>
<p>利用<font face="宋体">CSS</font>在网页要素后面加入固定的背景色及图象。
<ul>
<tt><p><font face="宋体">P.yellow { background-color: #FFFF66 }</font></p>
</tt>
</ul>
<p style="background-color: #FFFF66"><font face="宋体">The above rule has been applied
to this entire paragraph. You can use any of the values we talked about on the previous
page: color names, hex numbers, or RGB values.</font></p>
<p>你甚至可以将要素<span style="border-left: medium dotted">只加到某</span>一个<span
style="background-color: #FFFF66">单词</span>后面。 </p>
<p>在<font face="宋体">IE 3 </font>和 <font face="宋体">Netscape Communicator</font>中<font
face="宋体">, </font>第一段文字后的背景色延伸的长度不同<font
face="宋体">.</font>在<font face="宋体">IE 4</font>中颜色会延伸更多一些，在整个段落后面形成一个较大的方块背景。</p>
<p> (</font>注意：<font face="宋体">IE 3</font>根本不支持背景色属性。但是它支持背景设置，这种快捷属性也能达到同样的效果。详见第<font
face="宋体">6</font>页。） </p>
<p>你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以透明色显。</p>
<p>背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实现！
<p>你可以很轻松地将<font face="宋体">GIF</font>或<font face="宋体">JPEG</font>图象加到一个要素后面：<font
size="3">
<ul>
<tt><p><font face="宋体">B { background-image: url(background.gif) }</font></p>
</tt>
</ul>
<p style="background-image: url(background.gif)">该规则将背景图象加到整个段落之后。你可以将<font
face="宋体">GIF</font>图象采用和背景图象通常的设置类似的方法平铺到文字后面。</p>
<p>你还可以将背景图象只添加到<b
style="background-image: url(/webmonkey/98/15/stuff3a/stripe.gif)">两个单词</b>后面。想把图象添加到整个浏览器窗口吗？那么你可以将其添加到
<tt><BODY></tt></font>标签。 </p>
<p>你可以使用<font face="宋体">URL</font>调用一幅图象，你既可以使用相对<font
face="宋体">UPL</font>，例如 <tt>images/bg.gif</tt></font>或完整的<font
face="宋体">URL,</font>例如<br>
<tt>http://www.webmonkey.com/images/bg.gif</tt>. </font></p>
<p><font face="宋体">none</font>参数值将取消对背景图象的任何设置<font
face="宋体">. </font></p>
<p>当你设定一个背景图象时，最好能指定一种背景色。这样以来<font
face="宋体">,</font>下载背景图象的同时 ,</font>固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例：
</p>
<h1 style="color: yellow; background-image: url(background.gif); background-color: red"
align="center"><font face="宋体">Only an example! CSS makes Webmonkeys gleeful.</font></h1>
<p>你可以看到背景色紫色在<font face="宋体">GIF</font>图象的透明色区也显示出来。
</p>
<p>我们最常用的浏览器中可能会出现以下各种景图象问题：
<ul>
<li>在本篇所讨论的各种背景属性中，<font face="宋体">IE 3</font>只支持快捷背景属性，详见第<font
face="宋体">6</font>页。 </li>
<li>当使用链接的样式表时，<font face="宋体">IE 3</font>根本不显示背景图象。</li>
<li>当你仅对段落的某一部分添加背景图象，<font face="宋体">Communicator (</font>在两种操作平台上<font
face="宋体">) </font>和<font face="宋体">IE 4 (Mac</font>操作平台上<font
face="宋体">) </font>有时候可能会出问题，也许它根本不显示图象，也许会在添加了背景图象的文字中加入行回车。
</li>
<li>如果你同时设定了背景图象和背景色，有时候 <font face="宋体">Communicator</font>将背景色的显示排在优先的地位。</li>
</ul>
</font>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?