【前端从0开始】CSS——CSS说明工具

1、CSS长度单位

• 相对长度单位：
  px 像素（Pixel）
  % 百分比
  em : Element meter 根据文档字体计算尺寸
  rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
  ex : 文档字符“x”的高度
  ch : 文档数字“0”的的宽度
  vh : View height 可视范围高度
  vw : View width 可视范围宽度
• 绝对长度单位：
  in英寸（Inch）
  pt 点（Point）
  cm 厘米（Centimeter）
  mm 毫米（Millimeter）
  换算比例：1in = 2.54cm = 25.4 mm = 72pt
• calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度
  calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
  需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  任何长度值都可以使用calc()函数进行计算；
  calc()函数支持 “+”, “-“, “*”, “/” 运算；
  calc()函数使用标准的数学运算优先级规则；
  calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
  calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

2、颜色

CSS颜⾊取值⽅式：

• ⼗六进制⾊
• RGB 颜⾊
• RGBA 颜⾊
  预定义/跨浏览器颜⾊名

2.1 十六进制色

⽬前所有浏览器都⽀持⼗六进制颜⾊
⼗六进制颜⾊是这样规定的：#RRGGBB，其中的 RR（红⾊）、GG（绿⾊）、BB（蓝⾊）⼗六进制整数规定了颜⾊的成分。所有值必须介于 0 与 FF 之间
⼗六进制颜⾊计数： 0 1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 组合⽽成

p {
    color: #f00;
}

div {
    color: #ff6700
}

2.2 RGB颜⾊

所有浏览器都⽀持RGB颜⾊ RGB 颜⾊值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue)定义颜⾊的强度，可以是介于 0 与 255 之间的整数，或者是百分⽐值（从 0% 到 100%）

p {
    color: rgb(255, 0, 0)
}

2.3 RGBA颜⾊

RGBA 颜⾊值得到以下浏览器的⽀持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了不透明度。
RGBA 颜⾊值是这样规定的：rgba(red, green, blue, alpha)。
alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p {
    color: rgba(255, 0, 0, 0.5)
}

2.4 预定义/跨浏览器颜⾊名

所有浏览器都⽀持颜⾊名 HTML 和 CSS 颜⾊规范中定义了 147 中颜⾊名（17 种标准颜⾊加 130 种其他颜⾊）。
17 种标准⾊是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

p {
    color: red;
}

3、选择器权重等级划分

类型	权重
!important	color:green !important;
内联样式	如: style=" "，权值为1000
ID选择器	如：#name，权值为0100
class类选择器，伪类和属性选择器	如.name，权值为0010
标签选择器和伪元素选择器	如div p，权值为0001
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、继承	如*，权值为0000

特别说明：复合选择器为所有选择器的总和