最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

热资讯！8、CSS权威指南--第四章（p121）值和单位

来源：博客园

4.1 关键字、字符串和其他文本值


【资料图】

样式表中的一切都是文本，但是有些类型的值表示的是字符串本省，而不是数字或颜色等。表示字符串本身的值有 URL 和让人难以置信的图像。

4.1.1 关键字

有时，声明的值用一个词表示，这叫关键字。接受关键字的属性，所取的关键字必须在那个属性允许使用的关键字范围之内。

如果两个属性使用相同的关键字，在不同的属性中相同的关键字可能具有不一样的行为。

全局关键字

CSS 定义了几个“全局”关键字，规范中的每个属性都能使用： inherit 、 initial 、unset 。

inherit 关键字：把元素某个属性的值设为与父元素同一属性的值一样。也就是说。这个关键字强制继承，几遍是在通常情况下不继承时。

                Document        
        
        我歌且谣

initial 关键字 ：把属性的值设为预定义的初始值，相当于“重设”值。

unset 关键字：unset 是 inherit 和 initial 的通用替身。对继承的属性来说， unset 的作用与 inherit 一样，对于不继承的属性来说，unset 的作用与 initial 一样。

以上三个全局关键字在所有的属性中都可以使用，有个特殊的属性只接受这几个全局关键字：all

all 表示除 direction 和 unicode-bidi 之外的所有属性。因此，如果一个元素声明 all: inherit ，意思是除 direction 和 unicode-bidi 之外的所有属性都从父元素上继承值。

4.1.2 字符串

字符串值指放在单引号或双引号内的任意字符串序列，定义可取的值时以 表示。

字符串中还可以有引号，只要不与外层的引号同样就行，此外也可以使用反斜线转义。注意，字符串界定符只能使用直引号。

如果字符串中有换行，可以转义换行符。

4.1.3 URL

绝对URL 相对URL ，略。

@important url(path...) 注意： url 和 开始括号 “（ ”之间不能由空格。

4.1.4 图像

图像值引用的是图像，句法使用 表示。 值基本上就是 值。不过在更高级的用户代理中， 表示下面三种值中的一个：

：指向外部资源的 URL 标识符，这里指图像的 URL 。

：一系列图像，根据值中的条件选择。可以用来根据不同设备的屏幕密度或者分辨率显示不同的背景图片（background-image）或者遮罩图片（mask-image）等。

参考：我们一起学习CSS image-set() « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

： 线性渐变或径向渐变图像，可以是耽搁的，也可以是重复的。

4.1.5 标识符

在CSS标识符命名中可以使用包含字符(a-zA-Z0-9)和ISO 10646字符字符集中的字符,也可以使用连字符(-)和下划线(_);同时,起始部分不能是数字,或两个连字符"-"或一个两个连字符"-"或一个"-"连字符后跟一个数字。

标识符也可以包含转义字符和任何ISO10646字符数字代码。

css中的特殊字符包含：!, ", #, $, %, &, ", (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^,`, {, |, }, ~这些字符需要转义才能用于命名，在其前面加上反斜杠"\"转义来取消这些字符的特定含义。

                Document        
        我歌且谣        急支糖浆，新冠咳嗽

4.2 数字和百分数

这两种值的特别之处在于，他们是很多其他类型值的基础。

4.2.1 整数

即整数，在取值句法中，整数值用 表示 。

4.2.2 数字

即数字，数轴上的数字。在取值句法中，数字值用 表示。

4.2.3 百分数

即百分数， 句法取值用 表示。百分数值始终相对于另一个值，另一个值可以是任何值。

接受百分数值的属性都会定义取值范围，以及百分比相对什么计算。

4.2.4弹性值

弹性值是 后跟 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 都是长度单位。

* 计算的两个值中，必须有一个是 ，因此，2.5rem * 2 和2rem * 2.5 都是有效的，结果为 5rem 。但2.5rem * 2.5rem 是无效的，因为rem平方是面积，而不是长度单位了。

/ 计算两个值中右边的那个必须是 。即必须符合 N / 数字 ， N可以有单位，也可以没有。如30em / 2.75 是有效的。而30 / 2.75em 是无效的。

此外，任何情况下都不能除以零。如30px / 0 是不被允许的。

                Document        
        
 理论上，1 em 等于所用字体中小写字母 m 的宽度 。 其实， “em"这个名称就是由此而来这是一个古老的排版术语。然而，CSS没有才用这个定义。
    
        相对长度单位中的“相对”是指其长度是相对其他东西而言的。    
        x        x        x    

    
        
            rem 的实际作用相当于重设字号：不管祖辈元素把字号设为多大，font-size： 1rem；都会把字号还原成根元素设定的大小。          
        1rem = 根元素的font-size的属性值。    

    
        0000000000         
    

    
        这里使用 vw 单位(试着改变浏览器窗口大小）
        这里使用 vh 单位
        这里使用 vmin 单位
        这里使用 vmax 单位
    

    
        
calc() 允许运算 + 、 - 、 * 、 / 。其中 + 、 - 两个符号前后必须要有空格

4.5 属性值

attr() 函数返回被选择元素的属性值。

    Document

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; }

    Document

4.7 角度

角度一般用 表示。即一个 后跟下列四个单位中的一个。

deg ：度数，完整的圆周是360度。

grad ：百分度（gradian，也叫grade或gon），完整的圆周是400百分度。

rad ： 弧度，完整的圆周是 2π （近似于6.28）。

turn : 圈数，一个完整的圆的一周。这个单位在旋转动画中最有用，比如让一个元素旋转10圈就是 10turn 。

4.8 时间和频率

属性是时间时，是一个 值后跟一个 s（秒）或 ms（毫秒）。时间值常用在过渡和动画中使用，用于定义持续时间或延迟时间。1s = 1000ms 。

视听CSS中有一种值 ，它是一个 值后跟 Hz（赫兹）或KHz（千赫兹）。这个单位的标识符不区分大小写。Hz 和 hz 是等效的。

4.9 位置

位置值用于指定图像在背景区域中的位置，使用 表示。

如果只声明一个值。例如 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变量只能替换值）

    Document        
这些自定义的标识符通常被称为“CSS变量”，这解释了为什么使用var()调用它们。
    
不过要记住，自定义标识符没有编辑语言中的变量那样的功能全面。
    
其实，自定义标识符更像是文本编辑器中的宏，作用只是把一个值替换成另一个。

另外，自定义属性还有个特性：拥有作用域。

    Document        
        这里将使用橙色    
    
这里将使用紫色
    Document        
        这里将使用橙色    
    
这里将使用紫色

如果想试试自定义属性，又担心支持情况，可别忘了能查询特性的 @supports() ，这样遇到不支持的用户代理，使用变量的样式规则便隐藏起来：

@supports (color: var(--custom)) {

/* 使用变量的规则 */

}

@supports (--custom:value) {

/* 替代样式 */

}

（@supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断，如果支持某个属性可以写一套样式，如果不支持某个属性，可以提供另外一套样式作为替补。可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。）

关键词： 长度单位 自定义属性 可以使用