《CSS设计指南》笔记—浅谈颜色值

颜色值

指定颜色值可以有几种方式。这些方式可以在同一个样式表中混合使用。

  1.颜色名(如red)

设定颜色属性时可以直接使用颜色名,或者用官方术语就是颜色关键字。

   W3C定义了16个颜色关键字:aqua(浅绿色)、black(黑色)、blue(蓝色)、fuchsia(紫红色)、gray(灰色)、green(绿色)、lime(黄绿色)、maroon(褐红色)、navy(深蓝色)、olive(茶青色 )、purple(紫色)、red(红色)、silver(银色)、teal(青色)、white(白色)和yellow(黄色)。

  要了解这些颜色名及其对应的RGB颜色值,请参考:http://www.w3.org/TR/css3-color/#html4。大多数现代浏览器支持更多种颜色名(即140 X11颜色名),但如果真要使用颜色名,最好只使用前面那16种。一般来说,颜色关键字最常用于指定白色和黑色。对于其他颜色真的很较真儿的场合,还得使用以下几种格式的颜色值。

  2.十六进制颜色(#RRGGBB或#RGB)

  十六进制颜色的值的格式如下:#rrggbb e.g. 橙色是:#ff8800  //这个6位数的前两位定义红色,中间两位定义绿色,后两位定义蓝色。

计算机使用二进制计数,而不是我们常用的十进制,因此才有了十六进制(16是2的4次幂)。十六进制以16为基数,使用数字0-9和字母a-f,共16个值。其中,a-f代表10到

15。由于每种颜色用两位十六进制值表示,因此该颜色就有256(16×16)种可能的值,结果就是16 777 216(256×256×256)种组合,也就是可以表示那么多种颜色。

纯红色是#ff0000,纯绿色是#00ff00,而纯蓝色是#0000ff。 如果三对值中的每一对是两个相同的数字,也可以使用简写形式:#rgb 比如,#000是纯黑,#444是75%灰色,#888是50%灰色,#bbb是25%灰色,而#fff则是纯白色。

  3. RGB颜色值(R, G , B)

每种颜色都可以用一个0到255(包含)之间的值指定。格式如下:rgb(r, g, b)

比如,rgb(0,255,0)表示纯绿色。与十六进制RGB值一样,只不过使用的是十进制的数值。因为每种颜色都有256种可能,所以它能表示的颜色数量与十六进制格式的一样。

  4. RGB百分比值(R%, G%, B%)

这是用百分比来表示每种颜色值的一种方法,格式如下:r%, g%, b%

可以接受的值是0%到100%。虽然以这种方法只能表示区区一百万(100×100×100)种颜色,但对我们绝大数人来说,也已经足够了。同样,使用百分比表示的颜色值,比使用十六进制更容易猜到你想要的颜色。举个例子,100%, 0%, 0%是纯红色,0%, 100%, 0%是纯绿色,而46%, 76%, 80%接近前面用十六进制值作例子分析的深蓝绿色。

  5. HSL (色相,饱和度%,亮度%) HSL格式如下:HSL(0,0%,0%)   // Hue、Saturability、Lightness

HSL比我们见过的各种RGB方式更直观,因为使用它更容易写出和看懂颜色。HSL颜色中的第一个值表示色相,也就是一个实际的颜色,比如红色和绿色。所有颜色围绕色相环(也叫色轮)一周,而色相值以圆周上的度数表示。

红色是0或360,青色是与之相对的180。以下是彩虹七色在色轮中大致的色相值。

  • 红:0
  • 橙:35
  • 黄:60
  • 绿:125
  • 蓝:230
  • 靛:280
  • 紫:305

至于饱和度和亮度,相对就容易理解多了。饱和度设定有多少颜色,灰色的饱和度低,而强烈的色彩饱和度高。亮度设定颜色的明暗,0%就是黑色,100%就是白色,

而中间的值是实际能看到的色相。RGB和十六进制颜色值,都要求你事先在大脑里先混合颜色,而HSL则只有一个表示颜色的值。从把饱和度和亮度都设定为50%,就可以轻松调制出你

想要的任何颜色来。

  6. Alpha通道

RGB和HSL都支持Alpha通道,用于设置颜色的不透明度(换句话说,就是能够透过多少背景)。相应的格式分别叫RGBA和HSLA。其中,两种格式中的A(alpha)值可以是1(完全不透明)也可以是0(完全透明),或者介于1和0之间的小数值。

本文节选自《CSSS设计指南》第三版 第二章; 有删改

支持正版 http://www.ituring.com.cn/book/1111

时间: 2024-12-26 19:14:30

《CSS设计指南》笔记—浅谈颜色值的相关文章

CSS设计指南笔记

1.border中,solid为实线,dashed为虚线 2.clear为清楚浮动 3.position有四种值: static.正常文档流 relative.相对上下左右的位置 absolute.绝对定位,针对body或父级元素定位 fix:固定定位,不随滚动条滚动 4.display:是否显示,不显示的时候不占据空间 visibility:是否可见,不可见的时候占据空间 5.background-repeat:背景图片是否重复 repeat.默认 repeat-x repeat-y no r

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

《css设计指南》 读书笔记 一

<css设计指南>这本书是一个大神同学介绍给我的,据说覆盖了几乎所有前端面试的有关css的知识点,所以赶紧买来看看.( ps:这本书貌似绝版了,可以上淘宝买复印本,也可直接看电子书. ) 闭合标签,自闭合标签. html5中,将忽略所有自闭合标签最后的 / .可是建议在最后仍然加上  空格加/ 以规范格式. 所有img标签都需要加上alt属性. ps:视障用户使用的屏幕阅读器会读出图片的alt属性. 行内.块级标签.  块级: h1~h6, p, ol/ul, li, blockquote .

《CSS设计指南》笔记--HTML标记与文档结构

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! HTML标记与文档结构 1.1 HTML标记基础 1.1.1 文本用闭合标签 ??闭合标签的基本格式如下: <标签名>文本内容<标签名/> <标签名 属性_1="属性值" 属性_2="属

CSS设计指南之理解盒子模型

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可

CSS设计指南之浮动与清除

原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效果.然而,这个属性也成为了创建多栏布局最简单的方式. 1.文本绕排图片 在浮动一张图片或其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素的内边界.后面的段落不再认为浮动元素在文档流中位于它的前面了,因为它会占据父元素左上角的位置.不过,它

css 权威指南笔记

部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支持 包括ie7 特定属性选择器: css 权威指南笔记

css设计指南第3版 读书笔记

html标记内容,css显示内容. html标记由一系列标签组成,包括闭合标签和自闭合标签,属性给标签提供了额外信息.标签可以嵌套. 标签分为块级别和行内级别,块级标签占一行(扩展到与父元素同宽),行内标签则相反,只有在空间不足才会折到下一行. html实体表示键盘上没有印刷的字符,它以&开始,;结束. dom层次可以使用父标签(直接祖先),子标签(直接后代),同胞标签,后代.祖先标签来表示. html标签都有一组样式,通过css来设定.css选择符和要应用的样式构成了一条css规则. css行

CSS 设计指南(第3版) 初读笔记

第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了解哪个HTML元素,第一个要问的问题都应该是:它是块元素,还是行内元素? Firefox Web Developer组件