CSS颜色的定义和几种用法详解 _CSS相关常识

在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)设置的颜色也是红色的。