CSS权威指南(第四版)读书笔记——第4章 值和单位之一

前端技术 everyinch 122℃ 0评论

本章探讨单位。单位可以影响颜色、距离和尺寸等一系列属性,可以帮助定义这些值。单位是CSS的重要基础,几乎一切值都离不开它。没有单位,你便无法声明一个图像的四周有10像素的空白,也不能声明标题的文本是多大。

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

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

4.1.1关键字

值用一个词表示,这叫关键字。none是一个十分常见的关键字,它与0(零)不同。若想移除HTML文档中链接的下划线,可以这样写:

a:link, a:visited {text-decoration: none;}

全局关键字

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

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

例如,对下面的样式和标记来说:

#toolbar {background: blue; color: white;}

<div id=”toolbar”>

<a href=”one.html”>One</a> | <a href=”two.html”>Two</a> |

<a href=”three.html”>Three</a>

</div>

div元素将有蓝色背景和白字,而链接将根据浏览器的偏好设置装饰。多数情况下,这里的链接将显示为蓝底蓝字,中间以白色的竖线分隔。

你可以单独编写一个规则,把这个“工具栏”中的链接设为白色,不过使用inherit更便利。只需在样式表中添加下述规则:

#toolbar a {color: inherit;}

这样,链接的color属性将使用继承的值,而不是用户代理的默认样式。

使用inherit还能把通常情况下不从父元素继承的属性值强制拉过来。比如说,border属性不会继承(这是正确的行为)。如果想让span继承父元素的边框,只需使用span{ border:  inherit;}。

Initial关键字initial把属性的值设为预定义的初始值,相当于“重设”值。例如,font-weight属性的默认值是normal。因此,font-weight : initial的作用与font-weight : normal 一样。

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

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

all,取值inherit、initial和unset

all表示除direction和unicode- bidi之外的所有属性。因此,如果为一个元素声明all : inherit,意思是除direction和unicode-bidi之外的所有属性都从父元素上继承值。对下面的规则和标记来说:

section {color: white; background: black; font-weight: bold;}

#example {all: inherit;}

你应该能猜到,div元素会从section元素上继承color、background和font-weight属性的值。

4.1.2字符串

字符串值指放在单引号或双引号内的任意字符序列,定义可取的值时以<string>表示。注意,前后引号要一致,即首尾两个引号是同一种。如若不然,可能导致各种问题。

如果字符串值中有换行,可以转义换行符。CSS会去掉换行符,就像从未换行一样。因此,下面两个字符串在CSS看来是一样的:

“This is the right place \

for a newline.”

“This is the right place for a newline.”

如果真想在字符串中插入一个换行符,在需要换行的地方使用Unicode字符\A:

“This is a better place \Afor a newline.”

4.1.3 URL

引用URL(例如在导入外部样式表的@import语句中)的一般格式如下:

