css中颜色的表示方法
生活随笔
收集整理的这篇文章主要介绍了
css中颜色的表示方法
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
在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> </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>
下面是上面的代码所显示的效果：
| 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} | 这是所设置的颜色的效果 |
总结
以上是生活随笔为你收集整理的css中颜色的表示方法的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： CSS属性分类
- 下一篇： Div span 标签详解