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

前端技术 everyinch 113℃ 0评论

4.7角度

讲完HSL中的色相角度,现在比较适合讨论角度单位。角度一般使用<angle>表示,即一个<number>后跟下列四个单位中的一个。

Deg:度数,完整的圆周是360度。

Grad:百分度(gradian,也叫grade或gon),完整的圆周是400百分度。

Rad:弧度,完整的圆周是2兀(近似于6.28)。

Turn:一圈。这个单位在旋转动画中最有用,比如说让一个元素旋转10圈就是10turn。

表4-2:相同角度的不同表示

Degrees Gradians Radians Turns
0deg 0grad 0rad 0turn
45deg 50grad 0.785rad 0.125turn
90deg 100grad 1.571rad 0.25turn
180deg 200grad 3.142rad 0.5turn
270deg 300grad 4.712rad 0.75turn
350deg 400grad 6.283rad 1turn

4.8时间和频率

属性的值为一段时间时,使用<time>表示,它是一个<number>值后跟s(秒)或ms(毫秒)。时间值最常在过渡和动画中使用,用于定义持续时间或延迟时间。下面两个声明的结果完全一样:

a[href] {transition-duration: 2.4s;}

a[href] {transition-duration: 2400ms;}

视听CSS中还有一种值<frequency>,它是一个<number>值后跟Hz(赫兹)或kHz(千赫兹)。一同往常,这个单位的标识符不区分大小写,因此Hz和hz是等效的。下面两个声明的结果完全一样:

h1 {pitch: 128hz;}

h1 {pitch: 0.128khz;}

4.9位置

位置值用于指定图像在背景区域中的位置,使用<position>表示。不过,位置值的句法结构相当复杂:

[

[ left | center | right | top | bottom | <percentage> | <length> ] |

[ left | center | right | <percentage> | <length> ]

[ top | center | bottom | <percentage> | <length> ] |

[ center | [ left | right ] [ <percentage> | <length> ]? ] &&

[ center | [ top | bottom ] [ <percentage> | <length> ]? ]

]

看着有些难懂,但这是由位置值允许使用的复杂形式决定的。

  • 如果只声明一个值,例如left或25%,那么第二个值将被设为center。因此,left的作用与left center 一样,25%的作用与25% center 一样。
  • 如果声明两个值(像上面那样隐式或显式),而且第一个值是长度或百分数,那么前一个值始终是横向值。因此,对25% 35px来说,25%是横向距离,35px是纵向距离。如果调换顺序,写成35px 25%,那么35px就是横向距离,而25%变成了纵向距离。这也意味着,如果写成25% left或35px right,整个值都无效,因为两个值都是横向距离,没有指定纵向距离(类似地,right left或top bottom也是无效的,将被忽略)。而写成left 25%或right 35px则没问题,因为既指定了横向距离(通过关键字),也指定了纵向距离(通过百分数或长度)。
  • 如果声明四个值(使用三个值的说明参见下一段),必须有两个长度或百分数,而且前面都得是关键字。此时,长度或百分数指定偏移距离,而关键字定义偏移以哪一边计算。因此,right 10px bottom 30px表示右边向左偏移10像素,底边向上偏移30像素。类似地,top 50% left 35px表示顶边向下偏移50%,左边向右偏移35像素。
  • 三个值的处理方式跟四个值一样,不过最后一个偏移量将被设为零(即不偏移)。因此,right 20px top的作用与right 20px top 0一样。

4.10自定义值

2017年年末,本书即将完稿时,CSS新增了一个特性。这个特性的术语是“自定义属性”  (custom property),不过它的作用其实是在CSS中创建变量。这个名称词不达意,它并不创建特殊的CSS属性(像color或font之类的)。

下面举个简单的例子,结果如图4-17所示。

html {

–base-color: #639;

–highlight-color: #AEA;

}

h1 {color: var(–base-color);}

h2 {color: var(–highlight-color);}

图4-17:使用自定义值设定标题的颜色

有两个地方要理解。首先是自定义值–base-color和–highlight-color的定义。这不是某种特殊的颜色类型,而是根据值的作用而选择的名称。

另一点是,自定义标识符以两个连字符开头(–)。调用的方法是使用var()值类型。注意,这些名称是区分大小写的,因此–main-color和–Main-color是完全不同的两个标识符。

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

自定义属性有个有趣的特性:作用域在一定的范围内。如果你稍微知道这句话的意思,或许会激动一番。如果不明其意,下面举个例子说明,结果如图4-18所示。

html {

–base-color: #639;

}

aside {

–base-color: #F60;

}

h1 {color: var(–base-color);}

<body>

<h1>Heading 1</h1><p>Main text.</p>

<aside>

<h1>Heading 1</h1><p>An aside.</p>

</aside>

<h1>Heading 1</h1><p>Main text.</p>

</body>

图4-18: 自定义值在特定的范围内起作用

注意,aside元素外部的标题是紫色的,而内部的标题是橙色的。这是因为aside元素更新了–base-color变量的值,应用到aside元素中h1上的是新的自定义值。

虽然CSS变量只能替换值,但也有很多用途。下面的例子是Chriztian Steinmeier提供的,这个例子结合变量和calc()值类型,为无序列表创建有一定规律的缩进:

html {

–gutter: 3ch;

–offset: 1;

}

ul li {margin-left: calc(var(–gutter) * var(–offset));}

ul ul li {–offset: 2;}

ul ul ul li {–offset: 3;}

这与下面这样写其实是一样的:

ul li {margin-left: 3ch;}

ul ul li {margin-left: 6ch;}

ul ul ul li {margin-left: 9ch;}

不过使用变量更方便,只需在一处更新乘数- -gutter,其他地方都能自动更新,而不用重新输入三个值,还要确保计算正确。

使用抽象的变量名为样式规则的编写打开了全新的方式,这是以往很难实现的。如象想试试自定义属性,但又担心支持情况,可别忘了能查询特性的@supports()。这样,万一遇到不支持的用户代理,使用变量的样式规则便能隐藏起来,不产生影响:

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

/* variable-dependent styles go here */

}

@supports (–custom: value) {

/* alternate query pattern */

}

分享&收藏

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

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

表情

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

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