Css中color属性的几种表达方法
我们大家在制作网站、编写css代码的时候,总会时不时的用到color属性。作为网页制作过程中最常用到的属性之一 ,大家知道color有几种表达方法吗?今天我就带大家一起来看一下。
第一种方法:直接用颜色名称来指定颜色
这种方法是最常用到的方法之一,比如用color:red;来指定当前属性的颜色为红色;用color:yellow;来指定当前当前属性的颜色为黄色等等。这种方法的特点是用起来比较简单,直接写颜色名称即可。但缺点同样明显,一是颜色名称繁多,想要写颜色值,需要熟练记忆众多颜色的英文名称,对于英语比较差的人来说,可能是一种糟糕的体验。二是颜色值表示不精确。比如颜色代码color:forestgreen;指定当前属性颜色为森林绿。 在不同的浏览器中,这个颜色的显示可能会有所不同,
第二种方法:用十六进制代码来指定颜色
这种方法也是最常用的方法之一。用这种方法填写的color属性值,不仅十分精确,而且颜色的种类也比用颜色名称所代表的颜色种类多的多。比如如果想将颜色设为纯蓝色,可以写成color: #0000ff;但是,请一定要记住,在具体的颜色代码前有一个#号,这个符号一定不要忘写了。
第三种方法:rgb:rgb(red,green,blue)
这种方法相对于以上两种方法没有那么常见,但是也经常用到。这个属性用三种颜色属性分别代表三个通道。第一个通道为红色,第二个通道为绿色,第三个通道为蓝色。我们都知道,红绿蓝三种颜色被合称称为三原色,这三种颜色相互交织就可以形成其他各种各样的颜色。所以,只要在css中设置好这三种颜色,就可以形成各种各样的颜色。比如,我要设置纯蓝这种颜色,那么我就可以写成color:rgb(0,0,255);
第四种方法:rgba:rgba(red,green,blue,alpha)
这种方法其实相当于是第三种方法的拓展,只不过是在第三种方法后边增加了一个alpha属性而已。我们都知道,在网页设计模块中,有的时候,需要用到具有一定透明度的颜色。这个时候我们就需要用到alpha属性了。这个属性控制颜色的透明度,它的值是(0,1),也就是说0到1之间,值越小,不透明度也就越小。比如,我要将纯蓝颜色的透明度调低,那么我可以写成rgb(0,0,255,0.5);这句代码的意思就是纯蓝颜色,0.5的不透明度。
熟练掌握以上几种方法,就足以应付网站设计过程中关于颜色的设置,希望能够帮到大家。