8、CSS权威指南--第四章（p121）值和单位
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
4.1 关键字、字符串和其他文本值
样式表中的一切都是文本，但是有些类型的值表示的是字符串本省，而不是数字或颜色等。表示字符串本身的值有 URL 和让人难以置信的图像。
4.1.1 关键字
有时，声明的值用一个词表示，这叫关键字。接受关键字的属性，所取的关键字必须在那个属性允许使用的关键字范围之内。
如果两个属性使用相同的关键字，在不同的属性中相同的关键字可能具有不一样的行为。
全局关键字
CSS 定义了几个“全局”关键字，规范中的每个属性都能使用： inherit 、 initial 、unset 。
inherit 关键字：把元素某个属性的值设为与父元素同一属性的值一样。也就是说。这个关键字强制继承，几遍是在通常情况下不继承时。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div div { border: 2px solid green; border: inherit; /* border 属性通常默认是不继承的 */ width: 50px; height: 50px; } body>div { border: 2px solid red; width: 100px; height: 100px; } span {border: inherit;} </style> </head> <body> <div> <div></div> <span>我歌且谣</span> </div> </body> </html>
initial 关键字 ：把属性的值设为预定义的初始值，相当于“重设”值。
unset 关键字：unset 是 inherit 和 initial 的通用替身。对继承的属性来说， unset 的作用与 inherit 一样，对于不继承的属性来说，unset 的作用与 initial 一样。
以上三个全局关键字在所有的属性中都可以使用，有个特殊的属性只接受这几个全局关键字：all
all 表示除 direction 和 unicode-bidi 之外的所有属性。因此，如果一个元素声明 all: inherit ，意思是除 direction 和 unicode-bidi 之外的所有属性都从父元素上继承值。
4.1.2 字符串
字符串值指放在单引号或双引号内的任意字符串序列，定义可取的值时以 <string> 表示。
字符串中还可以有引号，只要不与外层的引号同样就行，此外也可以使用反斜线转义。注意，字符串界定符只能使用直引号。
如果字符串中有换行，可以转义换行符。
4.1.3 URL
绝对URL 相对URL ，略。
@important url(path...) 注意： url 和 开始括号 “（ ”之间不能由空格。
4.1.4 图像
图像值引用的是图像，句法使用 <image> 表示。 <image> 值基本上就是 <url>值。不过在更高级的用户代理中， <image> 表示下面三种值中的一个：
<url> ：指向外部资源的 URL 标识符，这里指图像的 URL 。
<image-set> ：一系列图像，根据值中的条件选择。可以用来根据不同设备的屏幕密度或者分辨率显示不同的背景图片（background-image）或者遮罩图片（mask-image）等。
参考：我们一起学习CSS image-set() « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
<gradient> ： 线性渐变或径向渐变图像，可以是耽搁的，也可以是重复的。
4.1.5 标识符
在CSS标识符命名中可以使用包含字符(a-zA-Z0-9)和ISO 10646字符字符集中的字符,也可以使用连字符(-)和下划线(_);同时,起始部分不能是数字,或两个连字符"-"或一个两个连字符"-"或一个"-"连字符后跟一个数字。
标识符也可以包含转义字符和任何ISO10646字符数字代码。
css中的特殊字符包含：!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^,`, {, |, }, ~
这些字符需要转义才能用于命名，在其前面加上反斜杠"\"转义来取消这些字符的特定含义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #\! {color: red;} .\# {color: green;} </style> </head> <body> <div> <span id="!">我歌且谣</span> <span class="#">急支糖浆，新冠咳嗽</span> </div> </body> </html>
4.2 数字和百分数
这两种值的特别之处在于，他们是很多其他类型值的基础。
4.2.1 整数
即整数，在取值句法中，整数值用 <integer> 表示 。
4.2.2 数字
即数字，数轴上的数字。在取值句法中，数字值用 <number> 表示。
4.2.3 百分数
即百分数， 句法取值用 <percentage> 表示。百分数值始终相对于另一个值，另一个值可以是任何值。
接受百分数值的属性都会定义取值范围，以及百分比相对什么计算。
4.2.4弹性值
弹性值是 <number> 后跟 fr 。因此，单位弹性值是 1fr。这个概念由栅格布局引入，用于把布局中不受限制的控件分成几部分。
4.3 距离
长度值用整数或负数后跟一个标注表示，不过有些属性只接受正数。此外，还可以使用实数，即带小数点的数字，如 10.5 ， 或 4.561 。
长度的后面是一个缩写，表示长度的单位。长度为 0 时是唯一的例外，此时无需单位。长度单位分两种，绝对长度单位和相对长度单位。
4.3.1 绝对长度单位
绝对长度单位有 7 个，如下：
英寸（in）美国尺子所用的英寸
厘米（cm）世界上其他地方使用的尺子上的厘米。1英寸=2.54厘米，1厘米=0.394英寸。
毫米（mm）1厘米=10毫米，1英寸=25.4毫米，1毫米=0.0394英寸。
四分之一毫米（q）1厘米=40个 q 单位，1毫米=4q。
点（pt）点是一个标准的印刷度量单位，在打印机和打字机上已经使用数十年，字处理程序也使用多年了。
按照惯例，1英寸有72点。因此，吧大写字母设为12点的意思是文本的高度为 1/6 英寸高。如p{font-size:18pt;} 与 p{font-size:0.25in;}等效。
派卡（pc）也是印刷术语，1派卡=12点，因此，1英寸=6派卡。
像素（px）像素是屏幕上的点，不过CSS定义的像素较为抽象。在CSS中，1像素所占的尺寸够1英寸中放下96个像素。很多用户代理忽略这个定义，而是直接使用屏幕上的像素。
缩放页面或打印时要考虑缩放，此时100px宽的元素经渲染后得到的宽度可能大于设备上的100个小点。
4.3.2 分辨率单位
随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了三个新单位。
点每英寸（dpi）在长为1英寸的范围内能显示的点数。可以指出打印机输出的点，也可以指LED屏幕等设备上的物理像素点，或者垫子墨水屏上的图像单元。
点每厘米（dpcm）与dpi类似，不过测量的范围是1厘米，而不是1英寸。
点每像素单位（dppx）CSS中每个px单位显示的点数，从CSS3起，1dppx相当于96doi，因为CSS就是按照这个换算比例定义像素单位的。不过这个比例在CSS未来版本中可能会变。
截至2017年年末，这些单位只能在媒体查询中使用。比如说，创作人员可以让一个媒体查询快中的样式只用于分辨率超过 500 dpi 的显示器：
@media （min-resolution: 500dpi） { /* 样式规则 */ }
4.3.3 相对长度单位
em 和 ex 单位 ：
按CSS的定义，1 em 等于元素的 font-size 属性值。如果元素的 font-size 为14像素，那么对那个元素来说， 1 em 等于14像素。 如果使用 em 设定字号，那么它相对父元素的字号而言。
ex 指所用字体中小写字母 x 的高度。因此，如果两个段落的字号都是 24 点，但是使用的字体不同，那么 ex 的值也不一样。这是因为不同字体中的 x 高度有所不同。
rem 单位 ：与 em 单位类似，rem 也是基于声明的字号。二者之间的区别是（很微小），em 相对当前元素的字号计算，而 rem 始终相对于根元素计算。
ch 单位：CSS3新增了一个有趣的单位： ch 。这个单位基本上可以理解为 “一个字符” 。
CSS3规范是这样定义的： 等于渲染时所用字体中 "0" （零，U+0030） 字形的进距。“进距” 其实是CSS3自造的，对应于字体排版印中的 “进宽” 。
简单来说，字形的进宽指一个字形的起点到下一个字形的起点之间的距离。一般情况下，这段距离等于字形本身的宽度加上侧边的间距。（间距可以为正也可为负）
CSS 把 ch 单位定义为所用字体中一个零的进宽。对于等宽字体来说，所有字符的宽度都是 1ch 。而非等宽字体则可能比 “0” 宽，也可能比“0”窄，因此不能认为是 1ch 宽。
视区相关的单位：CSS3 还新增了三个与视区尺寸相关的单位。
视区宽度单位（vw）这个单位是根据视区的宽度计算，然后除以100。如视区的宽度是937像素，那么1vw等于9.37px。如果视区宽度有变，vw 的值会随之改变。
视区高度单位（vh）这个单位根据视区的高度计算，然后除以100。如果视区的高度是650像素，那么1vh等于6.5px。如果视区高度有变，vh 的值随之改变。
4.4 计算值
为了方便数学计算，CSS 提供了 cale() 值。括号内可以使用简单的数学算式。允许加减乘除以及括号。
在运算时，会检查括号内的各个值的类型，确保是兼容的。检查方式如下：
+ 和 - 号两侧的值必须使用相同的单位类型。因此，5 + 2.7 是有效的，结果为7.7；而 5em + 2.7 是无效的，因为一个是长度单位，一个是纯数字。
注意：5em + 20px 是有效的，因为 em 和 px 都是长度单位。
* 计算的两个值中，必须有一个是<number> ，因此，2.5rem * 2 和2rem * 2.5 都是有效的，结果为 5rem 。但2.5rem * 2.5rem 是无效的，因为rem平方是面积，而不是长度单位了。
/ 计算两个值中右边的那个必须是 <number> 。即必须符合 N / 数字 ， N可以有单位，也可以没有。如30em / 2.75 是有效的。而30 / 2.75em 是无效的。
此外，任何情况下都不能除以零。如30px / 0 是不被允许的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* em */ .d1 {font-size: 36px;} .d1 p {font-size: 1em;} /* 此处的 em 相对于父元素 div 的font-size */ body>span {font-size: 1em;} /* 此处的 em 相对于 html 的font-size */ /* ex */ .d2 :nth-child(1) {font-family: 'Courier New'; font-size: 10ex;} .d2 :nth-child(2) {font-family: Courier; font-size: 10ex;} .d2 :nth-child(3) {font-family: monospace; font-size: 10ex;} /* rem */ .d3 p {font-size: 1.3rem;} /* ch */ .d4 {position: relative;} .d4 div { position: absolute; top: 1.1ch; width: 10ch; border-top: 3px solid red; } /* 视区相关单位 vw vh vmin vmax */ .d5 span:nth-of-type(1) {font-size: 3vw;} .d5 span:nth-of-type(2) {font-size: 3vh;} .d5 span:nth-of-type(3) {font-size: 3vmin;} .d5 span:nth-of-type(4) {font-size: 3vmax;} /* calc() */ .d6 { width: 160px; height: 160px; border: 1px solid red; margin: 0; } .d6 div { width: calc(80% - 15px); height: calc(80% - 35px); border: 1px solid red; margin: calc(15% - 10px) auto; /* 此时父元素margin为零，但依旧有效？？margin会跨级传递？？盒模型数值对不上0啊 */ } </style> </head> <body> <div class="d1"> <p> 理论上，1 em 等于所用字体中小写字母 m 的宽度 。 其实， “em"这个名称就是由此而来这是一个古老的排版术语。然而，CSS没有才用这个定义。</p> </div> <span>相对长度单位中的“相对”是指其长度是相对其他东西而言的。</span> <div class="d2"> <span>x</span> <span>x</span> <span>x</span> </div><br> <div class="d3"> <p> rem 的实际作用相当于重设字号：不管祖辈元素把字号设为多大，font-size： 1rem；都会把字号还原成根元素设定的大小。 </p> <span>1rem = 根元素的font-size的属性值。</span> </div><br> <div class="d4"> <span>0000000000</span> <!-- 10个零 --> <div></div> </div><br> <div class="d5"> <span>这里使用 vw 单位(试着改变浏览器窗口大小）</span><br> <span>这里使用 vh 单位</span><br> <span>这里使用 vmin 单位</span><br> <span>这里使用 vmax 单位</span><br> </div><br> <div class="d6"> <div>calc() 允许运算 + 、 - 、 * 、 / 。其中 + 、 - 两个符号前后必须要有空格</div> </div> </body> </html>
4.5 属性值
attr() 函数返回被选择元素的属性值。
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> div::after {content: attr(num);} </style> </head> <body> <div num="123"></div> </body> </html>
4.6 颜色
CSS中可以使用颜色名，十六进制、RGB和RGBa格式、HSL 和 HSLa
4.6.1-4.6.2
RGB句法是 rgb(color)，其中color是三个值，可以是百分数或整数。百分数的值是 0%~100% ， 整数的取值范围是 0 ~ 255 。但是，一个颜色值中不能混用整数和百分数，如 rgb(15% , 100 , 36) 是无效的。
百分数与整数之间的转换关系是，百分数乘以255即可得到百分数对应的整数。 R代表红色red，G代表绿色green，B代表黑色black。
RGBa中，a是alpha表示不透明度。取值范围是0~1，0表示完全透明，1表示完全不透明。
十六进制表示法与三个整数表示法在数值上是等效的。
4.6.3 HSL 和 HSLa 颜色
HSL是 hue（色相） ，Saturation(饱和度） 和 Lightness（明度）的简称。其中色相是角度值，取值范围是 0 - 360，饱和度是从 0（无饱和度）~100（完全饱和）的百分数，明度是从 0 （全暗）~100（全明）的百分数。
色相分布在一个色相环上，随着角度的旋转得到色谱上的不同颜色。 0度是红色，选装360度有回到红色。
4.6.4 颜色关键字
有两个特殊的关键字可以在任何允许使用颜色值的地方使用： transparent 和 currentColor 。
transparent表示完全透明的颜色，与 rgb(0,0,0) 等效。
currentColor 的意思是，获取当前元素 color 的属性值，并使用。如 div {color: red; border-color: currentColor; }
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> div { width: 100px; height: 100px; color: red; background-color: currentColor; } </style> </head> <body> <div></div> </body> </html>
4.7 角度
角度一般用 <angle> 表示。即一个 <number> 后跟下列四个单位中的一个。
deg ：度数，完整的圆周是360度。
grad ：百分度（gradian，也叫grade或gon），完整的圆周是400百分度。
rad ： 弧度，完整的圆周是 2π （近似于6.28）。
turn : 圈数，一个完整的圆的一周。这个单位在旋转动画中最有用，比如让一个元素旋转10圈就是 10turn 。
4.8 时间和频率
属性是时间时，是一个 <number> 值后跟一个 s（秒）或 ms（毫秒）。时间值常用在过渡和动画中使用，用于定义持续时间或延迟时间。1s = 1000ms 。
视听CSS中有一种值 <frequency> ，它是一个 <number> 值后跟 Hz（赫兹）或KHz（千赫兹）。这个单位的标识符不区分大小写。Hz 和 hz 是等效的。
4.9 位置
位置值用于指定图像在背景区域中的位置，使用<position> 表示。
如果只声明一个值。例如 left 或 25% ，那么第二个值将被设为 center。
如果声明两个值，而且第一个值是长度或百分数，那么前一个始终是横向值。
如果声明是四个值，必须有两个长度或百分数，而且前面都得是关键字。
三个值的处理方式跟四个值一样，不过最后一个偏移量将设为零，即不偏移。
（完全没看懂，额...）
4.10 自定义值
2017年末，CSS新增了一个特性，这个特性的术语是“自定义属性”，不过它的作用其实是在CSS中创建变量。这个名称词不达意，它并不创建特殊的CSS属性。
自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。
由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。
举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。
另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。
自定义标识符以两个连字符开头（--），调用的方法是使用 var() 值类型。被定义的标识符是区分大小写的。（CSS变量只能替换值）
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> html { --alison: #639; --david: #AEA; } h1 {color: var(--alison);} h2 {color: var(--david);} </style> </head> <body> <h1>这些自定义的标识符通常被称为“CSS变量”，这解释了为什么使用var()调用它们。</h1> <h2>不过要记住，自定义标识符没有编辑语言中的变量那样的功能全面。</h2> <p>其实，自定义标识符更像是文本编辑器中的宏，作用只是把一个值替换成另一个。</p> </body> </html>
另外，自定义属性还有个特性：拥有作用域。
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> html { --d-color: #639;/* 紫色 */ } div {--d-color: #F60;}/* 橙色 */ div span {color: var(--d-color);} p {color: var(--d-color);} </style> </head> <body> <div> <span>这里将使用橙色</span> </div> <p>这里将使用紫色</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> html { --d-color: #639;/* 紫色 */ --d-width: 1px; --w-number: 160; --d-height: 1px; --h-number: 100; } div {--d-color: #F60;}/* 橙色 */ div span {color: var(--d-color);} p {color: var(--d-color);} div { width: calc(var(--d-width)*var(--w-number)); /* var()后，不能跟单位，如： var(...)px */ height: calc(var(--d-height)*var(--h-number)); border: 1px solid red; } </style> </head> <body> <div> <span>这里将使用橙色</span> </div> <p>这里将使用紫色</p> </body> </html>
如果想试试自定义属性，又担心支持情况，可别忘了能查询特性的 @supports() ，这样遇到不支持的用户代理，使用变量的样式规则便隐藏起来：
@supports (color: var(--custom)) {
/* 使用变量的规则 */
}
@supports (--custom:value) {
/* 替代样式 */
}
（@supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断，如果支持某个属性可以写一套样式，如果不支持某个属性，可以提供另外一套样式作为替补。可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |