《CSS权威指南上册》学习笔记

最新推荐文章于 2024-08-18 08:09:12 发布

Leon_Chenl

最新推荐文章于 2024-08-18 08:09:12 发布

阅读量525

点赞数 7

分类专栏： Web前端书籍学习笔记文章标签： css 学习笔记

本文链接：https://blog.csdn.net/Leon_Chenl/article/details/139102541

版权

Web前端书籍学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

第1章 CSS和文档

1.1 Web样式简介

层叠样式表的层叠指样式可以结合起来使用，而且具有优先级。

1.2 元素

元素（elements）是文档结构的根基。

1.2.1 置换元素和非置换元素

置换元素指用来置换元素内容的部分不由文档内容直接表示。例如img，input。

非置换元素即元素的内容由用户代理（通常是浏览器）在元素自身生成的框中显示。例如sapn，h1，ul，li等。

1.2.2 元素的显示方式

元素分为块级和行内两种基本类型。

在html中，块级元素不能出现在行内元素中。

display

默认值 inline

<display-outside> block | inline | run-in

<display-inside> flow | flow-root | table | flex | grid | ruby

<display-listitem> list-item && <display-outeside> && [flow | flow-root]?

<display-internal>

<display-box> contents | none

<display-legacy> inline-block | inline-list-item | inline-table | inline-flex | inline-grid

1.3 把CSS应用到HTML上

1.3.1 link标签

link标签必须放在head元素中，不能放在其他元素中。

@import声明必须放在所在样式表的开头。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>01-04</title>
    <style type="text/css" media="all">
      body {width: 42em;}
    </style>
    <!-- href 可以是绝对地址可以是相对地址 -->
    <!-- media 它的值是一个或多个媒体描述符，指明媒体的类型和具有的功能 -->
    <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
    <style type="text/css">
      @import url(sheet2.css);
      /* These are my styles! Yay! */
    </style>
  </head>
  <body>    123  </body>
</html>

rel属性的值设为alternate stylesheet，仅当用户自己选择，文档才会使用候选样式表渲染。

如果不为样式表设定标题（title），那它就是永久样式表，始终用于显示文档。

1.3.2 style元素

style元素应该始终设定type属性。

1.3.3 @import指令

@import url(xxx) screen 。

@import指令也可以显示导入的样式表应用于何种媒体。

1.3.4 HTTP链接

还可以通过服务器使用HTTP首部关联CSS。

1.3.5 行内样式

除了body元素之外的标签（如head和title），所有HTML标签都能设定style元素。

通常不建议使用style属性。

1.4 样式表中的内容

1.4.1 标记

样式表中不能有标记。

1.4.2 规则的结构

一个规则由两个基本部分构成：选择符和声明块，声明块由一个或多个声明组成，一个声明包含一个属性和对应的值。

h1 {color: red; background: '#fff'}

1.4.3 厂商前缀

前缀	厂商
-epub-	国际数字出版论题制定得ePub格式
-moz-	基于Mozilla的浏览器
-ms-	微软IE
-o-	基于Opera的浏览器
-webkit-	基于WebKit的浏览器

如今，编写CSS基本用不到厂商前缀，不过偶尔可能会用到。

1.4.4 处理空白

CSS对待空白的方式跟HTML差不多，解析时，连续的空白会合并成一个空白。

1.4.5 CSS注释

/* 这是一个CSS注释 /*

1.5 媒体查询

媒体查询（media query）定义浏览器在何种媒体环境中使用指定的样式表。

1.5.1 用法

媒体查询可以在下述几个地方使用：

link元素的media属性。
style元素的media属性。
@import声明的媒体描述符部分。
@media声明的媒体描述符部分。

1.5.2 简单的媒体查询

/* 媒体查询包含描述媒体类型的词组和对媒体参数的说明 */
@media projection {
  body {background: yellow;}
}

1.5.3 媒体类型

all

用于所有展示媒体。
print

为有视力的用户打印文档时使用，也在预览打印效果时使用。
screen

在屏幕媒体（如桌面电脑的显示器）上展示文档使用。在桌面计算机上运行的所有Web浏览器都是屏幕媒体用户代理。

/* 四种媒体查询方式 */
<link type="text/css" rel="stylesheet" href="xxx.css" media="screen, print">
<style type="text/css" media="screen, print">...</style>
@import url(xxx.css) screen, print;
@media screen, print {...}

1.5.3 媒体描述符

一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表，其中特性描述符要放在圆括号中。

@media screen and (min-resolution: 72dpi),  print and (color) {...}
@media (min-resolution: 72dpi) {...}

逻辑关键字

and

连接的两个或多个媒体特性同时满足才为真。
not

对整个查询取反。not只能在媒体查询的开头使用。
分隔多个媒体查询的逗号相当于OR。
only

在不支持媒体查询的旧浏览器中隐藏样式表。

1.5.5 媒体特性描述符和值的类型

width、min-width、max-width、device-width、min-device-width、max-device-width、height、min-height、max-height、device-height、min-device-height、max-device-height、aspect-raio、min-aspect-raio、max-aspect-raio、device-aspect-raio、min-device-aspect-raio、max-device-aspect-raio、color、min-color、max-color、color-index、min-color-index、max-color-index、monochrome、min-monochrome、max-monochrome、resolution、min-resolution、max-resolution、orientation、scan、grid。

1.6 特性查询

如果用户代理支持某个特性，就执行这段代码。

@supports (color:black) {
  body {
    color: black;
  }        
}

特性查询可以嵌套媒体查询，反过来嵌套也可以。

特性查询也支持逻辑运算符。@supports (display: grid) and (shape-outside: circle()) {...}。

特性查询既要测试属性也要测试值。

第2章选择符

2.1 样式的基本规则

2.1.1 元素选择符

元素选择符通常是HTML元素。在XML中，什么都可以作为选择符，因为XML允许创建新标记语言。

2.1.2 声明和关键字

如果声明中的属性或值有误，整个规则都将被忽略。

如果属性的值可以是多个关键字，关键字之间通常以空格分隔，有时则使用斜线或逗号。

这些以空格分开的词称为关键字。p {font: medium Helvetica;}。

2.2 群组

2.2.1 群组选择符

h2, p {color: gray};。

通用选择符（*）

*这个选择符匹配所有元素。

2.2.2 群组声明

一个规则可以有多个选择符也可以有多个声明。

编写规则时一定要加上分号。

2.2.3 二者结合

<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 0.5em;
  border: 1px solid black;
  font-family: Charcoal,sans-serif;
}
</style>

2.2.4 在旧浏览器中使用新元素

document.createElement('main');。

2.3 类选择符和ID选择符

2.3.1 类选择符

*.warning {font-weight: bold;}如果没有依附元素选择符，隐式蕴含通用选择符。

.warning {font-style: italic;}
span.warning {font-weight: bold;}

2.3.2 多个类

把两个类选择符串在一起，选择的是同时具有两个类目的元素，对类名的顺序没有要求。

.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

2.3.3 ID选择符

#mostImportant {color: red; backgroud: yellow;}。

2.3.4 在类选择符和ID选择符之间选择

在一个HTML文档中，一个ID能且只能使用一次（推荐）。

类和ID的值是区分大小写的。

2.4 属性选择符

2.4.1 简单属性选择符

h1[class] {color: silver;}。

a[href][title] {font-weight: bold;}

2.4.2 根据精准的属性值选择

a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;}。

2.4.3 根据部分属性值选择

