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. SparkSQL External Datasource简易使用之AVRO

    下载源码&编译: git clone https://github.com/databricks/spark-avro.git sbt/sbt package Maven GAV: group ...

  2. C和C++头文件的不同

    #include <IOSTREAM.h>void main(){    std::cout<<"Hello,World!"<<std::end ...

  3. 模糊查询(LIKE)and (PATINDEX() . CHARINDEX())

    SQL中的模糊查询一般来说使用模糊查询,大家都会想到LIKE  select * from table where a like '%字符%' 如果一个SQL语句中用多个 like模糊查询,并且记录条 ...

  4. memcached学习(3)memcached的删除机制和发展方向

    memcached是缓存,所以数据不会永久保存在服务器上,这是向系统中引入memcached的前提. 本次介绍memcached的数据删除机制,以及memcached的最新发展方向--二进制协议(Bi ...

  5. C# 枚举显示中文

    转自:http://www.cnblogs.com/yank/archive/2011/09/08/EnumDisplayInChinese.html   using System; using Sy ...

  6. 使用throws抛出异常

    声明抛出异常实在一个方法声明的throws子句中指明的.throws子句方法的基本形式如下.方法 throws 异常列表{ }throws子句中可以指明多个异常,说明该方法不对这些异常进行处理,而是抛 ...

  7. VC++2010下编译STLport,Boost

    VC++2010下编译STLport,Boost 最近在想向Boost转移,努力掌握Boost代码的过程中, STLport版本:5.2.1 Boost版本:1.4.6.1 (1.4.7.0也OK) ...

  8. C# winform编程中多线程操作控件方法

    private void Form1_Load(object sender, EventArgs e) { Thread newthread = new Thread(new ThreadStart( ...

  9. Windows server 2008R2部署服务批量安装Windows7教程

    利用Windows server 2008 R2下的Windows部署服务可以批量安装Windows 7,以下简称WDS. WDS需要用到域和dhcp.DNS服务,所以,基础环境必须要有域控制器,dh ...

  10. 学习使用LaTex排版文字输出为pdf(1)

    学习用latex写我的简历. 我在ubuntu环境下,先下载所需软件,命令百度就可以. 先创建一个a.tex,写上 \documentclass{article} \usepackage{CJK} \ ...