Home > Web Front-end > HTML Tutorial > 3.css中的颜色_html/css_WEB-ITnose

3.css中的颜色_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:17:23
Original
1161 people have browsed it

  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;}
Copy after login

2.十六进制形式

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

补充:十六进制可以使用简写形式,其要求是从头开始,字符两两一组,且组内字符相同,如上所示。(像#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);}
Copy after login

 

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

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template