形式	说明
[foo\|=“bar”]	选择的元素有foo属性，且其值以bar和一个英文破折号-（U+002D）开头，或者值就是bar本身
[foo~=“bar”]	选择的元素有foo属性，且其值是包含bar这个词的一组词
[foo*=“bar”]	选择的元素有foo属性，且其值包含子串bar
[foo^=“bar”]	选择的元素有foo属性，且其值以bar开头
[foo$=“bar”]	选择的元素有foo属性，且其值以bar结尾

*[lang|="en"] {color: white;}选择lang属性的值为en或者以en-开头的元素。

div[class~="barren"] {font-style: italic;}匹配有包含词的一组词。

2.4.4 不区分大小写的标识符

在结束方括号前加上i，匹配属性值时不区分大小写。

a[href$=".PDF" i]属性的值不区分大小写。

2.5 根据文档结构选择

2.5.1 理解父子关系

html元素称为根元素（root element）。

2.5.2 后代选择符

h1 em {color: gray;}。

ul ol ul em {color: gray;}。

2.5.3 选择子元素

h1 > strong {color: red;}选择h1下的子代strong元素。

2.5.4 选择紧邻同胞元素

h1 + p {margin-top: 0;}选择p元素紧跟h1元素后面。

li + li {font-weight: bold;}选择除第一个li之后的li元素。

2.5.5 选择后续同胞

h2 ~ ol {font-style: italic;}选择h2元素后面同属一个父元素的ol元素。

2.6 伪类选择符

伪类也称为幽灵类。

2.6.1 拼接伪类

拼接伪类的顺序其实没什么关系，a:link:hover {color: red;}等于a:hover:link {color: red;}。

2.6.2 结构伪类

伪类始终指代所依附的元素。

选择根元素

// 选择根元素 :root {border: 10px dotted gray;}

HTML中根元素是html。

选择空元素

:empty伪类可以选择没有任何子代的元素。

p:empty {display: none}禁止显示空段落。

<p></p>
<p> </p> <!-- 不是空 -->
<p> <!-- 不是空 --></p>
<p><!-- 注释 --></p>

选择唯一的子代

:only-child选择的元素是另一个元素的唯一子元素。

img:only-child {border: 1px solid black;}选择的是只有一个img标签的img元素。

a[href] img:only-child匹配的图像是唯一的子元素，是a元素的后代，而不是a元素的子元素。

:only-of-type匹配同胞中唯一的那种元素，而:only-child只匹配完全没有同胞的元素。

:only-of-type指代的是元素，如p、div元素，而不是其他任何东西，如class，id。

选择第一个和最后一个子代

:first-child选择一个元素的第一个子元素。:last-child选择一个元素的最后一个子元素。

选择第一个和最后一个某种元素

:first-of-type选择一个元素中某种元素的第一个。:last-of-type选择一个元素中某种元素的最后一个。

选择每第n个子元素

:nth-child()选择第n个元素。nth-last-child()从最后一个元素开始选择第n个元素。

ul > li:nth-child(3n + 1) {text-transform: uppercase;}选择每第三个列表，如1，4，7。

tr:nth-child(odd) {background: silver;}表格第一行起每隔一行。even是从第二行每隔一行。

tr:nth-child(n + 9) {}等于tr:nth-child(8) ~ tr {}。

选择每第n个某种元素

:nth-of-type()和:nth-last-of-type()。

p > a:nth-of-type(even)在一个段落中从第二个超链接起选择间隔的超链接。

2.6.3 动态伪类

超链接伪类

伪类	说明
:link	指代用作超链接的锚记（即具有href属性），而且指向尚未访问的地址
:visited	指代指向已访问的超链接。

如果通过DOM查询已访问链接的样式，返回的值跟未访问时一样。

用户操作伪类

伪类	说明
:focus	指代当前获得输入焦点的元素，即可以接受键盘输入或以某种方式激活
:hover	指代鼠标指针放置其上的元素，例如鼠标指针悬停在超链接上
:active	指代由用户输入激活的元素，例如用户单击超链接时按下鼠标按键的那段时间

伪类的推荐顺序是"link-visited-focus-hover-active"。

动态样式引起的问题

动态伪类会改变布局，导致内容重排。

2.6.4 UI状态伪类

伪类	说明
:enabled	指代启用的用户界面元素（例如表单元素），即接受输入的元素
:disabled	指代禁用的用户界面元素（例如表单元素），即不接受输入的元素
:checked	指代由用户或文档默认选中的单元按钮或复选按钮
:indeterminate	指代既未选中也没有未选中的单选按钮或复选框；这个状态只能由DOM脚本设定，不能由用户设定
:default	指代默认选中的单选按钮、复选框或选项
:valid	指代满足所有数据有效性语义的输入框
:invalid	指代不满足所有数据有效性语义的输入框
:in-range	指代输入的值在最小值和最大值之间的输入框
:out-of-range	指代输入的值小于控件允许的最小值或大于控件允许的最大值的输入框
:required	指代必须输入值的输入框
:optional	指代无需一定输入值的输入框
:read-write	指代可由用户编辑的输入框
:read-only	指代不能由用户编辑的输入框

启用和禁用的UI元素

:enabled和:disabled，一般只装饰:disabled。

选择状态

:checked和:indeterminate。

默认选中伪类

:default匹配一组相似元素中取默认值的UI元素。这个伪类通常用于上下文菜单选项、按钮和选项列表。

可选性伪类

:required匹配必填的表单控件，这一要求由required属性指定。

:optional匹配没有required属性的表单控件，或者required为false的控件。

有效性伪类

:valid表示用户输入的值满足全部数据验证条件，:invalid表示用户输入的值不满足全部数据验证条件。

范围伪类

:in-range和:out-of-range，前者表示用户输入的值在h5的min和max属性设定的最小值和最大值范围之内，而后者表示用户输入的值小于控件接受的最小值或大于最大值。

只适用于设定了范围的元素。

可变性伪类

:read-write表示输入框由用户编辑，:read-only匹配不能编辑的输入框。

2.6.5 :target伪类

https://www.xxxx.org/TR/css3-selectores/#target-pseudo，target-pseudo就是片段标识符。

:target伪类定义的样式在两种情况下不会应用：

页面的URL中没有片段标识符。
页面的URL中有片段标识符，但是文档中没有与之匹配的元素。

2.6.6 :lang伪类

根据文本使用的语言选择元素，使用:lang()伪类。*:lang(fr) {xxx}。

2.6.7 否定伪类

:not()否定伪类。括号中的是简单的选择符，简单的选择符指：一个类型选择符、通用选择符、属性选择符、类选择符、ID选择符或伪类。基本上，简单选择符是指没有祖辈-后代关系的选择符。

*:link:not(li):not(p) {xxx}既不是li也不是p。

2.7 伪元素选择符

伪类使用一个冒号，伪元素使用一对冒号::。

所有伪元素只能出现在选择符的最后。

2.7.1 装饰首字母

::first-letter用于装饰任何非行内元素的首字母，或者开头的标点符号和首字母。

例：h2:first-letter {font-size: 200%;}。

2.7.2 装饰首行

::first-line用于装饰元素的首行文本。不管区域有多宽多窄，只装饰首行文本。

例:p::first-line {font-size: 150%; color: purple;}

2.7.3 对::first-letter和::first-line的限制

::first-letter和::first-line只能应用到块级元素上，对CSS属性也有限制。

2.7.4 装饰（或创建）前置和后置内容元素

::before创建前置内容元素，::after创建后置内容元素。

