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 |
特别说明:复合选择器为所有选择器的总和