CSS权威指南（4）
值和单位
文章目录
- 值和单位
- 一、关键字、字符串和其他文本值
- 1.关键字
- 2.字符串
- 3.URL
- 4.图像
- 5.标识符
- 二、数字和百分数
- 1.整数
- 2.数字
- 3.百分数
- 4.弹性值
- 三、距离
- 1.绝对长度单位
- 2.分辨率单位
- 3.相对长度单位
- 四、计算值
- 五、属性值
- 六、颜色
- 1.具名颜色
- 2.RGB和RGBa颜色
- 3.HSL和HSLa颜色
- 4.颜色关键字
- 七、角度
- 八、时间和频率
- 九、位置
- 十、自定义值
一、关键字、字符串和其他文本值
1.关键字
有时，值用一个词表示，这叫关键字。例如none、normal、underline等。
全局关键字
CSS3定义了几个“全局”关键字，规范中的每个属性都能使用：inherit、initial和unset。
inherit关键字 把元素某个属性的值设为与父元素同一属性的值一样。即这个关键字强制继承，即便是在通常情况下不继承时。
代码如下（示例）：
#toolbar{background: blue;color: white;}
//通常a标签未设置时未点击颜色为蓝色
<div id="toolbar"><a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |<a href="css4_0405.html">Three</a>
</div>
效果：
代码如下（示例）：
#toolbar{background: blue;color: white;}
#toolbar a {color:inherit;}//强制继承值
<div id="toolbar"><a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |<a href="css4_0405.html">Three</a>
</div>
效果：
initial关键字 把属性的值设为预定义的初始值，相当于“重设”值。
unset关键字 是inherit和initial的通用替身。对于继承的属性来说，unset的作用相当于inherit；对于不继承的属性来说，unset的作用和initial一样。
all表示除direction和unicode-bidi之外的所有属性。all只接受inherit、initial和unset这三个全局关键字 。
2.字符串
字符串值指在单引号和双引号内的任意字符序列，定义可取得值时以表示。
3.URL
引用URL的一般格式如下：
url(protocol://server/pathname)//绝对位置
url(pathname)//相对位置
4.图像
图像值引用的是图像，句法使用<image>表示。<image>表示下面三种值中的一个：
- <url>指向外部资源的URL标识符
- <image-set>一系列图像，根据图中的条件选择
- <gradient>线性渐变或径向渐变图像，可以是单个的，也可以是重复的。
5.标识符
有些属性接收标识符值，即用户定义的某种标识符。标识符本身是词，而且区分大小写。
二、数字和百分数
1.整数
整数值由一到多个数组成，前面还可以有+或-号，分别表示正数和负数。在取值语法中，整数值用<integer>表示。
2.数字
数字值是<integer>或实数，后者指整数后跟一个点号，再跟一些整数。在取值句法中，数字值用<number>表示。
3.百分数
百分数值是在<number>后跟一个百分号（%），在取值句法中用<percentage>表示。
4.弹性值
弹性值是<number>后跟fr。单位弹性值是1fr。
三、距离
长度单位分为两种：绝对长度单位和相对长度单位。
1.绝对长度单位
绝对长度单位有七个，包括：英尺(in)、厘米(cm)、毫米(mm)、四分之一毫米(q)、点(pt)、派卡(pc)和像素(px)。
2.分辨率单位
随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了三个新的单位：点每英寸(dpi)、点每厘米(dpcm)和点每像素单位(dppx)。
3.相对长度单位
相对长度单位中的“相对”是指其长度是相对其他东西而言的，相对长度的实际值（或绝对值）根据不受其控制的因素而变。
em和ex单位
按CSS定义，1em等于元素的font-size属性值。理论上，1em等于所用字体中小写字母m的宽度 。如果使用em设定字号，那么它相对父元素的字号而言。
ex值所用字体中小写字母x的高度。
rem单位
rem也基于声明的字号。em相对于元素的字号计算，而rem是指相对于根元素（html）计算 。rem实际作用相当于重设字号。
代码如下（示例）：
<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>
效果：
ch单位
CSS把ch单位定义为所用字体中一个零的进度。
视区相关的单位
CSS新增了三个与视区尺寸相关的单位，这些单位根据视区的尺寸计算。视区单位包括：
- 视区宽度单位（vw）：这个单位根据视区的宽度计算，然后除以100。
- 视区高度单位（vh）：这个单位根据视区的高度计算，然后除以100。
- 视区尺寸最小单位（vmin）：这个单位等于视区宽度或高度的1/100，始终取宽度和高度中较小的那个。
- 视区尺寸最大单位（vmax）：这个单位等于视区宽度或高度的1/100，始终取宽度和高度中较大的那个。
代码如下（示例）：
div {height: 50vh; width: 33vw; background: gray;}
body {height: 350px; width: 750px; border: 2px solid #444;}//视区大小
div {width: 50%; height: 33%;}
<div>A div! It is half the width of the viewport and a third the height. Six of them could create a full-viewport UI.</div>
<p>A paragraph which follows the single <code>div</code> we actually have in this example.</p>
效果：
四、计算值
CSS提供了cale()值，括号中允许使用的运算符有+、-、*、/，以及括号。
cale()限制：
- +和-号两侧的值必须使用相同的单位类型，或者是<number>和<integer>。
- *计算的两个值中必须有一个是<number>。
- /计算的两个值中右边的那个必须是<number>。左边是<integer>时，结果为一个<number>值，否则，结果的单位与左边的值一样。
- 任何情况下都不能除以零。
五、属性值
attr()可以使用样式对应的元素上的HTML属性值。
六、颜色
1.具名颜色
基本的具名颜色包括：aqua、gray、Navy、silver、black、green、Olive、teal、blue、lime、Purple、white、fuchsia、maroon、Red、yellow。
2.RGB和RGBa颜色
函数式RGB颜色
有两种颜色值使用函数值RGB表示法。
语法：
rgb(color) /*color是三个值，可以是百分数或整数*/
代码如下（示例）：
rgb(100%,100%,100%);
rgb(0,0,0);
RGBa颜色
这种表示法在RGB的三个通道后面增加了一个alpha值，alpha（不）的取值范围为0~1。
代码如下（示例）：
rgba(100%,100%,100%,0.5);
rgba(0,0,0,0.5);
十六进制RGB值
语法：
#RRGGBB
代码如下（示例）：
h1{color:#000;}/*如果每个十六进制中的两个数字相等，可以使用简短表示法*/
h2{color:#999aaa;}
十六进制RGBa值
代码如下（示例）：
p.one{color:#000000FF;}
3.HSL和HSLa颜色
HSL是Hue（色相）、Saturation（饱和度）和Lightness（明度）的简称，其中色相是角度值，取值范围是0-360，饱和度是从0（无饱和度）-100（完全饱和）的百分数，明度是从0（全暗）-100（全明）的百分数。
代码如下（示例）：
p.one{color:hsl(0,0%,0%);}
p.two{color:hsla(0,0%,0%,1);}
4.颜色关键字
transparent和currentColor可以在任何允许使用颜色值的地方使用。transparent表示完全透明的颜色，currentColor是当前元素color属性计算得到的值。
七、角度
角度一般用<anger>表示，包括：
- deg：度数，完整的圆周是360度。
- grad：百分度，完整的圆周是400百分度。
- rad：弧度，完整的圆周是2π。
- turn：圈数，一个完整的圆周是一圈。
八、时间和频率
<time>单位s（秒）或ms（毫秒），<frequency>单位Hz（赫兹）或kHz（千赫兹）。
代码如下（示例）：
a[href] {transition-duration:2.4s;}
h1 {pitch:128hz;}
九、位置
位置值用于指定图像在背景区域中的位置，使用<position>表示。
十、自定义值
自定义标识符以两个连字符开头（–）。调用的方法是使用var()值类型。
CSS权威指南（4）相关推荐
- css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
- 《CSS权威指南》--附录
<CSS权威指南>--附录 虽然一条规则中的声明可以按照任何顺序写出来,但我背后还是有一个优先级顺序: 1. display 及相关声明: 2. position 及相关的声明: 3. m ...
- css权威指南pdf
下载地址:网盘下载 内容简介 · · · · · · 这本书提供了对CSSl和CSS定位的完整的描述,同时也给出了CSS2的概述.书中对CSS的每个属性都做了详细的探究,同时讨论了各个属性之间如何协 ...
- CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. ...
- CSS权威指南（第三版）
很早就买了这本书,之前都是断断续续地看,前段时间总算是花时间系统的把它看了一遍.严格的说是第二次才把这本书系统的看完,之前是因为很多知识点看不懂,所以没有系统看.虽然这一次也有好多知识点没有看懂.但是 ...
- css权威指南 note2
样式表: 外部样式表(external style sheet) <link rel="stylesheet" type="text/css" href= ...
- 读书笔记《CSS权威指南》
阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...
- CSS权威指南（一）CSS概述
文章目录 1.元素 2.引入样式表 3.样式表 4.媒体查询 5.特性查询 1.元素 (1)置换元素和非置换元素 置换元素,指用来置换元素内容的部分不由文档内容直接表示.比如img标签. 非置换元素, ...
- 翻译《CSS权威指南》第3版第1章有感
昨晚第一章终于翻译完了,今天一直在想其中在 1.4.5 注释 章节提示中的一段文字: One way to create "nested" comments accidentall ...
- CSS权威指南之选择器补充
1.给拥有两种类属性的标签内加css样式 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
最新文章
- 【怎样写代码】复杂对象的组装与创建 -- 建造者模式（一）：问题案例
- 机器学习面试题集 - 详解四种交叉验证方法
- 【剑指offer-Java版】18树的子结构
- 基于 tcp协议完成的上传下载
- pyspark union代码示例
- 30分钟学会如何使用Shiro
- 定制iOS 7中的导航栏和状态栏
- CF Round#436 div2
- 为SQL缓存通知启用数据库
- TCP/IP协议 TCP包深入理解
- objective-C语言:第一个OC程序
- pycharm更换python版本
- 淘宝店铺层级作用 店铺层级低有哪些影响
- 一起学爬虫（Python） — 02
- 微信小程序image图片标签（超详细）
- 关于偏微分、全微分总结
- PhD Debate-11 预告 | 矛与盾的对决——神经网络后门攻防
- 新元宇宙奇科幻小说《地球人奇游天球记》第十一回水星冲浪
- Multisim仿真—CMOS门电路
- 计算机文化基础0008 17秋在线作业1,【在线】《计算机文化基础0008》17秋在线作业2.doc...