第3章特指度和层叠

继承是指把一个元素的某些属性值传给后代的机制。

3.1 特指度

一个特指度值由四部分构成。

选择符中的每个ID属性值加0,1,0,0。
选择符中的每个类属性值（.class）、属性选择（a[href]）或伪类（:hover）加0,0,1,0。
选择符中的每个元素（p，a)和伪元素（::first-line）加0,0,0,1。
连结符和通用选择符（*）不增加特指度。

特指度值0,0,1,0比0,0,0,13大。

3.1.1 声明和特指度

在任何情况下，用户代理都会确定哪些规则与元素匹配，然后找出所有相关的声明，计算各自的特指度，判断哪些规则生成，再把胜出的规则应用到元素上，得到装饰后的结果。

3.1.2 通用选择符的特指度

通用选择符不增加特指度。

3.1.3 ID和属性选择符的特指度

3.1.4 行内样式的特指度

行内样式声明的特指度比其他声明都高。

3.1.5 重要性

!important，重要声明，!important始终放在声明末尾的分号;之前。

非重要声明和重要声明冲突时，重要声明始终胜出。

3.2 继承

继承的值没有特指度，连零都没有。

多数盒模型属性也不继承，包括外边距、内边距、背景和边框。

3.3 层叠

CSS的层叠规则如下：

找到匹配特定元素的所有规则。
按显式权重排序应用到特定元素上的所有声明。以!important标记的规则比没有这一标记的权重高。
按来源排序应用到特定元素上的所有声明。
按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重。
按声明的前后位置排序应用到特定元素上的所有声明。

3.3.1 按权重和来源排序

下面权重从高到低列出：

读者提供的样式中以!important标记的声明。
创作人员编写的样式中以!important标记的声明。
创作人员编写的常规声明。
读者提供的常规声明。
用户代理的默认声明。

3.3.2 按特指度排序

如果应用到一个元素上的声明有冲突，而且各声明的显式权重和来源相同，那么应该按特指度排序，特指度最高的声明胜出。

3.3.3 按前后位置排序

如果两个规则的显式权重、来源和特指度都相同，那么在样式表中的位置靠后的规则胜出。

3.3.4 CSS之外的表现提示

表现提示的特指度为0。

第4章值和单位

单位可以影响颜色、距离和尺寸等一系列属性，可以帮助定义这些值。

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

4.1.1 关键字

值用一个词表示，这叫关键字。

全局关键字

inherit、initial和unset。

inherit把元素某个属性的值设为与父元素同一属性的值一样。例：#toolbar a {color: inherit;}。

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

unset是inherit和initial的通用替身。对继承属性unset作用与inherit一样，不继承属性与initial一样。

all属性表示除direction和unicode-bidi之外的所有属性，他只接受3个全局关键字值。例：#emample {all: inherit;}。

4.1.2 字符串

例："I like to play with strings."。

4.1.3 URL

例：url(xxx)，xxx可以是绝对或相对。

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

4.1.4 图像

图像值引用的是图像。句法使用<image>表示。

<url>外部资源的URL标识符
<image-set>根据值中的条件选择。
<gradient>线性渐变或径向渐变图像。

4.1.5 标识符

有些属性接受标识符值，即用户定义的某种标识符。在取值句法中使用<indentifier>表示。

4.2 数字和百分数

4.2.1 整数`<integer>`

+或-号表示正数或负数。

