在制作页面的时候我们经常需要设置字体颜色或者背景颜色，丰富多彩的颜色能够让页面呈现更好的效果，在网站中用到颜色的地方也很多，文字颜色，背景颜色，边框颜色等都需要用到。
在css中表示颜色的方法主要有以下几种。
1. 关键字颜色
属性值是颜色的名称。
例如：
div{
color:red
}
2. 十六进制
十六进制表示颜色的原理是利用光的三原色：红色，绿色，蓝色。利用这三种颜色就能组合出很多颜色，比如红色光和绿色光就可以组合成黄色，三种颜色的光可以组成白色，没有光的时候就是黑色。
下图为光色三原色：
请点击输入图片描述
十六进制颜色是由#加六位的十六进制表示的，范围是00到ff，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
例如：
#ff0000表示红色，这个色值包含最大数量的红色，但是没有绿色和蓝色，所以是红色。
#00ff00表示绿色，这个色值包含最大数量的绿色，但是没有红色和蓝色，所以是绿色。
#0000ff表示蓝色，这个色值包含最大数量的蓝色，但是没有红色和蓝色，所以是蓝色。
#000000表示黑色，这个色值没有颜色，表示没有光，所以是黑色。
#ffffff表示白色，这个色值包含最大数量的红色绿色和蓝色，组合到一起是白色。
十六进制的00到ff，是十进制的0到255，因此每种颜色都有256种取值，能够组合出来的颜色就是：256*256*256=16777216，这么多种色值足够可以让我们的页面变的丰富多彩。
这里的三原色为什么是红色、绿色、蓝色，而和我们学美术的时候的红色、黄色、蓝色不一样呢?因为学美术的时候用的是颜料的三原色，颜料的三原色利用的是光的反射原理。
3. RGB
RGB表示颜色的方式原理和十六进制是一样的，是利用光的三原色：红色，绿色，蓝色。
R表示red，红色。
G表示green，绿色。
B表示blue，蓝色。
取值从0到255，也可以是百分数。
rgb(red, green, blue)
例如：
rgb(255,0,0)或者rgb(100%,0,0)表示红色，
rgb(0,255,0)或者rgb(0,100%,0)表示绿色，
rgb(0,0,255)或者rgb(0,0,100%)表示蓝色，
rgb(0,0,0)或者rgb(0,,0,0)表示黑色，
rgb(255,255,255)或者rgb(100%100%,100%)表示白色，
4. HSL
HSL表示颜色的方法是通过色相，饱和度和亮度表示的。其中H是Hue色相，S是Saturation饱和度，L是Lightness亮度。
下图为HSL颜色模式：
请点击输入图片描述
H：色相。就是颜色名称。取值为是0到360。
S：饱和度。是色彩的纯度，取值是0%到100%。
L：亮度。取值为是0%到100%。
hsl(hue, saturation, lightness)
例如：
div{
width: 100px
height: 100px
background: hsl(100, 80%, 50%)
}
5. RGBA
RGBA颜色表示形式只是比RGB多了一个A。A表示Alpha透明度。取值是0到1.
rgba(red, green, blue, alpha)
例如：
div{
width: 100px
height: 100px
background: rgba(255, 0, 0, 0.5)
}
效果图：
6. HSLA
HSLA颜色表示形式只是比HSL多了一个A。A表示Alpha透明度。取值是0到1.
hsla(hue, saturation, lightness, alpha)
例如：
div{
width: 100px
height: 100px
background:hsla(100, 80%, 50%,0.8)
}
RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。扩展资料：
原理
RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。
红、绿、蓝三盏灯的叠加情况，中心三色最亮的叠加区为白色，加法混合的特点：越叠加越明亮。
红、绿、蓝三个颜色通道每种色各分为256阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。
一、Css书写顺序：
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css语法：
命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px。
Css常用的一些命名：
可参考：CSS 常用命名 - 彼岸时光 - 博客园。
三、Css的引入：
Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
四、Css的命名规范(BEM,OOCSS)：
什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下：
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
优点：
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点：
这样类名过于长，且复杂。
什么是OOCSS（面向对象CSS）：
OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。
OOCSS的优点：
减少CSS代码。
具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
语义标记，有助于SEO。
更好的页面优化，更快的加载时间（因为有很多组件重用）。
可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
能轻松构造新的页面布局，或制作新的页面风格。
OOCSS的缺点：
OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
欢迎到优就业来了解
