在CSS中，有几种设置颜色的体例和用法，可以或许用分歧的体例给HTML设置不异的布景，具体的实例经由过程如下步调来实现。
工具/原料
- CSS相关常识
- UE编纂器，HTML根本常识
方式/步骤
- 1
利用#f00来设置颜色值，这个就是rgb16进制来暗示颜色，具体实现的代码如下所示:
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:#f00;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下图，可以看到即使利用#F00也使得显示的布景颜色为红色。
- 2
利用#FF0000来设置颜色，，第一个字节红色，第二个本身绿色，第三个字节蓝色，具体实现的代码如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
可以发现利用FF0000也设置当作布景颜色为红色了，其实F00是ff0000的缩写，这两种写法在法式设计中都可以利用。
- 3
利用英文来设置布景的颜色，这里可以利用英文来设置布景颜色，具体实现的代码如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下图，可以看到具体的执行结果了。
- 4
利用rgb来设置颜色的值，具体实现的代码如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:rgb(255,0,0);
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下图，可以看到利用rgb(255,0,0)设置的颜色也是红色的。
- 5
还可以利用RGB百分比来设置布景颜色，具体的代码如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:rgb(100%,0,0);
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下图可以看到具体的执行结果，这个有的浏览器不撑持。
注重事项
- 颜色设置体例比力多，比力简单