url(protocol://server/pathname)

这是一个绝对URL。“绝对”的意思是不管位于何处都能找到,因为这种URL在网络空间中定义了一个绝对位置。

URL的另一种类型是相对URL,之所以这样命名是因为它的位置相对于所在的文档。

在CSS中,相对URL相对于所在的样式表,而不是使用样式表的文档。

举个例子。假设HTML文档的地址是http://web.waffles.org/toppings/tips.html,文档中有个link元素,链接样式表http://web.waffles.org/styles/basic.css:

<link rel=”stylesheet” type=”text/css” href=”http://web.waffles.org/styles/basic.css”>

basic.css文件中有个@import语句,导入另一个样式表:

@import url(special/toppings.css);

浏览器遇到这个@import语句时将在http://web.waffles.org/styles/special/toppings.css位置查找样式表,而不是http://web.waffles.org/toppings/special/toppings.css。

4.1.4图像

图像值引用的是图像。句法使用<image>表示。<image>表示下面三种值中的一个:

<url>:指向外部资源的URL标识符。这里指图像的URL。

<image-set>:一系列图像(神奇吧),根据值中的条件选择。例如,image-set()可以指定用于桌面布局的大图,以及用于移动布局的小图(尺寸和体积都小)。行为接近picture元素的srcset属性。截至2016年年宋,所有浏览器都支持srcset,但是只有Safari、Chrome和桌面版Opera支持image-set。

<gradient>:线性渐变或径向渐变图像,可以是单个的,也可以重复。

4.1.5标识符

有些属性接受标识符值,即用户定义的某种标识符,最常见的有生成的列表序号。在取值句法中使用<identifier>表示。标识符本身是词,而且区分大小写。例如,在CSS看来,myID和MyID是完全不同的两个标识符。如果属性既接受标识符,也接受一个或多个关键字,一定要注意,不要把标识符定义地跟有效的关键字一样。

4.2数字和百分数

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

4.2.1整数

整数值很好理解,由一到多个数组成,前面还可以有+或—号,分别表示正数和负数。就这么简单。在取值句法中,整数值用<integer>表示。13、-42、712和1066都是整数。

取值范围外的整数值默认是无效的,会导致整个声明被忽略。然而,按照某些属性的定义,取值范围外的整数会被设为与所用值最接近的数,这种行为称为clamping。

4.2.2数字

数字值是<integer>或实数,后者指整数后跟一个点号,再跟着一些整数。此外,前面可以加上+或-,表示正数或负数。在取值句法中,数字值用<number>表示。2.7183、-3.1416和6.2832都是数字。

4.2.3百分数

百分数值是在<number>后跟一个百分号(%),在取值句法中用<percentage>表示。例如50%和33.333%。

4.2.4弹性值

弹性值(fraction value或flex value)是<number>后跟fr。因此,单位弹性值是1fr。这个概念由栅格布局引入,用于把布局中不受限制的空间分成几部分。

4.3距离

很多CSS属性(例如外边距)要靠长度度量衡才能正确显示页面中的各个元素。毫不意外,CSS中有很多度量长度的方式。

长度单位分为两种:绝对长度单位和相对长度单位。

4.3.1绝对长度单位

英寸(in)

厘米(cm):1英寸等于2.54厘米,1厘米等于0.394英寸。

毫米(mm)

四分之一毫米(q):1厘米中有40个q单位。因此,把元素设为1/10厘米宽(即1毫米宽)得到的值是4q(截至2016年年末,只有Firefox支持q)。

点(pt):按惯例,1英寸有72点。因此,把大写字母设为12点的意思是文本的高度为1/6英寸高。例如,p { font-size:18pt;}等效于p{font-size:0.25in;}。

派卡(pc):派卡(pica)也是印刷术语。1派卡等于12点,因此1英寸有6派卡。

像素(px):在CSS中,1像素所占的尺寸够1英寸中放下96像素。

像素理论

讲到像素时,CSS规范建议,如果显示器的像素密度与每英寸96像素(pixels per inch,ppi)相差特别大,用户代理应该缩放像素度量,使用“参考像素”(reference pixel)。CSS2建议用90ppi做参考像素,而CSS2.1和CSS3建议使用96ppi。对最常见的打印机来说,它用的单位是点,而不是像素,而且每英寸中能放下的点数远超96打印网页时,可以假设每英寸96像素,然后据此缩放输出。

4.3.2分辨率单位

为了描述显示器的分辨率,出现了三个新单位。

点每英寸(dpi):在长为1英寸的范围内能显示的点数。

点每厘米(dpcm):与dpi类似,不过测量的范围是1厘米,而不是1英寸。

点每像素单位(dppx):CSS中每个px单位显示的点数。从CSS3起,1dppx相当于96dpi,因为CSS就是按照这个换算比例定义像素单位的。

4.3.3相对长度单位

相对长度单位中的“相对”是指其长度是相对其他东西而言的。

em和ex单位

首先介绍两个联系紧密的单位:em和ex。按CSS的定义,1 em等于元素的font-size属性值。如果元素的font-size为14像素,那么对那个元素来说,1em就等于14像素。

你可能想到了。1 em的值在元素之间是不同的。例如,假设h1的字号为24像素,h2的字号为18像素,段落的字号为12像素。如果把这三个元素的左外边距都设为1em,那么实际的外边距值分别为24像素,18像素和12像素。

h1 {font-size: 24px;}

h2 {font-size: 18px;}

p {font-size: 12px;}

h1, h2, p {margin-left: 1em;}

small {font-size: 0.8em;}

<h1>Left margin = <small>24 pixels</small></h1>

<h2>Left margin = <small>18 pixels</small></h2>

<p>Left margin = <small>12 pixels</small></p>

如果使用em设定字号,那么它相对父元素的字号而言,如图4-3所示。

图4-3:使用em设定外边距和字号

ex指所用字体中小写字母x的高度。因此,如果两个段落的字号都是24点,但是使用的字体不同,那么ex的值也不一样。这是因为不同字体中的x高度有所不同,如图4-4所示。

图4-4:x的高度各不相同

rem单位

与em单位类似,rem也基于声明的字号。二者之间的区别是(很微小),em相对当前元素的字号计算,而rem始终相对根元素计算。在HTML中,根元素是html。因此,font-size: 1rem;声明把元素的字号设为与文档根元素的字号一样大。

举个例子。下述标记片段得到的结果如图4-5所示。

<p> This paragraph has the same font size as the root element thanks to

inheritance.</p>

<div style=”font-size: 30px; background: silver;”>

<p style=”font-size: 1em;”>This paragraph has the same font size as its parent

element.</p>

<p style=”font-size: 1rem;”>This paragraph has the same font size as the root

element.</p>

</div>

图4-5: em与rem的区别

rem的实际作用相当于重设字号:不管祖辈元素把字号设为多大,font-size : 1rem;都会把字号还原成根元素设定的大小。

例如,对下述声明来说,1rem始终相当于13px:

html {font-size: 13px;}

然而,对下述声明而言,1rem始终相当于默认字号的四分之三:

html {font-size: 75%;}

此时,如果默认字号是16像素,那么1rem等于12px。

ch单位

CSS3新增了一个有趣的单位:ch。这个单位基本上可以理解为“一个字符”。CSS3规范是这样定义的:

等于渲染时所用字体中“0”(零,U+0030)字形的进距。

抛开繁杂的细节,简单来说,字形的进宽指一个字形的起点到下一个字形的起点之间的距离。一般情况下,这段距离等于字形本身的宽度加上侧边的间距(间距可以为正也可以为负)。

为了更好地理解这个单位,我们可以把一串零放在一起,然后在下面放一个图像,把图像的宽度设为与零的个数一样。当然,宽度的单位用ch。结果如图4-6所示。

图4-6:根据字符计算尺寸

对等宽字体来说,所有字符的宽度都是1ch。在宽度不一的字体中(绝大多数西文字体),字符的宽度可能比“0”宽,也可能比“0”窄,因此不能认为是1ch宽。

视区相关的单位

CSS3还新增了三个与视区尺寸相关的单位。这些单位根据视区的尺寸计算,比如浏览,器窗口、可打印区域、移动设备的显示屏等。

视区宽度单位(vw):这个单位根据视区的宽度计算,然后除以100。因此,如果视区的宽度是937像素,那么1vw等于9.37px。如果视区的宽度有变,例如把浏览器窗口拉宽或缩窄,vw的值随之改变。

视区高度单位(vh):这个单位根据视区的高度计算,然后除以100。因此,如果视区的高度是650像素,那么1vh等于6.5px。如果视区的高度有变,例如把浏览器窗口拉高或缩矮,vh的值随之改变。

视区尺寸最小值单位(vmin):这个单位等于视区宽度或高度的1/100,始终取宽度和高度中较小的那个。因此,如果一个视区的宽度为937像素,高度为650像素,那么1vmin等于6.5px。

视区尺寸最大值单位(vmax):这个单位等于视区宽度或高度的1/100,始终取宽度和高度中较大的那个。因此,如果一个视区的宽度为937像素,高度为650像素,那么1vmax等于9.37pX。

下面是一个使用视区相关尺寸的简单示例,结果如图4-7所示。

图4-7:根据视区计算尺寸

div {width: 50vh; height: 33vw; background: gray;}

这些单位有趣的一面是(不过可能没什么用),它们不是与相应主轴绑定的。因此,比方说,我们可以声明width: 25vh;让元素的宽度等于视区高度的四分之一。

分享&收藏

转载请注明:陈童的博客 » CSS权威指南(第四版)读书笔记——第4章 值和单位之一

喜欢 (5)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>