没有限制取值范围的数必须接受±1073741824(±2^30）之内的数。

例：13、-42、712。

4.2.2 数字`<number>`

例：2.7183、-3.1416。

4.2.3 百分数`<percentage>`

例：50%、33.33%。

4.2.4 弹性值

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

4.3 距离

长度的后面是一个缩写，表示长度的单位，如in（英寸）或pt（点）。

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

4.3.1 绝对长度单位

绝对长度单位有七个：

英寸（in）
厘米（cm）

1英寸等于2.54厘米，1厘米等于0.394英寸。
毫米（mm）
四分之一毫米（q）

1厘米中有40个q单位。
点（pt）

点是一个标准得印刷度量单位。1英寸有72点。
派卡（pc）

派卡（pica）也是印刷术语。1pc等于12pt。
像素（px）

像素是屏幕上的小点。

绝对单位在定义文档的印刷样式时非常有用，因为打印机通常使用英寸v、点和派卡。

像素长度

web浏览器处理像素长度时基本上会在屏幕上使用指定的像素数。

像素理论

如果显示器的像素密度与每英寸96像素（ppi）相差特别大，用户代理应该缩放像素度量，使用“参考像素”。

4.3.2 分辨率单位

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

点每英寸（dpi）

在长为1英寸的范围内能显示的点数。
点每厘米（dpcm）
点每像素数单位（ddpx）

每个px单位显示的点数。从CSS3起，1ddpx相当于96dpi。

4.3.3 相对长度单位

相对长度的实际值（或绝对值）根据不受其控制的因素而变，例如屏幕分辨率，视区宽度等。

em和ex单位

1em等于元素的font-size属性值。em相对于父元素的字号。

ex指所用字体中小写字母x的高度。

rem单位

rem相对与根元素的字号。

ch单位（CSS3新增）

所用字体中一个零的进宽（一个字形的起点到下一个字形的起点之间的距离）。

视区相关的单位

视区宽度单位（vw）

如果视区的宽度有变，例如浏览器窗口拉宽或缩窄，vw的值随之改变。
视区高度单位（vh）
视区尺寸最小值单位（vmin）

这个单位等于视区宽度或高度的1/100，始终取宽度和高度中较小的那个。
视区尺寸最大值单位（vmax）

4.4 计算值

calc()可以做数学运算加减乘除。

calc()会检查括号中各个值的单位类型，方式如下：

+和-号两侧须使用相同的单位类型，如5 + 2.7有效，5em + 20px有效，5em + 2.7无效。
*计算的两个值中必须有一个是<number>。
/计算的两个值中右边的那个必须是<number>。
任何情况下都不能除以零。

4.5 属性值

attr()，可以使用样式对应的元素上的HTML属性值。目前仅支持伪元素的content属性。

例：p::before {content: "[" attr(id) "]"}。

4.6 颜色

4.6.1 具名颜色

例：red、gray、yellow、blue等等。

截止2017年年末，共有148个颜色关键字。

4.6.2 RGB和RGBa颜色

函数式RGB颜色

句法是rgb(color)，color是三个值，可以是百分数（0_{100%）或整数（0}255）。

例：rgb(255, 255, 255)、rgb(100%, 100%, 100%)。

大于100%或小于0%的值将变为100%和0%。

RGBa颜色

例：rgba(255, 255, 255, 0.5)半透明。

十六进制RGB值

例：color: #FF0000红色。

句法为#RRGGBB。如果两个数字相等，可以使用简短表示法，句法为#RGB。

十六进制RGBa值

例：color: #000000FF表示不透明。

在新的十六进制表示法后面再添加一个十六进制值，表示alpha通道的值。

4.6.3 HSL和HSLa颜色

CSS3新增了HSL表示法。HSL是Hue（色相），Saturation（饱和度）和Lightness（明度）的简称，其中色相是角度值，取值范围是0_{360，饱和度是从0（无饱和度）}100（完全饱和）的百分数，明度是从0（全暗）~100（全明）的百分数。

饱和度衡量颜色的强度。饱和度为0%时，不管色相角度为多少，得到的都是不太暗的灰色；饱和度为100%时，在明度一定时，色相最饱满。明度定义颜色有多暗和多亮。明度为0%时，不管色相和饱和度为多少，始终为黑色；而明度为100%时，得到的是白色。

例：color: hsl(240, 50%, 50%)。

HSL有对应的HSLa。例：color: hsla(100, 50%, 75%, 0.5)。

4.6.4 颜色关键字

transparent和currentColor，可以在任何允许使用颜色值的地方使用。

transparent表示完全透明，它与rgba(0,0,0,0)等效，是元素背景色的默认值。

currentColor当前元素color属性计算得到的值。

4.7 角度

角度使用<angle>表示，即一个<number>后跟下列四个单位中的一个。

deg

度数，完整的圆周是360度。
grad

百分度，完整的圆周是400百分度。
rad

弧度，完整的圆周是2π（6.283rad）。
turn

圈数，一个完整的圆周是一圈。

角度单位最常用在2D和3D变形中使用。HSL颜色中不适用角度单位，色相角度始终是度数，而且不加deg单位。

4.8 时间和频率

属性的值为一段时间时，使用<time>表示，<number>值后跟s（秒）或ms（毫秒）。

时间值最常在过度和动画中使用。

视听CSS也用到时间值，用于定义持续时间或延迟时间。

视听CSS还有一种值<frequency>，<number>值后跟Hz（赫兹）或kHz（千赫兹）。

4.9 位置

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

top、center、right、bottom、<percentage>、<length>。

4.10 自定义值

自定义值以两个连字符开头（–）。调用的方法是使用var()值类型。

作用域在一定的范围内。

html {
  --base-color: #639;
}
aside {
  --base-color: #F60;
}
h1 {
  color: var(--base-color);
}

第5章字体

CSS2开始支持使用@font-face下载指定的自定义字体。

如果字体下载失败或字体的格式不被用户的浏览器支持，文本将使用后备字体显示。

5.1 字体族

“字体”通常包含多个变体，分别针对粗体、斜体等。我们通常说的Times字体，其实是这些不同字型的统称，Times其实是一个字体族（font family），而不是一个字体。

CSS定义了五种通用字体族：

衬线字体

衬线是字符笔划末尾的装饰，Times、Georgia和New Century Schoolbook。
无衬线字体

字形宽带各异，而且无衬线。Helvetica、Geneva、Verdana、Arial和Univers。
等宽字体

等宽字体中的字形宽度一样。Courier、Courier New、Consolas。
草书字体

这种字体尝试模仿人类笔迹或手写体。Zapf Chancery、Author和Comic Sans。
奇幻字体

没统一特征，无法划归到其他类别中。Wetern、Woodblock。

任何一款字体都可归为上述通用字体族中的一个。

5.1.1 使用通用字体族

字体族使用font-family属性声明。

font-family具有继承性。

例：body {font-family: sans-serif;}。

5.1.2 指定字体族

如果没有找到指定字体，用户代理不会使用这个规则，而是使用用户代理的默认字体。

h1 {font-family: Georgia, serif;}如果没有Georgia字体则使用serif字体。

建议始终在font-family指定通用字体族，提供了一种后备机制。

使用引号

如果字体名称中有一个或多个空格（例如“New York”），或者字体名称中有符合（例如#或$），建议使用引号（可以是单引号或双引号）（不是强制要求，只是推荐做法）。

例：h2 {font-family: Wedgie, 'Karrank%';}。

5.2 使用@font-face

@font-face的作用是让你在设计中使用自定义的字体。

@font-face {
  font-family: "SwitzeraADF";
  /* descriptor */   
  src: url("f/SwitzeraADF-Regular.otf");
}
h1 {
  font-family: SwitzeraADF, Helvetica, sans-serif;
}  /* property */

@font-face是惰性加载字型的。

5.2.1 必须的描述符

定义字体的全部参数都在@font-face{}结构中编写，这些参数称为描述符（descriptor），与属性十分相似，格式为descriptor: value;。

描述符中有两个是必须的：font-famliy和src。

src为定义的字型提供一个或多个源，多个源之间逗号分隔。字型的源必须与样式表同源。

可以在HTTP首部Access-Control-Allow-Origin设定服务器，允许跨站访问。

@font-face做的是低层定义，是为字体相关的属性服务的。

可以在url()后面加上可选的format()，作用是让用户代理跳过不支持的字体格式，从而减少带宽用量，提升加载速度。使用format()还能为不带有常规扩展名的字体文件指定格式，以防用户代理不识别。

@font-face {
  font-family: "SwitzeraADF";
  src: url("SwitzeraADF-Regular.otf") format("opentype"),
    url("SwitzeraADF-Regular.ttf") format("truetype");
}

使用自定义字体会在刹那间出现未使用指定字体渲染的文本，这一瞬间发生在浏览器加载完页面和CSS布局之后。

建议使用一款高度接近的字体的自定义字体。

当前出现无样式内容的问题已经解决了，相信未来也能顺利解决自定义字体的显示问题。

支持的字体格式值（截止2017年末）。

值	格式
embedded-opentype	EOT(Embedded OpenType)
opentype	OTF(OpenType)
svg	SVG(Scalable Vector Graphics)
truetype	TTF(TrueType)
woff	WOFF(Web Open Font Format)

除了使用url()和format()组合之外，还可以使用local()指定已安装在用户设备中的字体族名称（可以是多个）。借助这个功能可以为本地安装的字体自定义名称。

@font-face {
  font-family: "H";
  src: local("Helvetica"), local("Helvetica Neue");
}

5.2.2 其他字体描述符

自定义字体的注意事项

第一，要有权在网页中使用指定的字体。第二，值不值得使用自定义字体。

字体描述符

描述符	默认值	说明
font-style	normal	在区分常规、斜体和倾斜字型。
font-weight	normal	区分不同的字重（例如加粗）
font-stretch	normal	区分不同的字符宽度（例如紧缩与加宽）
font-variant	normal	区分众多字形变体（例如小号大写字母）
font-feature-settings	normal	直接访问OpenType的低层特性
unicode-range	U+0-10FFFF	定义指定字体中可用的字符范围

这些字体描述符是可选的，不一定@font-face规则中列出。如果没有列出，它的值将被设为默认值。

限制字符范围

unicode-range用于指定制定自定义字体可以应用到哪些字符上。使用符号字体，或者想确保只有特定语言使用指定字型时用得到这个描述符。

5.2.3 组合描述符

把多个描述符组合在一起为字型设定不同的属性。

@font-face {
  font-family: "SwitzeraADF";
  src: url("f/SwitzeraADF-Regular.otf") format("opentype");
}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: bold;
  src: url("f/SwitzeraADF-Bold.otf") format("opentype");
}
@font-face {
  font-family: "SwitzeraADF";
  font-style: italic;
  src: url("f/SwitzeraADF-Italic.otf") format("opentype");
}

5.3 字重

font-weight

取值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值：normal
适用于：所有元素
计算值：其中一个数值或者一个数值加一个相对值
继承性：是
动画性：否

5.3.1 字重的工作方式

每个数字对应的权重至少和前面的数字具有相同的字重。

一个字体族假设的字重分配情况

Light 100，200，300
Regular normal 400
Medium 500
Bold bold 600，700
Extra Bold 800，900

5.3.2 增大字重

把font-weight设置为bolder会设置比父元素font-weight高一级的数字。

p {font-weight: normal;}
p em {font-weight: bolder;}  /* results in 'bold' text */
h1 {font-weight: bold;}
h1 b {font-weight: bolder;}  /* if no bolder face exists, evaluates to '800' */

