📄 css1_6.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<style>
BODY {margin-left: 2em}
H3 {color: #cc6600}
P.greentext {color: green}
P.greenbg {background-color: #CCEFCC}
P.sky {background-image: url(../image/cloud.jpg);}
</style>
<title>颜色与背景 </title>
</head>
<body background="../images/background.gif" bgcolor="#FFFFFF">
<!-- Spidersoft WebZIP Ad Banner Insert -->
<TABLE width=100% border="0" cellpadding="0" cellspacing="0">
<TR>
<TD>
<ILAYER id=ad1 visibility=hidden height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.spidersoft.com/ads/bwz468_60.htm" width="100%" height="60" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></IFRAME>
</NOLAYER>
</TD>
</TR>
</TABLE>
<!-- End of Spidersoft WebZIP Ad Banner Insert-->
<p align="center"><a href="../index.htm"><img src="../images/title.gif" alt="title.gif (2221 bytes)" border="0" WIDTH="380" HEIGHT="56"></a></p>
<p align="center"><font color="#FF0000">CSS入门</font></p>
<table border="0" width="100%">
<tr>
<td width="11%" align="right"><img src="../images/blue-rect.jpg" alt="blue-rect.jpg (3374 bytes)" WIDTH="20" HEIGHT="20"></td>
<td width="89%" bgcolor="#D5F8CD">颜色与背景 </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">用 CSS
你不但可以改变整个网页的背景你还可以控制其他元素的的背景，比如
P，DIV 等。这一节我们将要讨论的性质有 <ol>
<li>color: 文字的颜色 </li>
<li>background-color: 背景颜色 </li>
<li>background-image: 背景图象 </li>
<li>background-repeat: 重复背景图象 </li>
<li>background-attachment: 是否冻结背景图象 </li>
</ol>
</td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">文字的颜色</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">我们用 color 可以来决定文字，周边，以及横线的颜色 <pre>
P.greentext {color: green}</pre>
<p>有<font face="宋体">3</font>种方法用于设定你所需要的颜色： <ul>
<li><b>颜色名称</b> <p><font face="宋体">CSS</font>所用的颜色名称同我们常用的称呼方式。<font face="宋体">16</font>种基本色为<font face="宋体"><tt>aqua</tt>, <tt>black</tt>, <tt>blue</tt>,
<tt>fuchsia</tt>, <tt>gray</tt>, <tt>green</tt>, <tt>lime</tt>,<br>
<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>的浏览器还认可数百种其它色彩名称，参见<font face="宋体"><a href="http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html" tppabs="http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html">HYPE's Color
Specifier</a>. </font></p>
</li>
<li><b><font face="宋体">16</font>进制（<font face="宋体">hex</font>）色彩控制</b>
<p>使用<font face="宋体">16</font>进制数可实现对色彩的更精确的控制，其格式为
<font face="宋体"><tt>#336699</tt></font>。<font face="宋体">16</font>进制（<font face="宋体">hex</font>）色彩控制详见<a href="http://www.webreference.com/graphics/color.html" tppabs="http://www.webreference.com/graphics/color.html"><font face="宋体">Webreference.com</font></a>。
</p>
<p><font face="宋体">CSS</font>还支持某些<font face="宋体">hex</font>值的快捷计数法。比如，
<font face="宋体"><tt>#336699</tt></font>可以被称为 <font face="宋体"><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><font face="宋体"><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>
</li>
</ul>
<p>请看下面的例子 </p>
<table width="400">
<tr>
<td bgcolor="#FFFFCC"><p class="greentext">这一行文字的颜色是绿色的</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">背景的颜色</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">背景的颜色可以由 background-color 来控制， 比如我们想叫
一些文字段落的背景颜色为浅绿色的， <pre>
P.greenbg {background-color: #CCEFCC}
</pre>
<p>请看下面的例子 </p>
<p class="greenbg">这一行的背景颜色是浅绿色的</td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">背景的图像</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">你可以很轻松地将<font face="宋体">GIF</font>或<font face="宋体">JPEG</font>图象加到一个要素后面： <ul>
<tt><p><font face="宋体">B { background-image: url(background.gif) }</tt> </font></p>
</ul>
<p>该规则将背景图象加到整个段落之后。你可以将<font face="宋体">GIF</font>图象采用和背景图象通常的设置类似的方法平铺到文字后面。</p>
<p>我们不但可以决定是否给背景加图象，
还可以确定是否让这个图象重复以及在哪个方向重复。比如我们只让图象在整个网页的竖直方向重复我们就可以去掉左边有个图象条的效果。
</p>
<pre>
body {background-image: url(../image/home.gif);background-repeat: repeat-y}
</pre>
<p>background-repeat 可以有这些可能值：no-repeat, repeat-x, repeat-y </p>
<p>我们还可以用 background-attachment
来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们如果不让背景图象动，
</p>
<pre>
body {background-image: url(../image/home.gif);background-attachment: fixed}
</pre>
<p>这个性质挺有意思的。 如果你的背景图象是你自己网页的logo，
你想让它固定在中间不动， 用这个性质可以达到这个效果</td>
</tr>
</table>
<hr>
<p align="right"><a href="css1_5.htm"><img src="../images/back-button-off.gif" alt="上一页--列表方式控制" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_7.htm"><img src="../images/forward-button-off.gif" alt="下一页--空格与边框" border="0" WIDTH="31" HEIGHT="31"></a></p>
<p align="center"><a href="index.htm">返回CSS教程目录</a></p>
<p align="center"><a href="../index.htm"><img src="../images/home.gif" alt="home.gif (267 bytes)" border="0" WIDTH="32" HEIGHT="32"><br>
返回主页</a></p>
<layer src="http://www.spidersoft.com/ads/bwz468_60.htm" visibility=hidden id=a1 width=600 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip.height=60;visibility='show';"></layer>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -