在CSS里颜色的定义有四种方法:一,用颜色的名称;二,以十六进制数;三,以RGB整数设置颜色;四,以RGB百分数设置颜色。下面分别用这四种方法定义颜色,不过要注意的是以RGB整数定义的时候整数的范围是0-255,以百分比定义的时候范围是0%-100%,如果不在这个范围内,将按最接近这个范围的值计算。
<html>
<head>
<title>颜色的定义和背景颜色的设置
</title>
<style type=text/css>
<!--
body{
margin-right:20px;
margin-left:10%;
background-color:gray;
}
p{
text-indent:40px;
}
#color1{color:rgb(56,89,200);background-color:red;}
#color2{color:rgb(80%,10%,10%); background-color:#00ff00}
#color3{color:black;background:rgb(255,255,255)}
#color4{color:#00ff00;background-color:blue}
-->
</style>
<!--
body{
margin-right:20px;
margin-left:10%;
background-color:gray;
}
p{
text-indent:40px;
}
#color1{color:rgb(56,89,200);background-color:red;}
#color2{color:rgb(80%,10%,10%); background-color:#00ff00}
#color3{color:black;background:rgb(255,255,255)}
#color4{color:#00ff00;background-color:blue}
-->
</style>
</head>
<body>
<p>在CSS里颜色的定义有四种方法:一,用颜色的名称;二,以十六进制数;三,以RGB整数设置颜色;四,以RGB百分数设置颜色。下面分别用这四种方法定义颜色,不过要注意的是以RGB整数定义的时候整数的范围是0-255,以百分比定义的时候范围是0%-100%,如果不在这个范围内,将按最接近这个范围的值计算。
<table border=1 cellspacing=0 align=center width=100%>
<tr>
<td>style</td>
<td>results</td>
</tr>
<tr>
<td>#color1{color:rgb(56,89,200);background-color:red;}</td>
<td id=color1>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color2{color:rgb(80%,10%,10%); background-color:#00ff00}</td>
<td id=color2>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color3{color:black;background:rgb(255,255,255)}</td>
<td id=color3>这是所设置的颜色的效果</td>
</tr>
<tr>
<td>#color4{color:#00ff00;background-color:blue}</td>
<td id=color4>这是所设置的颜色的效果</td>
</tr>
</table>
</body>
</html>
<body>
<p>在CSS里颜色的定义有四种方法:一,用颜色的名称;二,以十六进制数;三,以RGB整数设置颜色;四,以RGB百分数设置颜色。下面分别用这四种方法定义颜色,不过要注意的是以RGB整数定义的时候整数的范围是0-255,以百分比定义的时候范围是0%-100%,如果不在这个范围内,将按最接近这个范围的值计算。
<table border=1 cellspacing=0 align=center width=100%>
<tr>
<td>style</td>
<td>results</td>
</tr>
<tr>
<td>#color1{color:rgb(56,89,200);background-color:red;}</td>
<td id=color1>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color2{color:rgb(80%,10%,10%); background-color:#00ff00}</td>
<td id=color2>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color3{color:black;background:rgb(255,255,255)}</td>
<td id=color3>这是所设置的颜色的效果</td>
</tr>
<tr>
<td>#color4{color:#00ff00;background-color:blue}</td>
<td id=color4>这是所设置的颜色的效果</td>
</tr>
</table>
</body>
</html>
下面是上面的代码所显示的效果:
style | results |
color1{color:rgb(56,89,200);background-color:red;} | 这是所设置的颜色的效果 |
color2{color:rgb(80%,10%,10%); background-color:#00ff00} | 这是所设置的颜色的效果 |
color3{color:black;background:rgb(255,255,255)} | 这是所设置的颜色的效果 |
color4{color:#00ff00;background-color:blue} | 这是所设置的颜色的效果 |