5.3.3 减小字重

font-weight: lighter;比父元素更细一些。

5.3.4 font-weight描述符

使用font-weight描述符可以为字符指定font-weight属性支持的字重等级。

@font-face {   
  font-family: "SwitzeraADF";
  font-weight: normal;
  src: url("f/SwitzeraADF-Regular.otf") format("opentype");
}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: bold;
  src: url("f/SwitzeraADF-Bold.otf") format("opentype");
}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: 300;
  src: url("f/SwitzeraADF-Light.otf") format("opentype");}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: 500;
  src: url("f/SwitzeraADF-DemiBold.otf") format("opentype");}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: 700;
  src: url("f/SwitzeraADF-Bold.otf") format("opentype");}
@font-face {
  font-family: "SwitzeraADF";
  font-weight: 900;
  src: url("f/SwitzeraADF-ExtraBold.otf") format("opentype");}
h1, h2, h3, h4 {font: 225% SwitzeraADF, serif;}
h1 {font-weight: 900;}
h2 {font-size: 180%; font-weight: 700;}
h3 {font-size: 150%; font-weight: 500;}
h4 {font-size: 125%; font-weight: 300;}

5.4 字号

font-size

取值：xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>
初始值：medium
适用于：所有元素
百分数：根据父元素的字号计算
计算值：一个绝对长度
继承性：是
动画性：是（仅限数字关键字）

font-size属性与渲染结果之间的关系由字体设计者决定。

5.4.1 绝对大小

5.4.1 相对大小

smaller | larger 根据浏览器的换算系数。

5.4.3 百分数和em

百分数和em根据继承自父元素的字号计算。

em {font-size: 120%;}。

5.4.4 字号的继承

CSS中的字号会继承，但继承的是计算得到的值，而不是百分数本身。

显示时舍入

多数现代浏览器在内部维护着小数字号，但渲染引擎不一定会使用。

关键字和等宽文本

字号关键字和继承会导致实际大小缩小。

假设用户没有更改浏览器的偏好设置，medium的默认值一般是16px。

5.4.5 使用长度单位

p.one {font-size: 36pt;}
/* assuming 72dpi, these are all the same thing */
p.two {font-size: 3pc;}
p.three {font-size: 0.5in;}
p.four {font-size: 1.27cm;}
p.five{font-size: 12.7mm;}

5.4.6 自动调整字号(截止2017年末，只有FireFox支持。)

x高度除以字号得到的结果称为高宽比值。字号减小，高宽比值越高，字体越清晰易辩。

font-size-adjust
改变字体族之间的高宽比值
取值：<number>|none|auto
适用于：所有元素
继承性：是
动画性：是

5.5 字形

font-style

取值：italic（倾斜体） | oblique（斜体） | normal
初始值：normal
适用于：所有元素
计算值：指定的值
继承性：是
动画性：否

5.6 字体拉伸

font-streth

取值：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
初始值：normal
适用于：所有元素
继承性：是
动画性：否
备注：有对应的@font-face描述符

5.7 字距调整

font-kerning

取值：auto | normal | none
初始值：auto
适用于：所有元素
继承性：是
动画性：否

5.8 字体变形（截止2017年末没有得到浏览器的广泛支持）

font-variant

取值：normal | none | small-caps | xxx…
初始值：normal
适用于：所有元素
继承性：是
动画性：否
备注：有对应的@font-face描述符（定义字体允许哪些变形）

5.9 字体特性

font-feature-settings

取值：normal | <feature-tag-value>#
初始值：normal
备注：有对应的@font-face描述符（定义字体允许哪些特性）

5.10 字体合成（截止2017年末只有Firefox支持）

font-synthesis

取值：none | weight || style
初始值：weight style
适用于：所有元素
继承性：是
动画性：否

5.11 font属性

将各属性合并到一起。

font

