颜色 - 代码天地

前景色

color属性允许你可以指定元素中文本的颜色。可以采用以下在CSS中的三种表示方式的任意一种。

RGB值:众所周知，一种颜色是由红绿蓝三原色的含量来组成的，于是我们可以从它的组成一种分别可以需要多少红色、绿色、蓝色的角度来表示颜色。

例如:黑色:rgb(0,0,0); 红色(255,0,0);

十六进制编码:这种方式是通过六位十六进制编码表示颜色的，其中的六位编码（每两位构成一个值，共三个值）分别代表一种颜色中红、黄、蓝的数量，前面加一个#号

例如:黑色（#000000）

颜色名称:顾名思义，就是用它的英文单词来表示颜色，浏览器可以识别147 种预定义的颜色。例如红色:color:red;

示例:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            h1{
                color:darkcyan;
            }
            h2{
                color:#ee3e80;
            }
            p{
                color: rgb(100,100,90);
            }
        </style>
    </head>
    <body>
        <h1>Marine Biology</h1>
        <h2>The Composition of Seawater</h2>
        <p>Almost anything can be found in seawater .This includes dissolved
            materials from Earth's crust as well as materials released from 
            organisms.The most important components of seawater that influence life
            forms are salinty ,temperature ,dissolved gases(mostly oxyen and carben dioxide),
            nutrients ,and PH.These elements vary in their composition as well as in 
            their influence on marine life.
        </p>
    </body>
</html>

背景色:在CSS中我们把每一个元素都假设它们位于一个盒子中，而background-color属性设置的正是这个盒子背景颜色。

示例:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/background-color.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <h1>Marine Biology</h1>
        <h2>The Composition of Seawater</h2>
        <p>Almost anything can be found in seawater .This includes dissolved
            materials from Earth's crust as well as materials released from 
            organisms.The most important components of seawater that influence life
            forms are salinty ,temperature ,dissolved gases(mostly oxyen and carben dioxide),
            nutrients ,and PH.These elements vary in their composition as well as in 
            their influence on marine life.
        </p>
    </body>
</html>

在颜色的基础上CSS引进几个概念

色调:色调很接近所说的颜色，但从专业的角度来说，一种颜色除了色调，还包含饱和度和亮度。

饱和度:饱和度是指颜色中灰色的含量。饱和度达到最大的时候，颜色中灰色的含量为零。饱和度最小时，颜色基本上就是灰色。

亮度:亮度是指颜色中黑色的含量。亮度达到最大时，颜色中的黑色含量为零。颜色最小时，颜色就会很暗。

透明度:

css引入了opacity属性，opacity属性允许你指定元素及子元素的透明度。该属性值是一个介于0-1之间的数字。

其中，rgba属性允许也和RGB一样指定颜色，不过它增加了一个表示透明度的值，这个值称为alpha，介于0-1之间。

示例:

 1 <html>
 2     <head>
 3         <title>TODO supply a title</title>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <style type="text/css">
 7             div {
 8                 width: 100px;
 9                 height: 100px;
10                 margin: 40px;
11                 display: inline-block;
12                 background-color: #ee3e80;}
13             p {
14                 width: 100px;
15                 height: 100px;
16                 position: relative;
17                 top: 20px;
18                 left: 20px;
19                 margin: 20px;}
20             p.one {
21                 background-color: rgb(0,0,0);
22                 opacity: 0.5;}
23             p.two {
24                 background-color: rgb(0,0,0);
25                 background-color: rgba(0,0,0,0.5);}
26             </style>
27         </head>
28         <body>
29             <div><p class="one"></p></div> 
30             <div><p class="two"></p></div>
31     </body>
32 </html>

hsl和hsla

hsl颜色属性已经作为一种新的颜色指定方式引入到CSS中，该属性的值以hsl开头，位于其后的括号内是以下几种值:

色调:通过介于0-360度之间的一个角度表示。

饱和度:通过百分数表示。

明度:通过百分数表示，0%表示黑色，50%表示标准色，100%表示白色。

hsla:表示透明度的值，介于0-1之间。

示例:

 1 body {
 2     background-color: #C8C8C8;
 3     background-color: hsl(0, 0%, 78%);
 4     color: white;
 5     padding: 20px;
 6     font-family: Arial, Verdana, sans-serif;}
 7 h1 {
 8     background-color: DarkCyan;
 9     padding: inherit;}
10 h2 {
11     background-color: #ee3e80;
12     padding: inherit;}
13 p {
14     background-color: #ffffff;
15     background-color: hsla(0,100%,100%,0.5);
16     color: #64645A;
17     padding: inherit;}

颜色

猜你喜欢