css中颜色的设置形式主要有三种方式:颜色名称、十六进制代码和十进制代码。

  在古老的 HTML4 时,颜色名称只有 16 种。

颜色名称 十六进制代码 十进制代码 含义
 black  #000000  0,0,0  黑色 
 silver  #c0c0c0  192,192,192  银色 
 gray  #808080  128,128,128  灰色
 white  #ffffff  255,255,255  白色
 maroon  #800000  128,0,0  栗色
 red   #ff0000  255,0,0  红色
 purple  #800080  128,0,128  紫色
 fuchsia  #ff00ff  255,0,255  紫红
 green  #008000  0,128,0  绿色
 lime  #00ff00  0,255,0  闪光绿
 olive  #808000  128,128,0  橄榄色
 yellow  #ffff00  255,255,0  黄色
 navy  #000080  0,0,128  海军蓝
 blue  #0000ff   0,0,255  蓝色
 teal  #008080  0,128,128  水鸭色
 aqua  #00ffff  0,255,255  浅绿色

  当然,目前颜色名称远远不止这些,可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。 这里提供一些页面如下:

  http://xh.5156edu.com/page/z1015m9220j18754.html

  http://finle.me/colors.html

  http://www.w3school.com.cn/tags/html_ref_colornames.asp


1.颜色名称形式

p {
color: red;
}

2.十六进制形式

p {
color: #ff0000;  /*可简写成:f00*/
}

补充:十六进制可以使用简写形式,其要求是从头开始,字符两两一组,且组内字符相同,如上所示。(像#8000080就不可以)


3.十进制形式

  十进制表示方法就比较多样化,有四种方案:

函数 说明 实例
rgb(r,g,b) 用 RGB 模型表示颜色 rgb(0,128,128)
rgba(r,g,b,a) 同上,a 表示透明度 0~1 之间 rgba(0,128,128,0.5)
hsl(h,s,l) 用 HSL 模型(色相、饱和度 和透明度)来表示颜色 hsl(120,100%,30%)
hsla(h,s,l,a) 同上, a 表示透明度 0~1 之间 hsla(120,100%,30%,0.5)
p {
color: rgb(112, 128, 114);
color: rgba(0, 128, 128, 0.5);
color: hsl(120, 100%, 30%);
color: hsla(120, 100%, 30%, 0.5);
}

  目前又有一个疑问,这些值从哪里获取。除了颜色表之外,想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。

3.css中的颜色的更多相关文章

  1. CSS中的颜色问题

    css颜色: CSS 颜色 颜色是通过对红.绿和蓝光的组合来显示的 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十 ...

  2. 在 CSS 中表示颜色的hex code方法和rgb方法

    hexadecimal code(十六进制编码),简写为 hex code. 我们通常使用 decimals,也就是十进制数字,它对每一位数字使用符号0到9来表示.Hexadecimals (或 he ...

  3. css中的单位和css中的颜色表示方法

    css中颜色的表示方式: 图片来源http://www.w3school.com.cn

  4. CSS中的颜色、长度、角度、时间

    一.颜色的表示方法 颜色是通过对红.绿和蓝光的组合来显示的. 1.颜色名 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l ...

  5. css中的颜色

    我常用的是win10里面的自带的3D画图工具里面的颜色表 CSS 设置颜色的几种方式: 1.颜色名 2.rgb值 3十六进制表示 4. HSL color values CSS3 adds numer ...

  6. HTML与CSS中的颜色与单位个人分享

    颜色与单位 Web安全色有216中其中色彩有210中,非色彩6中 前景色与背景色 前景色就是设置字体的颜色 背景色就是为指定元素设置背景色 - 浏览器默认背景色的颜色为透明色 颜色的命名 1.使用单词 ...

  7. CSS中表示颜色的4种方法

    #1:直接用颜色名称 #2:十六进制数 #3:RGB整数设置颜色 0-255 #4:RGB百分数设置颜色0%-100%

  8. js函数实现转换css中常用的颜色编码

    //转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...

  9. CSS中的HSLA颜色

    CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述.其中我们常用的是RGB色彩空间,RGB色彩空间的颜色表示方式有:十六进制颜色(如红色:#FF0000).RGB颜色(如红色:rgb( ...

随机推荐

  1. Oracle数据库(2)

    ; select ename,empno,deptno from emp where job='CLERK'; select * from emp where comm>sal; select ...

  2. phonegap/cordova 升级版本

    调用语句 : windows用户 npm update -g cordova 如果是 mac系统的用户  使用: 查看cordova信息 npm info cordova 查看cordova 版本 查 ...

  3. PNG图片数据解析

    PNG是一种非常流行的图片格式,它不仅支持透明效果,而且图片数据经过了压缩处理,所以广泛用于web等应用. PNG的文件格式: PNG文件中的数据,总是以一个固定的8个字节开头: (图片来自http: ...

  4. aspxgridView,Repeater增加自动序号列

    第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. <asp:TemplateField HeaderText="序号" Ins ...

  5. telnet localhost 8089 ==》》命令使用

    GET /ccc/abc.html HTTP/1.1 host:localhost     客户端连上web服务器后,若想获得web服务器中的某个web资源,需遵守一定的通讯格式, HTTP协议用于定 ...

  6. 智能指针(三):unique_ptr使用简介

    我们知道auto_ptr通过复制构造或者通过=赋值后,原来的auto_ptr对象就报废了.所有权转移到新的对象中去了.而通过shared_ptr可以让多个智能指针对象同时拥有某一块内存的访问权.但假如 ...

  7. jquery 设置元素内容html(),text(),val()

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【MVC】ASP.NET MVC 请求生命周期

    当一个asp.net mvc应用程序提出请求,为了响应请求,包含一些请求执行流程步骤! 在asp.net mvc应用程序Http request和Http response 过程中,主要包含8个步骤: ...

  9. spring+hibernate--直接修改数据库,再通过hibernate查询数据不变

    这个问题已经很多天了,一直没有时间解决,不过还好是自己的项目,没什么影响. 刚好今天没事,想好好解决一下这个问题. hibernate主要配置如下: <property name="h ...

  10. (笔记)angular material 选项卡用法