取值：[[ <font-style> || [ normal | small-caps] || <font-weight]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | messagebox | small-caption | status-bar
初始值：参见各单属性
适用于：所有元素
继承性：是
动画性：参见各单属性

font必须要有font-size和font-family。

使用系统字体

在font声明中使用系统字体值：

caption（文字的控件，如按钮）、icon（图标）、menu（菜单）、message-box、small-caption、status-bar。

5.12 字体匹配机制

P211 略

第6章文本属性

文本是内容，而字体是用于显示内容的。

6.1 缩进和行内对齐

块级方向指当前书写模式放置块级元素的方向。行内方向指块级元素中行内元素的书写方向。

6.1.1 缩进文本

text-indent

取值：<length> | <precentage>
初始值：0
适用于：块级元素
百分数：相对于所在块级元素的宽度
计算值：长度值得到绝对长度
继承性：是
动画性：是

text-indent只能用在任何块级元素上。可以使用负值。

6.1.2 文本对齐

text-align

取值：start | end | left | right | center | justify | match-parent | start end
初始值：在CSS3中是start
适用于：块级元素
计算值：指定的值，match-parent除外
继承性：是
动画性：否

text-align不控制元素的对齐方式，只影响元素中的内容。

起边和终边对齐：start和end。

两端对齐：justify。

与父元素一致：match-parent。

6.1.3 对齐最后一行

text-align-last

取值：auto | start | end | left | right | center | justify
初始值：auto
适用于：块级元素
计算值：指定的值
继承性：是
动画性：否

6.2 块级对齐

6.2.1 行的高度

line-height的值与字体高度之差就是行距。line-height定义元素中文本行基线之间的最小距离。

line-height

取值：<number> | <length> | <precentage> | normal
初始值：normal
适用于：所有元素
百分数：相对于元素的字号
计算值：长度和百分数，得到绝对值；否则，是指定的值
继承性：是
动画性：是

行的构成

文本行中的每个元素构成一个内容区，其高度由字体的高度决定。随内容区出现的是一个行内框，如果不考虑其他因素，其高度与内容区完全相等。line-height导致的行距是影响行内框高度的因素之一。

元素的行距等于font-size的计算结果减去line-height的计算结果。行框恰好包围最高那个行内框的顶端和最低那个行内框的底端。

line-height的值

默认值是normal，一般是字体高度的1.2倍左右，因此行框的高度要比元素的font-size值大一些。

行高的继承

使用纯数字时，各元素的行高将根据自身的字号计算。

6.2.2 纵向对齐文本

vertical-align

取值：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage>
初始值：baseline
适用于：行内元素和单元格
百分数：相对元素的line-height值
计算值：百分数和长度值，得到绝对长度；否则是指定的值
继承性：否
动画性：<length>、<percentage>
备注：用在单元格上时，只能取baseline、top、middle和bottom

基线对齐

vertical-align: baseline;元素的基线与父元素的基线对齐。

上标和下标

vertical-align: sub;把元素放在下标处，即元素的基线（对置换元素来说是底边线）低于父元素的基线。

super的作用与sub相反。

底端对齐

vertical: bottom;元素所在行内框的底边与行框的底边对齐。

vertical-align: text-bottom;相对行中文本的底边对齐。

顶端对齐

vertical: top;与bottom相反。

对齐后元素的具体位置取决于行中有什么元素、元素有多高，以及父元素的字号。

中线对齐

middle把行内元素所在方框的中线与父元素基线向上偏移0.5ex处的线对齐（1ex等于父元素的font-size）。

百分数

把元素的基线相对父元素的基线抬升或下沉指定的量（指定的百分数相对于元素自身）。

长度值

元素抬升或下沉声明的距离。

6.3 单词间距和字符间距

6.3.1 单词间距

word-spacing

取值：<length> | normal
初始值：normal
适用于：所有元素
计算值：normal的结果是绝对长度0；否则为指定的具体长度
继承性：是
动画性：是

单词是指两侧有某种空白的非空白字符构成的字符串。

6.3.2 字符间距

letting-spacing

取值：<length> | normal
初始值：normal | 0
适用于：所有元素
计算值：长度值得到绝对长度；否则是normal
继承性：是
动画性：是

letter-spacing属性修改的是字符或字母之间的距离。

letter-spacing可以用来突出强调效果。

6.3.3 对齐方式对间距的影响

word-spacing会受text-align的值的影响。

letter-spacing继承是计算得出的值。

6.4 文本转换

text-transform转变文本的大小写。

text-transform

取值：uppercase | lowercase | capitalize(各个单词首字母大写) | none
初始值：none
适用于：所有元素
计算值：指定的值
继承性：是
动画性：否

6.5 文本装饰

text-decoration

取值：none | [ underline(添加下划线) || overline(文本的上方绘制一条线) || line-through(删除线) ]
初始值：none
适用于：所有元素
计算值：指定的值
继承性：否
动画性：否

6.6 文本渲染效果

指定用户代理在显示文本时应该优先考虑什么方面。

text-rendering

取值：auto(自动平衡) | optimizeSpeed(绘制速度) | optimizeLegibility(清晰度) | geometricPrecision(精准绘制文本)
初始值：auto
适用于：所有元素
继承性：是
动画性：是

6.7 文本阴影

text-shadow

取值：none | [<length> || [<length>(横向偏移) <length>(纵向偏移) <length>(模糊半径)?]#
初始值：none
适用于：所有元素
继承性：否
动画性：是

p.cl1 {color: black; text-shadow: gray 2px 2px 4px;}
p.cl2 {color: white; text-shadow: 0 0 4px black;}
p.cl3 {color: black; text-shadow: 1em 0.5em 5px red, -0.5em -1em hsla(100,75%,25%,0.33);}

6.8 处理空白

white-space影响用户代理对文档源码中空格、换行符和制表符的处理方式。

white-space

取值：normal | nowrap(不换行) | pre(空白不会被忽略) | pre-wrap(空白得以保留，文本行正常换行) | pre-line(空白折叠，保留换行)
初始值：normal
适用于：全部元素（CSS2.1）；块级元素（CSS1和CSS2）
计算值：指定的值
动画性：是
继承性：否

HTML默认会把多个空格压缩成一个空格。

指定制表符的宽度

tab-size

取值：<length> | <integer>
初始值：8
适用于：块级元素
计算值：指定值对应的绝对长度
动画性：是
继承性：是

6.9 换行和断字

hyphens

取值：manual(手动插入连字符&shy处断字) | auto(在合适位置自动断字) | none(禁止断字)
初始值：manual
适用于：所有元素
计算值：指定的值
动画性：是
继承性：否

断字与所用的语言有很大关系

word-break

取值：normal | break-all(任何字符之后换行) | keep-all(禁止在字符之间软换行)
初始值：normal
适用于：所有元素
计算值：指定的值
动画性：是
继承性：是

line-break

取值：auto(正常行为软换行) | loose(采用“最宽松的”换行规则) | normal(采用“最常规的”换行规则) | strict(采用“最严格的”换行规则)
初始值：auto
适用于：所有元素
计算值：指定的值
动画性：是
继承性：是

文本换行

overflow-wrap

取值：normal(单词之间换行) | break-word(在单词的内部换行)
初始值：normal
适用于：所有元素
计算值：指定的值
动画性：是
继承性：是

6.10 书写模式

6.10.1 设定书写模式

writing-mode

取值：horizontal-tb(行内方向为横向，块级方向从上到下) | vertical-rl | vertical-lr
初始值：horizontal-tb
适用于：除表格行组、表格列祖、表格行、表格列、旁注基元素和旁注元素之外的所有元素
计算值：指定的值
动画性：是
继承性：是

6.10.2 改变文本方向

text-orientation

取值：mixed | upright(纵向) | sideways(侧排)
初始值：mixed
适用于：除表格行组、表格列组、表格行、表格列之外的所有元素
计算值：指定的值
动画性：是
继承性：是

第7章视觉格式化基础

7.1 元素框基础

各元素框的中心是内容区域（content area），四周有可选的内边距、边框、轮廓和外边距。

内边距padding和边框border不能为负数。

7.1.1 重要概念概览

常规流动、非置换元素、置换元素、根元素、块级框、行内框、行内块级框。

7.1.2 容纳块（containing block）

容纳块是元素框体的“布局上下文”。每个元素的框体都相对容纳块放置。

根元素对应的是初始容纳块，其尺寸由视区决定，而非根元素中内容的尺寸。

7.2 调整元素的显示方式

display

取值：[ <display-outside> || <display-inside> | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ]
定义：见下
初始值：inline
适用于：所有元素
计算值：指定的值
动画性：否
继承性：否

<display-outside> block | inline | run-in
<display-inside> flow | flow-root | table | flex | grid | ruby
<display-listitem> list-item && <display-outside>? && [ flow | flow-root ]?
<display-internal> …
<display-box> contents | none
<display-legacy> inline-block | inline-list-item | inline-table | inline-flex | inline-grid

7.2.1 改变显示方式

改变的是元素的显示方式，而不是元素的本性。

7.2.2 块级框

默认情况下，块级框的width等于左内边界到右内边界的距离，height同理。

box-sizing

取值：content-box | padding-box | border-box
初始值：content-box
适用于：能设定width或height的所有元素
计算值：指定的值
动画性：否
继承性：否

7.2.3 横向格式化

常规流动方式下块级框各组成部分的横向尺寸始终等于容纳块的宽度。

7.2.4 横向格式化属性

margin-left、boder-left、padding-left、width、padding-right、border-right和margin-right。这七个属性影响块级框的横向布局。这七个属性的值加在一起要等于元素容纳块的宽度，而这一宽度通常为块级元素的父元素的width值。

7.2.5 使用auto

width、margin-left、margin-right能设置auto。

设为auto的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度。

如果三个值不满足元素的总宽度等于容纳块的宽度，会自动设置margin-right。

7.2.6 多个auto

某一边的外边距和width设为auto，设为auto的那个外边距等于0。

三个属性都设置为auto，则两侧的外边距都为0，width等于容纳块宽度。

默认外边距为0，width为auto。

7.2.7 负外边距

由于七个属性加起来=总宽度，所以设为auto的值会被计算。

{margin-left: 10px; width: auto; margin-right: -50px; }父元素width为500px，width为540px。

7.2.8 百分数

边框border不接受百分数，只能设为长度值。

7.2.9 置换元素

width为auto时，置换元素的width等于内容自身的宽度。

如果置换元素的width与自身宽带height不同，height的值会按比例变化，反之亦然。

7.2.10 纵向格式化

元素的内容决定元素的默认高度。内容的高度对高度也有影响。

如果元素的内容比框体高，具体行为取决于overflow属性。

7.2.11 纵向格式化属性

margin-top、border-top、padding-top、height、padding-bottom、border-bottom和margin-bottom。加在一起必须=块级框的容纳块的高度height。

上下margin设为auto会被重置为0。

7.2.12 百分数高度

百分数是相对框体的容纳块的高度而言的。

如果未声明容纳块的高度height，那么百分数高度将被重置为auto。

7.2.13 自动调整高度

默认块级框的高度是最上边那个块级子代元素的border-top外侧到最下边那个块级子代元素的border-bottom外侧之间的距离。

如果块级元素有padding-top或padding-bottom，或者有border-top或border-bottom，那么其高度height是从最上边那个子元素的margin-top的外边界到最下边子元素的margin-bottom的外边界之间的距离；。

7.2.14 折叠纵向外边距（塌陷）

纵向格式化另一个重要特征：相邻的纵向外边距会折叠，较小的外边距会被较大的外边距消去。

为容纳块添加边框或内边距之后，子元素的外边距便包含其中。

7.2.15 负外边距和折叠

7.2.16 列表项目

list-style-position: inside;把记号设在内容区内。

7.3 行内元素

em和a等非置换元素，img置换元素都属于行内元素。

7.3.1 行布局

7.3.2 基本术语和概念

匿名文本：不在任何行内元素中的字符串。

字体框：由字体具体定义，也叫字符框。font-size控制字体框的高度。

内容区：对非置换元素，各字符的字体框连在一起构成的方框；对置换元素，内容区是元素自身的高度加上内外边距和边框。

行距：行距是font-size和line-height之差。

行内框：内容区加上行距得到的方框。对非置换元素，行内框的高度等于line-height的值。

行框：过一行各行内框最高点和最低点的方框。

内容区相当于块级框的内容框。
行内元素的背景填充在内容区加内边距所在的区域里。
行内元素的边框在内容区外的内边距外侧。
非置换行内元素的内边距、边框和外边距在对应的方框上没有纵向效果，即对行内框的高度没有影响。
置换元素的外边距和边框对行内框的高度有影响，进而对元素所在的行框的高度也有影响。

7.3.3 行内格式化

块级元素中的各文本行本身就是行内元素。

为块级元素设定line-height值的作用是为块级元素中的内容设定行框的最小高度。

7.3.4 行内非置换元素

行内框的构成

对非置换元素或匿名文本来说，font-size值决定内容区的高度。

如果行内非置换元素的font-size为15px、line-height为21px，那么二者之差为6像素。6像素一般添加到内容区上部，一半添加到内容区下部，得到行内框。

在行内非置换元素中，padding不影响内容区的高度，也不影响行内框的高度。但是左右padding会影响元素内容的布局。

改变断行行为
box-decoration-break

取值：slice | clone
初始值：slice
适用于：所有元素
计算值：指定的值
动画性：否
继承性：否

7.3.5 行内置换元素

行内置换元素自身是有高度和宽度的。置换元素的行内框包含整个元素，包括内容、padding、border和margin。

padding和border会影响行框的高度，因为它们是行内置换元素行内框的一部分。

7.3.6 行内块级元素

inline-block行内块级元素的底边默认是与文本行的基线对齐，内容被视作块级元素进行格式化（width和height）。

行内块级元素相当于置换元素。

7.3.7 流动显示方式

block和inline等关键字表示外部显示类型，指明显示框与周围元素的关系。flow关键字表示内部显示类型，指明元素内部的布局情况。

display: inline table表示元素内部按照表格布局，而处理与周围内容的关系时则作为行内元素。

display: flow-root生成块级框，内部会生成新的块级格式化上下文，可以应用到根元素。

display属性的新旧值对照

旧值	新值
block	block flow
inline	inline flow
inline-block	inline flow-root
list-item	list-item block flow
table	block table
inline-table	inline table
flex	block flex
inline-flex	inline flex
grid	block grid
inline-grid	inline grid

7.3.8 contents显示方式

display: contents元素不再参与页面的格式化，相当于把它的子元素提升到当前的层级。

7.3.9 计算值

对浮动和绝对定位的元素来说，display的计算值由声明的值确定。

第8章内边距、边框、轮廓和外边距

8.1 基本元素框

每个元素都会生成一个矩形框，称为元素框（element box）。

8.1.1 宽度和高度

width和height。无法应用到行内非置换元素上。

宽度
width

取值：<length> | <percentage> | auto
初始值：auto
适用于：除行内非置换元素、表格中的行和行组之外的所有元素。
百分数：相对容纳块的宽度
计算值： auto和百分数为指定的值，否则为绝对长度
动画性：是
继承性：否

高度
height

取值：<length> | <percentage> | auto
初始值：auto
适用于：除行内非置换元素、表格中的行和行组之外的所有元素。
百分数：相对容纳块的高度
计算值： auto和百分数为指定的值，否则为绝对长度
动画性：是
继承性：否

元素的高度由内容决定。正常流动模式下的元素很少直接设定高度。

8.2 内边距

内边距
padding

取值： [<length> | <percentage>] |{1, 4}
初始值：简写形式没有
适用于：所有元素
百分数：相对容纳块的宽度
计算值：参见各单独属性
动画性：是
继承性：否
备注：pading不能取负值

百分数值相对父元素内容区的宽度计算。

行内非置换元素的内边距对元素的行高没有影响。

内边距对行内非置换元素的上下和左右影响不一样。

行内置换元素的内边距对行高有影响。

8.3 边框

边框宽度的默认值为medium，默认样式为none。默认颜色是元素自身的前景色，如果没有为边框声明颜色，默认与元素中的文本颜色相同。

元素的背景延伸到边框的外边界。

边框的式样
border-style

取值： [ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]{1,4}
初始值：简写形式没有
适用于：所有元素
计算值：参见各单独属性
继承性：否
动画性：否

边框宽度
border-width

取值： [ thin | medium | thick | <length> ]{1,4}
初始值：简写形式没有
适用于：所有元素
计算值：参见各单独属性
继承性：否
动画性：是

透明边框，把颜色设为transparent。

整个边框
border

取值： [ <border-width> || <border-style> || <border-color> ]
初始值：参见各单独属性
适用于：所有元素
计算值：指定的值
继承性：否
动画性：参见各单独属性

边框和内边距一样对行内非置换元素的行高没有影响。

圆角边框
border-radius

取值： [ <length> | <precentage> ]{1, 4} [ / [ <length> | <precentage> ]{1, 4} ]?
初始值：0
适用于：除表格内的元素之外的所有元素
计算值：两个绝对长度或百分数值
百分数：相对边框框的尺寸计算
继承性：否
动画性：是

8.3.8 图像边框

图像边框
border-image-source

取值：none | <imaeg>
初始值：none
适用于：除border-collapse属性的值为collapse的表格内的元素之外的所有元素
计算值： none或图像的绝对URL
继承性：否
动画性：否

需要把border-style设为none以外的值。

border-image-slice

取值：[ <nubmer> | <percentage> ]{1, 4} && fill?
初始值：100%
适用于：除border-collapse属性的值为collapse的表格内的元素之外的所有元素
百分数：相对边框图像的尺寸
计算值： 4个数字或百分数，以及可选的fill关键字
继承性：否
动画性：<nubmer>,<percentage>

图像边框宽度
border-image-witdh

图像边框外侧推
border-image-outset

图像边框重复
border-image-repeat

取值：[ stretch | repeat | round | space ]{1, 2}

简写
border-image

取值：border-image-source || border-image-slice [ / border-image-width | / border-image-width? / border-iamge-outset ]? || border-image-repeat

8.4 轮廓

轮廓一般直接绘制在边框外侧。

轮廓与边框的区别：

轮廓不占空间。
轮廓可以不是矩形。
用户代理通常在元素处于:focus状态时渲染轮廓。
轮廓无法单独为一边设置独特的轮廓。

8.4.1 轮廓式样

outlint-style

不支持简写形式。

8.4.2 轮廓宽度

outline-width

和border-width同理。

整个轮廓的宽度必须相等，不能为某一边设定不同的宽度。

8.4.3 轮廓颜色

outline-color

取值：<color> | invert（默认值）（颜色反转）（兼容性差）

8.4.4 唯一的轮廓简写属性

8.4.4 简写

outline

取值: [ <outline-color> || <outlint-style> || <outline-width> ]

8.4.5 轮廓与边框的区别

轮廓对布局完全没有影响。
轮廓不一定是矩形，也不一定是连续的。

8.5 外边距

外边距在元素周围添加额外的空白。空白一般指其他元素不能共存的区域，在这片区域中，父元素的背景是可见的。

margin

取值：[ <length> | <percentage> | auto ]{1, 4}
初始值：未定义
适用于：所有元素
百分数：相对容纳块的宽度计算
继承性：否
动画性：是

外边距上下对行内非置换元素的行高没有影响，左右有影响。

外边距对行内置换元素的上下左右都有影响。

第9章颜色、背景和渐变

9.1 颜色

前景指元素的文本，也包括元素四周的边框。使用color属性或者使用一些边框属性设置边框颜色能直接影响元素的前景色。

9.1.1 前景色

color

初始值：用户代理指定
适用于：所有元素
继承性：是
动画性：是

9.1.2 对边框的影响

边框颜色border-color默认取前景色。

9.1.3 对表单元素的影响

CSS无法装饰置换元素的内容。

表单元素的样式极难调整。

9.2 背景

背景区域延伸到边框的外边界。

9.2.1 背景色

background-color

初始值：transparent
适用于：所有元素
继承性：否
动画性：是

9.2.2 裁剪背景

background-clip

取值： [ border-box | padding-box | content-box | text ]#
初始值：border-box
适用于：所有元素
继承性：否
动画性：否

background-clip对根元素没有效果。

9.2.3 背景图

background-image

取值：<image># | none
初始值:：none
适用于：所有元素
继承性：否
动画性：否

使用背景图时最好同时指定背景色。

9.2.4 背景定位

backgroud-position

取值：<position>#
初始值：0% 0%
适用于：块级元素和置换元素
百分数：指代元素或源图像上相应的点
计算值：指定<length>时是绝对长度偏移
继承性：否
动画性：是

9.2.5 改变定位框

background-origin

取值：[ border-box | padding-box | content-box ]#
初始值：padding-box
适用于：所有元素
继承性：否
动画性：否

9.2.6 背景重复方式（或不重复）

background-repeat

取值：<repeat-style>#
展开：<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
初始值：repeat
适用于：所有元素
继承性：否
动画性：否

9.2.7 背景粘附

background-attachment

取值：[ scroll | fixed | local ]#
初始值：scroll
适用于：所有元素
继承性：否
动画性：否

9.2.8 控制背景图的尺寸

background-size

取值：[[<length> | <percentage> | auto]{1,2} | cover | contain]#
初始值：auto
适用于：所有元素
继承性：否
动画性：是

如果背景涉及缩放，强烈建议使用SVG。

9.2.9 写为一个属性

background

取值：image position size repeat attachment box box

这些值顺序没有严格要求，但有3个限制：
background-size值必须紧随background-position后面，用（/）隔开。
横向值在前，纵向值在后。
同时为origin和clip提供值，前一个分配个origin，后一个是clip。一个值的话同时设定origin和clip。

9.2.10 多个背景

唯一限制是不能为background-color指定多个值。

多个背景下，声明的值将一直重复，直到全部补足为止。

section {
    background-image: url(i/bg01.png), url(i/bg02.gif), url(i/bg03.jpg);
    background-position: top right, left center, 50% 100%;
    background-repeat: no-repeat, no-repeat, repeat-x;
    padding: 2em 4em;
}

9.3 渐变

渐变指一个颜色到另一个颜色的平滑过渡。渐变是图像。

9.3.1 线性渐变

渐变的默认方向是to bottom。

线性渐变的句法：

liner-gradient([[<angle> | to <side-or-quadrant> ]?]? [ <color-stop>(色标定位) [, <color-hint>(中色点)]? ]# ,)

#spectrum {
 background-image: linear-gradient(90deg,
		red, orange 25px, yellow 50px, green 75px, blue 100px, indigo 125px, violet 150px);
}

#spectrum {
    background-image: linear-gradient(90deg,
		red, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%);
}

#ex01 {background: linear-gradient(to right, #000 25%, rgb(90%,90%,90%) 75%);}
#ex02 {background: linear-gradient(to right, #000 25%, 33%, rgb(90%,90%,90%) 75%);}
#ex03 {background: linear-gradient(to right, #000 25%, 67%, rgb(90%,90%,90%) 75%);}
#ex04 {background: linear-gradient(to right, #000 25%, 25%, rgb(90%,90%,90%) 75%);}
#ex05 {background: linear-gradient(to right, #000 25%, 75%, rgb(90%,90%,90%) 75%);}

9.3.2 径向渐变

radial-gradient([[ <shape> || <size> ] at <position>]? , | at <position>, ]? [ <color-stop> [, <color-hint>? ] [, <color-stop>]+)

9.3.3 处理渐变图像

渐变是图像，所以可以通过背景属性设定渐变。

使用渐变三点优势：

所占字节小。
减少额外请求。
可以不断修改调整。

9.3.4 循环渐变

repeating-linear-gradient循环线性渐变

repeating-radial-gradient循环径向渐变

9.4 盒子投影

box-shadow

取值：none | [inset? && <length>{2,4} && <color>?]#
初始值：none
适用于：所有元素
继承性：否
动画性：是
备注：可以创建多个投影，用逗号分隔

/* 第三个值是模糊距离，第四个值是展开距离 */
.box:nth-of-type(1) {box-shadow: 1em 1em 2px rgba(0,0,0,0.5);}
.box:nth-of-type(2) {box-shadow: 2em 0.5em 0.25em rgba(128,0,0,0.5);}
.box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5);}
.box:nth-of-type(4) {box-shadow: -10px 25px 5px -5px rgba(0,128,128,0.5);}
.box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5);}
.box:nth-of-type(6) {box-shadow: 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);}
.box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5);}

.box:nth-of-type(1) {box-shadow: inset 1em 1em 2px rgba(0,0,0,0.5);}
.box:nth-of-type(2) {box-shadow: inset 2em 0.5em 0.25em rgba(128,0,0,0.5);}
.box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5) inset;}
.box:nth-of-type(4) {box-shadow: inset -10px 25px 5px -5px  rgba(0,128,128,0.5);}
.box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5) inset;}
.box:nth-of-type(6) {box-shadow: inset 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);}
.box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5) inset;}

Leon_Chenl

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
《CSS权威指南上册》学习笔记

文章目录第1章 CSS和文档1.1 Web样式简介1.2 元素1.2.1 置换元素和非置换元素1.2.2 元素的显示方式1.3 把CSS应用到HTML上1.3.1 link标签1.3.2 style元素1.3.3 @import指令1.3.4 HTTP链接1.3.5 行内样式1.4 样式表中的内容1.4.1 标记1.4.2 规则的结构1.4.3 厂商前缀1.4.4 处理空白1.4.5 CSS注释1.5 媒体查询1.5.1 用法1.5.2 简单的媒体查询1.5.3 媒体类型1.5.3 媒体描述符1.5.5 媒
复制链接

扫一扫