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属性分类
- 下一篇： CSS属性之字体(Font)