摘要：规则由选择器和声明两部分组成，本文将要说的是第二部分声明。数字值数字值后面都有一个单位，例如英寸或点。绝对值绝对值描述的是一个真实的长度比如，英寸，而相对值则是相对于其他基准的描述比如是某某的两倍长。
CSS 规则由 选择器 和 声明 两部分组成，本文将要说的是第二部分：声明。
一个声明包含两部分：属性 和 值。
属性 指出要影响元素的哪个方面（颜色、高度，等等），而 值 表示属性设定为什么（绿色、15px，等等）。
CSS属性值主要分以下三类：
文本值
数字值
颜色值
1.文本值文本值也叫关键字。所有 CSS 属性都有文本值。
例如，border-style 属性有 solid、dashed 以及 insert 值。
2.数字值数字值后面都有一个单位，例如英寸或点。在声明 font-size:12px 中， 12是数字值，而 px 是单位（像素）。如果数字值为 0，那么就不用带单位了。
数字值用于描述元素的各种长度（在 CSS 里，“长度”的含义比较广，还包括高度、宽度、粗细，等等）。数字值主要分两类：绝对值和相对值。
2.1 绝对值绝对值描述的是一个 真实的长度（比如， 6 英寸），而相对值则是 相对于其他基准的描述 （比如“是某某的两倍长”）。
2.2 相对值em 表示一种字体中字母 M 的宽度，因此它的具体大小取决于你使用的字体。
ex 表示给定字体中字母 x 的高度（小写字母 x 代表一种字体的字母中间部分的高度，不包括字母上、下突出的部分——如 d 和 p 上下都出头儿）。
百分比非常适合设定被包含元素的宽度，此时的百分比就是相对于宽度而言的。把 HTML 结构元素的宽度设定为 body 宽度的百分比，就是 流式 设计的关键所在。这种布局设计可以随着用户调整浏览器窗口大小而成比例地伸缩。
3.颜色值颜色值可以用几种不同的格式来写，包括 RGB（ Red, Green, Blue，红绿蓝）、
HSL（ Hue, Saturation, Luminance，色相，饱和度，亮度）和 十六进制值（例如 color:#336699）
W3C 定义了 16 个颜色关键字：
aqua（浅绿色）、 black（黑色）、 blue（蓝色）、 fuchsia（紫红色）、 gray（灰色）、 green（绿色）、 lime（黄绿色）、 maroon（褐红色）、 navy（深蓝色）、 olive（茶青色 ）、 purple（紫色）、 red（红色）、 silver（银色）、 teal（青色）、white（白色）和 yellow（黄色）。
3.2 十六进制颜色提示：一般来说，颜色关键字最常用于指定白色和黑色。
格式：#rrggbb
示例：#ff8800
说明：
这个6位数的前两位定义 红色（red），中间两位定义 绿色（green），后两位定义 蓝色（blue）。
十六进制以16为基数，使用数字 0-9 和字母 a-f，共16个值。其中，a-f 代表10到15。由于每种颜色用两位十六进制值表示，因此该颜色就有 256（ 16× 16）种可能的值，结果就是 16777216（256× 256× 256）种组合，也就是可以表示那么多种颜色。
范围是16进制的 00-ff，00 表示没有颜色，ff 表示颜色最强。所以 #000000 表示黑色，#ffffff 表示白色，同样 #ff0000 表示纯红色，#00ff00 表示纯绿色，#0000ff 表示纯蓝色。
如果三对值中的每一对是两个相同的数字，也可以使用简写形式：#rgb
示例：#ff3322 = #f32（深红色）、#ffffff = #fff（白色）
3.3 RGB颜色值提示：在设定阴影的时候，简写方式可以省不少劲儿。
格式：rgb(r, g, b)
示例：rgb(0, 255, 0)
说明：
每种颜色都可以用一个 0 到 255（包含）之间的值指定。
与十六进制 RGB 值一样，只不过使用的是 十进制 的数值。因为每种颜色都有256 种可能，所以它能表示的颜色数量与十六进制格式的一样。
3.4 RGB百分比值格式：rgb(r%, g%, b%)
说明：可以接受的值是 0%到 100%。虽然以这种方法只能表示区区 一百万（ 100 × 100 ×100）种颜色，但对我们绝大数人来说，也已经足够了。
格式：HSL (色相, 饱和度%, 亮度%)
说明：
HSL 比我们见过的各种 RGB 方式更直观，因为使用它更容易写出和看懂颜色。
HSL 颜色中的第一个值表示色相，也就是一个实际的颜色，比如红色和绿色。所有
颜色围绕色相环（也叫 色轮）一周，而 色相值以圆周上的度数表示。
彩虹七色在色轮中大致的色相值：
红：0
橙：35
黄：60
绿：125
蓝：230
靛：280
紫：305
饱和度 设定有多少颜色，灰色的饱和度低，而强烈的色彩饱和度高。亮度 设定颜色的明暗， 0%就是黑色， 100%就是白色。
如果把上面七彩虹的色相值都记住，或者就放在手边，那么你会发现想写出什么颜色都不在话下。 RGB 和十六进制颜色值，都要求你事先在大脑里先混合颜色，而 HSL则只有一个表示颜色的值。把饱和度和亮度都设定为 50%，就可以轻松调制出你想要的任何颜色来。
3.6 Alpha通道RGB 和 HSL 都支持 Alpha 通道，用于设置颜色的不透明度。相应的格式分别叫 RGBA 和 HSLA。其中，两种格式中的 A（ alpha）值可以是 1（完全不透明）也可以是 0（完全透明），或者介于 1 和 0 之间的小数值。
参考资料
CSS设计指南
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110962.html
摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。 上一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...
摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。 为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
阅读 2457·2021-11-25 09:43
阅读 420·2021-11-12 10:36
阅读 4173·2021-11-08 13:18
阅读 2026·2021-09-06 15:00
阅读 2861·2019-08-30 15:56
阅读 797·2019-08-30 13:57
阅读 1890·2019-08-30 13:48
阅读 1296·2019-08-30 11:13
