点击链接：http://note.youdao.com/noteshare?id=02dbcb3ade7cd5a7fe2c327fc6404ee0

下面是直接复制粘贴，没有图片且乱版

理解CSS
1.CSS标准化
一开始：具有相同名称的属性采用不同的方式处理，只能用浏览器特定的属性访问浏览器特定的功能。
规范：CSS3
2.盒模型
CSS中的一个基本概念是盒模型（box model）。可见元素会在页面中占据一个矩形区域，该区域就是元素的盒子（box），由四部分组成。

1.元素盒子有两个部分是可见的：内容和边框。
2.内边框：内容和边框之间的空间。
3.外边框：边框和页面上其他元素之间的空间。

元素还可以包含其他元素。
父元素的内容盒子称为子元素的块容器（container block），通常称为容器。

3.选择器简明参考
CSS选择器
选择器说明

```
  		选取所有元素
```

选取指定类型的元素
. 选取指定类的元素
# 选取id属性为指定值的元素
[attr] 选取定义了attr属性，且属性值任意的元素
[attr=“val”] 选取定义了attr属性，且属性值为val的元素
[attr^=“val”] 选取定义了attr属性，且属性值以val字符串打头的元素
[attr$=“val”] 选取定义了attr属性，且属性值以val字符串结尾的元素
[attr*=“val”] 选取定义了attr属性，且属性值包含val字符串的元素
[attr~=“val”] 选取定义了attr属性，且属性值包含多个值，而其中一个为val的元素
[attr|=“val”] 选取定义了attr属性，且属性值是以连字符分割的一串值，而第一个为val的元素
<选择器>,<选择器> 选取同时匹配所有选择器的元素
<选择器> <选择器> 目标元素为匹配第一个选择器的元素的后代，且匹配第二个选择器
<选择器>><选择器> 目标元素为匹配第一个选择器的元素的直接后代，且匹配第二个选择器
<选择器>+<选择器> 目标元素紧跟在匹配第一个选择器的元素之后，且匹配第二个选择器
<选择器>~<选择器> 目标元素跟在匹配第一个选择器的元素之后，且匹配第二个选择器
::first-line 选取块级元素文本的首行
::first-letter 选取块级元素文本的首字母
:before 在选取元素之前或之后插入内容
:after
:root 选取文档中的根元素
:first-child 选取元素的第一个子元素
:last-child 选取元素的最后一个子元素
:only-child 选取元素的唯一一个子元素
:only-of-type 选取属于父元素的特定类型的唯一子元素
:nth-child(n) 选取父元素的第n个子元素
:nth-last-child(n) 选取父元素的倒数第n个子元素
:nth-of-type(n) 选取属于父元素的特定类型的第n个子元素
:nth-last-of-type(n) 选取属于父元素的特定类型的倒数第n个子元素
:enabled 选取已启用的元素
:disabled 选取被禁用的元素
:checked 选取所有选中的复选框和单选按钮
:default 选取默认元素
:valid 选取基于输入验证判定的有效或者无效的input元素
:invalid
:in-range 选取被限定在指定范围之内或者之外的input元素
:out-of-range
:required 根据是否允许使用required属性选取input元素
:optional
:link 选取未访问的链接元素
:visited 选取用户已访问的链接元素
:hover 选取鼠标指针悬停在其上面的元素
:active 选取当前被用户激活的元素，这通常意味着用户即将点击该元素
:focus 选取获得焦点的元素
:not(<选择器>) 否定选择（如选择所有不匹配<选择器>的元素）
:empty 选取不包含任何子元素或文本的元素
:lang(<语言>) 选取lang属性为指定值的元素
:target 选取URL片段标识符指向的元素

4.属性简明参考
1.边框和背景属性
属性说明
background 设置所有背景值的简写属性
background-attachment 设置元素的背景附着属性，决定背景图片是否随页面一起滚动
background-clip 设置元素的背景颜色和图像的裁剪区域
background-color 设置背景颜色
background-image 设置元素背景图像
background-origin 设置背景图像绘制的起始位置
background-position 设置背景图像在元素盒子中的位置
background-repeat 设置背景图像的重复方式
background-size 设置背景图像的绘制尺寸
border 为所有边界设置所有边框宽度的简写属性
border-bottom 为所有下边框设置宽度的简写属性
border-bottom-color 为所有下边框设置颜色
border-bottom-left-radius 将边框左下角设置为圆角
border-bottom-right-radius 将边框右下角设置为圆角
border-bottom-style 设置元素下边框的样式
border-bottom-width 设置元素下边框的宽度
border-color 设置四条边框的颜色
border-image 使用图像作为边框的简写属性
border-image-outset 指定图像向边框盒外部扩展的区域
border-image-repeat 指定边框图像的缩放和重复方式
border-image-slice 指定边框图像的切割方式
border-image-source 设置边框图像的来源路径
border-image-width 设置边框图像的宽度
border-left 设置元素左边框的简写属性
border-left-color 设置左边框的颜色
border-left-style 设置左边框的样式
border-left-width 设置左边框的宽度
border-radius 指定圆角边框的简写属性
border-right 设置元素右边框的简写属性
border-right-color 设置右边框的颜色
border-right-style 设置右边框的样式
border-right-width 设置右边框的宽度
border-style 设置所有边框样式的简写属性
border-top 设置上边框的简写属性
border-top-color 设置上边框的颜色
border-top-left-radius 将边框左上角设置为圆角
border-top-right-radius 将边框右上角设置为圆角
border-top-style 设置上边框的样式
border-top-width 设置上边框的宽度
border-width 设置四个边框的宽度
box-shadow 设置元素的一个或者多个阴影效果
outline-color 设置元素边框外围轮廓线的颜色
outline-offset 设置轮廓距离元素边框边缘的偏移量
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
outline 在一条声明中设置轮廓的简写属性

2.盒模型属性
基本的盒子属性
选择器说明
box-sizing 设置要应用盒子尺寸相关属性的元素
clear 设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素
display 设置元素盒子的类型
float 将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界
height 设置元素盒子的高度
margin 设置元素盒子四个外边距宽度的简写属性
margin-bottom 设置盒子下外边距的宽度
margin-left 设置盒子左外边距的宽度
margin-right 设置盒子右外边距的宽度
margin-top 设置盒子上外边距的宽度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
overflow 设置内容横向和竖向溢出盒子时处理方式的简写属性
overflow-x 设置内容横向溢出盒子时的处理方式
overflow-y 设置内容竖向溢出盒子时的处理方式
padding 设置元素盒子四个内边距宽度的简写属性
padding-bottom 设置盒子下内边距的宽度
padding-left 设置盒子左内边框的宽度
padding-right 设置盒子右内边框的宽度
padding-top 设置盒子上内边框的宽度
visibility 设置元素的可见性
width 设置元素的宽度

3.布局属性
选择器说明
bottom 设置元素下外边距边界与包含块下边界之间的偏移
column-count 指定多列布局的列数
column-fill 多列布局中列与列之间的内容如何分布
column-gap 指定多列布局中列与列之间的间隔
column-rule 多列布局中定义列与列之间的规则的简写属性
column-rule-color 设置多列布局中的颜色规则
column-rule-style 设置多列布局中的样式规则
column-rule-width 设置多列布局中的宽度规则
columns 在多列布局中设置列数和列宽度的简写属性
column-span 指定多列布局中元素能跨多少列
column-width 指定多列布局中列的宽度
display 指定元素在页面上的显示方式
flex-align 它们都是由弹性盒子布局定义的，目前还没有实现
flex-direction
flex-order
flex-pack
left 设置元素左外边距边界与包含块左边界之间的偏移
position 设置元素的定位方法
right 设置元素右外边距边界与包含块右边界之间的偏移
top 设置元素上外边距边界与包含块上边界之间的偏移
z-index 设置定位元素的堆叠顺序

4.文本属性
属性说明
@font-face 指定网页使用的字体
direction 指定文本方向
font 在一条声明中设置文本字体、大小和颜色的简写属性
font-family 指定文本所用的字体系列，排在前面的优先使用
font-size 指定字体大小
font-style 指定采用正常字体、斜体还是倾斜字体
font-variant 指定字体是否以小型大写字母显示
font-weight 设置文本粗细
letter-spacing 设置字母间距
line-height 设置行高
text-align 设置文本对齐方式
text-decoration 规定添加到文本的修饰（如下划线）
text-indent 规定文本块中首行文本的缩进
text-justify 设置文本对齐方式
text-shadow 指定文本块的阴影效果
text-transform 控制文本块字母大小写
word-spacing 指定单词间距

5.过渡、动画和变换属性
属性说明
@keyframes 为动画指定一个以上的关键帧
animation 设置动画的简写属性
animation-delay 指定动画开始前的延迟时间
animation-direction 指定动画重复播放时的播放方向
animation-duration 指定动画持续时间
animation-iteration-count 指定动画的循环次数
animation-name 指定用于动画的关键帧集合的名称
animation-play-state 指定动画状态（播放或暂停）
animation-timing-function 指定关键帧之间计算属性值的函数
transform 指定应用于元素的变换
transform-origin 指定元素变换的起点
transition 指定CSS属性过渡效果的简写属性
transition-delay 指定触发过渡的延迟时间
transition-duration 指定过渡的持续时间
transition-property 指定带有过渡效果的属性
transition-timing-function 指定过渡期间计算中间属性值的函数

6.其他属性
属性说明
border-collapse 指定表格相邻单元格的边框的显示样式
border-spacing 指定相邻单元格的边框的距离
caption-side 指定表格标题的位置
color 设置元素的前景色
cursor 指定光标的形状
empty-cells 指定是否显示表格中的空单元格
list-style 设置列表样式的简写属性
list-style-image 指定列表项标记使用的图像
list-style-position 指定列表项标记相对于列表项内容的位置
list-style-type 指定列表项标记的类型
opacity 设置元素的透明度
table-layout 指定表格单元格、行和列的算法规则

使用CSS选择器（第Ⅰ部分）
CSS选择器的作用：找出某类元素。
1.使用CSS基本选择器
进行比较宽泛的选择。
1.选择所有元素
*：通用选择器，匹配文档中的所有元素，最基本的选择器，少使用。
例：使用通用选择器

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.根据类型选择元素
指定元素类型为选择器可以选取一个文档中该元素的所有实例。
例：使用元素类型选择器

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.根据类选择元素
类选择器采用全局属性class匹配指定类的元素。
例：根据类选择元素

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：
1.选择器.class2：选中指定class2的所有类型的元素。
2.这个选择器两种表示形式：
①使用通用选择器：*.class2。
②不使用通用选择器：.class2.
3.将与指定类匹配的元素限定为一种类型：将通用选择器换为元素类型，如a.class2。
例：使用类选择器匹配单一元素类型

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.根据ID选择元素
使用ID选择器可根据全局属性id的值选择元素。
HTML文档中元素的id属性的值必须唯一。
使用ID选择器，查找的必定是单个元素。
例：使用id选择器

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：使用元素的style属性可以达到同样的效果，不过只有跟其他选择器组合使用，才能真正排上用场。

5.根据属性选择元素
使用属性选择器能基于属性的不同方面匹配属性。
1.使用通用选择器可以匹配具有符合指定条件属性的所有元素（或指定类型的所有元素）。
2.常用属性选择器：将选择条件放到[和]字符之间。
例：使用元素属性选择器

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：最简单的属性选择器，它匹配的是所有具有href属性的元素，而不管属性具体值是什么。

元素属性选择器的条件
条件说明
[attr] 选择定义attr属性的元素，忽略属性值
[attr=“val”] 选择定义attr属性，且属性值为val的元素
[attr^=“val”] 选取定义了attr属性，且属性值以val字符串打头的元素
[attr$=“val”] 选取定义了attr属性，且属性值以val字符串结尾的元素
[attr*=“val”] 选取定义了attr属性，且属性值包含val字符串的元素
[attr~=“val”] 选取定义了attr属性，且属性值包含多个值，而其中一个为val的元素
[attr|=“val”] 选取定义了attr属性，且属性值是以连字符分割的一串值，而第一个为val的元素

PS：最后两个条件：
1.处理支持多个值且不同的值用空格分割的属性会用到~=条件，如全局属性class。
2.处理一个属性中包括多条用连字符分割的信息用|=条件，如全局属性lang。

例：基于多个属性值中的一个选择元素

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：使用|=属性条件

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.复合选择器
组合使用不同的选择器可以匹配更特定的元素。
1.并集选择器
创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。
例：创建并集选择器

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.后代选择器
用于选择包含在其他元素中的元素。
1.先应用第一个选择器，再从匹配元素的后代中找出匹配第二个选择器的元素。
2.后代选择器会匹配任意包含在匹配第一个选择器的元素中的元素，而不仅是直接子元素。
例：选择后代

*测试 Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：更复杂的后代选择器示例

Exmple

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

3.选择子元素
子代选择器跟后代选择器很像，不过只选择匹配元素中的直接后代。
例：选择子元素

Exmple

Name	City
Adam Freeman	London
Joe Smith	New York
Anne Jones	Paris

I like apples and oranges.

Name	City
Peter Pererson	Boston
Chuck Fellows	Paris
Jane Firth	Paris

4.选择兄弟元素
使用相邻兄弟选择器可以选择紧跟在某元素之后的元素。
例：使用相邻兄弟选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google

普通兄弟选择器匹配的元素在指定元素之后，但不一定相邻。
例：使用普通兄弟选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website Visit Google

3.使用伪元素选择器
伪选择器分两种：伪元素和伪类。
1.使用::first-line选择器
::first-line选择器匹配文本块的首行。
例：使用::first-line伪元素选择器

Example

Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

PS：伪元素选择器也可以作为修饰符跟其他选择器一块使用。
例：选中p元素的首行
p::first-line作为选择器

2.使用::first-letter选择器
选择文本块的首字母。
例：使用::first-letter伪元素选择器

Example

Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,and dedicated to the proposition that all men are created equal.

I like apples and oranges.

Visit the W3C website

3.使用:before和:after选择器
会生成内容，并将其插入文档。
:before选择器：将内容添加到元素前面。
:after选择器：与:before类似，不过将内容添加到元素后面。
例：使用:before和:after选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

PS：content属性只能跟伪选择器一起使用。

4.使用CSS计数器
:before和:after选择器经常跟CSS计数器特性一起使用，结合两者可生成数值内容。
例：使用CSS计数器特性

Example Visit the Apress website

I like apples and oranges.

I also like mangos and cherries.

Visit the W3C website

PS：要创建计数器，需要使用专门的counter-reset属性为计数器设置名称。
counter-reset：paracount;
初始化名为paracount的计数器，将它的值设置为1。
counter-reset：paracount 10;
将值设置为指定的初始值，在计数器名称后面添加一个数字。
counter-reset：paracount 10 othercounter;
创建两个计数器：一个名为paracount，初始值为10；另一个名为othercounter，初始值为1。
content：counter(paracount)". “;
计数器初始化后就能够作为content属性的值，跟:before和:after选择器一起使用来指定样式。
这条声明用在包含:before的选择器中，其效果是将当前计数器的值呈现在选择器匹配的所有元素之前，此处，还要在相应的值后面追加一个句点和空格。
计数器的值默认表示为十进制整数，不过，也可以指定其他数值格式：
content：counter(paracount，lower-alpha)”. ";
lower-alpha参数：指定数值样式。这个参数可以是list-style-type属性支持的任意值。
counter-increment：paracount;
counter-increment属性：专门用来设置计数器增量，该属性的值是要增加计数器的名称。
计数器默认增量为1。
counter-increment：paracount 2;
将计数器增量设置为指定数。

使用CSS选择器（第Ⅱ部分）
伪类：不是直接针对文档元素的，而是为你基于某些共同特征选择元素提供方便。
1.使用结构性伪类选择器
能够根据元素在文档中的位置选择元素。
这类选择器都有一个冒号字符前缀（：），例如：empty。
它们可以单独使用，也可以跟其他选择器组合使用，如p：empty。
1.使用根元素选择器
：root选择器匹配文档中的根元素。返回html元素。
例：使用：root选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用子元素选择器
匹配直接包含在其他元素中的单个元素。
子元素选择器
选择器说明
:first-child 选择元素的第一个子元素
:last-child 选择元素的最后一个子元素
:only-child 选择元素的唯一子元素
:only-of-type 选择元素指定类型的唯一子元素

1.使用:first-child选择器
:first-child选择器匹配由包含它们的元素（即父元素）定义的第一个子元素。
例：使用:first-child选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

例：组合使用:first-child选择器和其他选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:last-child选择器
:last-child选择器匹配由包含它们的元素定义的最后一个元素。
例：使用:last-child选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:only-child选择器
:only-child选择器匹配父元素包含的唯一子元素。
例：使用:only-child选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.使用:only-of-type选择器
:only-of-type选择器匹配父元素定义类型的唯一子元素。
例：使用:only-of-type选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:nth-child选择器
:nth-child选择器：可以指定一个索引以匹配特定位置的元素。
nth-child选择器
选择器说明
:nth-child(n) 选择父元素的第n个子元素
:nth-last-child(n) 选择父元素的倒数第n个子元素
:nth-of-type(n) 选择父元素定义类型的第n个子元素
:nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素

这类选择器都带有一个参数，是你感兴趣的元素的索引，索引从1开始。
例：使用:nth-child选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用UI伪类选择器
使用UI伪类选择器可以根据元素的状态匹配元素。
UI选择器
选择器说明
:enabled 选择启用状态的元素
:disabled 选择禁用状态的元素
:checked 选择被选中的input元素（只用于单选按钮和复选框）
:default 选择默认元素
:valid 根据输入验证选择有效或者无效的input元素
:invalid
:in-range 选择在指定范围之内或者之外受限的input元素
:out-of-range
:required 根据是否允许:required属性选择input元素
:optional

1.选择启用或禁用元素
有些元素有启用或者禁用状态，这些元素一般是用来收集用户输入的。
:enabled和:disabled选择器不会匹配没有禁用状态的元素。
例：使用:enabled选择器

Example This is an enabled textarea This is a disabled textarea

2.选择已勾选的元素
使用:checked选择器可以选中由checked属性或者用户勾选的单选按钮或者复选框。
例：使用:checked选择器

Example

Do you like apples: This will go red when checked

3.选择默认元素
:default选择器从一组类似的元素中的选择默认元素。例如，提交按钮总是表单的默认按钮。
例：使用:default元素选择器

Example

Name:

Submit Vote Reset

4.选择有效和无效的input元素
:valid和:invaild选择器分别匹配符合和不符合它们的输入验证要求的input元素。

Example

Name:

City:

Submit

5.选择限定范围的input元素
关于输入验证的一种具体程度更高的变体是选择值限于指定范围的input元素。
:in-range选择器：匹配位于指定范围内的input元素。
:out-of-range选择器：匹配位于指定范围之外的input元素。
例：使用:in-range和:out-of-range选择器

Example

$ per unit in your area:

6.选择必需和可选的input元素
:required选择器：匹配具有required属性的input元素，这能够确保用户必需输入与input元素相关的值才能提交表单。
:optional选择器：匹配没有required属性的input元素。
例：选择必需和可选的input元素

Example

$ per unit in your area: $ per unit in your area:

3.使用动态伪类选择器
它们根据条件的改变匹配元素，是相对于文档的固定状态来说的。
1.使用:link和:visited选择器
:link选择器：匹配超级链接。
:visited选择器：匹配用户已访问的超级链接。
对于用户访问过的链接，可在浏览器中设置保留已访问状态的时间。当用户清除浏览器的历史纪录。或者历史记录自然超时，链接会返回未访问状态。
例：使用:link和:visited选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:hover选择器
:hover选择器：匹配用户鼠标悬停在其上的任意元素。
鼠标在HTML页面内移动时，选中的元素样式会发生改变。
例：使用:hover选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

3.使用:active选择器
:active选择器：匹配当前被用户激活的元素。
浏览器依然可以自行决定如何诠释激活，但多数浏览器会在鼠标点击（在触摸屏上是手指按压）的情况下使用这个选择器。
例：使用:active选择器

Example Visit the Apress website

I like apples and oranges.

Hello

4.使用:focus选择器
最后一个动态伪类选择器是：focus选择器，它匹配当前获得焦点的元素。
例：使用:focus选择器

Example Name:

City:

4.其他伪类选择器
1.使用否定选择器
:not选择器：否定选择器可以对任意选择取反。
例：使用否定选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

2.使用:empty选择器
:empty选择器：匹配没有定义任何子元素的元素。

3.使用:lang选择器
匹配基于lang全局属性值的元素。
例：使用:lang选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

4.使用:target选择器
匹配URL片段标识符指向的元素。
例：使用:target选择器

Example Visit the Apress website

I like apples and oranges.

Visit the W3C website

使用边框和背景
1.应用边框样式
简单边框有三个关键属性：
border-width：设置边框的宽度。
border-style：设置绘制边框使用的样式。
border-color：设置边框的颜色。

例：定义简单的边框

Example

There are lots of different kinds of fruit -there are over 500 varieties of banana alone.By the we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

1.定义边框宽度
border-width属性的取值
值说明
<长度> 将边框宽度值设为以CSS度量单位（如em、px、cm）表达的长度值
<百分数> 将边框宽度值设为边框绘制区域的宽度的百分数
Thin 将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义的，不过，所有浏览器中这三
medium 个值代表的宽度依次增大。
thick

2.定义边框样式
border-style属性的取值
值说明
none 没有边框
dashed 破折线式边框
dotted 圆点线式边框
double 双线式边框
groove 槽线式边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框

3.为一条边应用边框样式
特定边的边框属性
属性说明值
border-top-width 定义顶边跟通用属性的值一样
border-top-style
border-top-color
border-bottom-width 定义底边跟通用属性的值一样
border-bottom-style
border-bottom-color
border-left-width 定义左边跟通用属性的值一样
border-left-style
border-left-color
border-right-width 定义右边跟通用属性的值一样
border-right-style
border-right-color

例：使用特定边边框属性

Example

4.使用border简写属性
我们也可以不用分开设置样式、宽度和颜色，而使用简写属性一次搞定。
border简写属性
属性说明值
border 设置所有边的边框 <宽度><样式><颜色>
border-top 设置一条边的边框 <宽度><样式><颜色>
border-bottom
border-left
bottom-right

可以在一行中指定宽度、样式、颜色的值从而为这些属性设置值，也可以用空格隔开。
例：使用border简写属性

Example

5.创建圆角边框
可以使用边框的radius特性创建圆角边框。
圆角边框属性
属性说明值
border-top-left-radius 设置一个圆角一对长度值或百分数值，百分数跟边框盒子的宽
border-top-right-radius 度和高度相关
border-bottom-left-radius
border-bottom-right-radius
border-radius 一次设置四个角的简写属性一对或四队长度值或百分数值，由/字符分割

例：创建圆角边框

Example

使用border-radius简写属性可以为边框的四个角指定一个值，或者在一个值中包含四个值。
例：使用border-radius简写属性

Example

PS：每个段落分别有一个圆角边框声明。
1.第一条声明只指定了两个值，这一对值会应用到边框的四个角上。
注意：要用/字符将水平半径和垂直半径隔开。
2.第二条声明指定了8个值。
①.第一组四个值分别是四个角的水平半径。
②.第二组四个值是相应的垂直半径。

6.将图像用做边框
边框不仅限于用border-style属性定义的样式，我们可以使用图像为元素创建真正的自定义边框。
配置图像边框各个方面的属性有5个，外加一个可以在一条声明中配置所有特性的简写属性。
border-image属性
属性说明值
border-image-source 设置图像来源 none或者url（<图像>）
border-image-slice 设置切分图像的偏移 1~4个长度值或者百分数，受图像的宽度和高度影响
border-image-width 设置图像边框的宽度 auto或1~4个长度值或百分数
border-image-outset 指定边框图像向外扩展的部分 1~4个长度值或者百分数
border-image-repeat 设置图像填充边框区域的模式 stretch、repeat和round中的一个或两个值
border-image 在一条声明中设置所有值的简写属性跟单个属性的值一

1.切分图像
将图像用做边框的关键是切分图像。
开发人员指定图像边框向内偏移的值，浏览器会使用这些值来将图像切分为9块。
例：切分图像并将其用做边框

Example

2.控制切分图重复方式
为了填满边框的整个空间，切分图被拉伸了。
我们可以改变图像重复方式，得到不同的呈现效果。
border-image-repeat属性就能实现这个功能。
border-image-repeat样式的值
值说明
stretch 拉伸切分图填满整个空间，默认值
repeat 平铺切分图填满整个空间（可能导致图片被截断）
round 在不截断切分图的情况下，平铺切分图并拉伸以填满整个空间
space 在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间

例：控制切分图的重复样式

Example

PS：我弄了没有效果。。。

2.设置元素的背景
盒模型的另一个可见区域是元素的内容。
背景属性
属性说明值
background-color 设置元素的背景颜色，总是显示在背景图像下面 <颜色>
background-image 设置元素的背景图像，如果指定一个以上的图像， none或url（图像）
则后面的图像绘制在前面的图像下面
background-repeat 设置图像的重复样式
background-size 设置背景图像的尺寸
background-position 设置背景图像的位置
background-attachment 设置元素中的图像是否固定或随页面一起滚动
background-clip 设置背景图像裁剪方式
background-origin 设置背景图像绘制的起始位置
background 简写属性

1.设置背景颜色和图像
设置元素背景的起点是设置背景颜色或者背景图像，也可以使用背景属性同时设置两者。
例：设置背景图像和颜色

Example

background-repeat属性的值
值说明
repeat-x 水平方向平铺图像，图像可能被截断
repeat-y 垂直方向平铺图像，图像可能被截断
repeat 水平和垂直方向同时平铺图像，图像可能被截断
space 水平或者垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断
round 水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断
no-repeat 禁止平铺图像

我们可以单独指定水平方向和垂直方向的重复样式，要是只有一个值的话，两个方向均会使用同种重复样式。
2.设置背景图像的尺寸
background-size属性的值
值说明
contain 等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合，背景图像始终包含在容器内
cover 等比例缩放图像，使图像至少覆盖容器，有可能超出容器。
auto 默认值，图像以本身尺寸完全显示

contain效果

cover效果

3.设置背景图像位置
浏览器使用background-position属性设置背景图像的位置。图像不平铺的时候这个属性用得最多。
例：设置背景图像位置

Example

background-position属性的值
值说明
top 将背景图像定位到盒子顶部边界
left 将背景图像定位到盒子左边界
right 将背景图像定位到盒子右边界
bottom 将背景图像定位到盒子底部边界
center 将背景图像定位到中间位置

4.设置元素的背景附着方式
为具有视窗的元素应用背景时，可以指定背景附着内容的方式。
textarea是常用的具有视窗的元素，可以自动添加滚动条以显示内容。
另一个例子是body元素，如果其中的内容比浏览器的窗口长，可以为其设置滚动条。
使用background-attachment属性可以控制背景的附着方式。
background-attachment属性的值
值说明
fixed 背景固定到视窗上，即内容滚动时背景不动
local 背景附着到内容上，即背景随内容一起滚动
scroll 背景固定到元素上，不会随内容一起滚动

例：使用border-attachment属性

Example

5.设置背景图像的开始位置和裁剪样式
背景的起始点（origin）指定背景颜色和背景图像应用的位置。裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。
background-origin和background-clip属性的值
值说明
border-box 在边框盒子内部绘制背景颜色和背景图像
padding-box 在内边距盒子内部绘制背景颜色和背景图像
content-box 在内容盒子内部绘制背景颜色和背景图像

例：使用background-origin属性

Example

通过应用裁剪盒子，background-clip属性决定了背景的哪一部分是可见的。
裁剪盒子之外的部分一律被丢弃，不会显示。
例：使用background-clip属性

Example

6.使用background简写属性
使用background简写属性可以在一条声明中设置所有的背景值。
以下是background属性值的格式，其中包括多个单独的属性：
background：

例：使用background简写属性

Example

3.创建盒子阴影
通过box-shadow属性实现。
box-shadow属性的值
值说明
hoffset 阴影的水平偏移量，是一个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移
voffset 阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子下方，负值代表上方
blur (可选)指定模糊值，是一个长度值，值越大盒子的边界越模糊，默认值为0，边界清晰
spread (可选)指定阴影的延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，
负值代表阴影沿相反方向缩小
color (可选)设置阴影的颜色，如果省略，浏览器会自行选择一个颜色
inset (可选)将外部阴影设置为内部阴影（内嵌到盒子中）。

例：创建盒子阴影效果

Example

可以在一条box-shadow声明中定义多个阴影，只需要用逗号分隔每条声明即可。
例：为一个元素应用多个阴影

Example

4.应用轮廓
轮廓对于边框来说是可选的。
短时间抓住用户对某个元素的注意力。
边框和轮廓最大区别：轮廓不属于页面，因此应用轮廓不需要调整页面布局。
轮廓属性
属性说明值
outline-color 设置外围轮廓的颜色 <颜色>
outline-offset 设置轮廓距离元素边框的偏移量 <长度>
outline-style 设置轮廓样式跟border-style属性的值一样
outline-width 设置轮廓的宽度 thin、medium、thick、<长度>
outline 在一条声明中设置轮廓的简写属性 <颜色><样式><宽度>

例：应用轮廓

Example

Outline Off Outline On

使用盒模型
1.为元素应用内边距
应用内边距会在元素内容和边距之间添加空白。
内边距属性
属性说明值
padding-top 为顶边设置内边距长度值或者百分数
padding-right 为右边设置内边距长度值或百分数
padding-bottom 为底边设置内边距长度值或百分数
padding-left 为左边设置内边距长度值或百分数
padding 简写属性，在一条声明中设置所有边的内边距 1~4个长度值或百分数

百分数总是跟包含块的宽度相关，高度不考虑在内。
例：为元素应用内边距

Example

PS：
4个值：顶边、右边、底边和左边的内边距。
省略一个值：
省略左边的值，默认使用右边的值。
省略底边的值，默认使用顶边的值。
只给一个值：四条边的内边距都是这个值。
例：使用padding简写属性

Example

2.为元素应用外边距
外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。
外边距属性
属性说明值
margin-top 为顶边设置外边距长度值或者百分数
margin-right 为右边设置外边距长度值或百分数
margin-bottom 为底边设置外边距长度值或百分数
margin-left 为左边设置外边距长度值或百分数
margin 简写属性，在一条声明中设置所有边的外边距 1~4个长度值或百分数

例：为元素添加外边距

Example

3.控制元素的尺寸
浏览器会基于页面上内容的流设置元素的尺寸。
使用尺寸相关的属性可以覆盖这些行为。
尺寸属性
属性说明值
Width 设置元素的宽度和高度 auto、长度值或者百分数
Height
min-width 为元素设置最小可接受宽度和高度 auto、长度值或百分数
min-height
max-width 为元素设置最大可接受宽度和高度 auto、长度值或百分数
max-height
box-sizing 设置尺寸调整应用到元素盒子的哪一部分 content-box、padding-box、border-box、
margin-box

例：为元素设置尺寸

Example

1.设置一定尺寸的盒子
border-sizing属性允许你指定尺寸样式应用到元素盒子的具体区域。

2.设置最小和最大尺寸
使用最小和最大相关属性为浏览器调整元素尺寸设置一定的限制。
例：设置尺寸的最小和最大范围

Example

缩小浏览器

拉大浏览器

4.处理溢出内容
内容太大，已经无法完全显示在元素的内容盒中。这时的默认处理方式是内容溢出，并继续显示。
例：创建一个无法完全显示其中内容的小尺寸元素

Example

我们可以使用overflow属性改变这种行为。
overflow属性
属性说明值
overflow-x 设置水平方向和垂直方向的溢出方式
overflow-y
overflow 简写属性 overflow
overflow-x overflow-y

溢出属性的值
值说明
auto 浏览器自行处理溢出内容。通常，如果内容被剪掉就显示滚动条，否则就不显示（这是相
较scroll值来说的，设置该值后，无论内容是否溢出都有滚动条）
hidden 多余部分直接剪掉，只显示内容盒子里面的内容。如果用户想看看剪掉的这部分内容，对
不起，做不到。
no-content 如果内容无法全部显示，就直接移除。主流浏览器都不支持这个值
no-display 如果内容无法全部显示，就隐藏所有内容。主流浏览器都不支持这个值
scroll 为了让用户看到所有内容，浏览器会添加滚动机制。通常是滚动条，不过这个值跟具体的
平台和浏览器相关。即使内容没有溢出也能看到滚动条
visible 默认值，不管是否溢出内容盒，都显示元素内容

例：控制内容溢出

Example

5.控制元素的可见性
visibility属性控制元素的可见性。
visibility属性的值
值说明
collapse 元素不可见，且在页面布局中不占据空间
hidden 元素不可见，但在页面布局中占据空间
visible 默认值，元素在页面上可见

例：使用visibility属性

Example

Rank	Name	Color	Size
Favorite:	Apples	Green	Medium
2nd Favorite:	Oranges	Orange	Large

Visible Collapse Hidden

6.设置元素的盒模型
display属性提供了一种改变元素盒模型的方式，这相应会改变元素在页面上的布局方式。
display属性的值
值说明
inline 盒子显示为文本行中的字
block 盒子显示为段落
inline-block 盒子显示为文本行
list-item 盒子显示为列表项，通常具有项目符号或者其他标识符（如索引号）
run-in 盒子类型取决于周围的元素
compact 盒子的类型为块或者标记盒（跟list-item类型产生的类似）
flexbox 这个值跟弹性盒布局相关
table 这些值跟表格中的元素布局相关
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
ruby 这些值跟带ruby注释的文本布局相关
ruby-base
ruby-text
ruby-base-group
ruby-text-group
none 元素不可见，且在页面布局中不占空间

1.认识块级元素
将display属性设置为block值会创建一个块级元素。
块级元素会在垂直方向跟周围元素有所区别。
例：将display属性设置为block值

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

2.认识行内元素
将display属性设置为inline值会创建一个行内元素，它在视觉上跟周围内容的显示没有区别。
例：将display属性设置为inline

Example

3.认识行内-块级元素
将display属性设置为inline-block值会创建一个其盒子混合了块和行内特征的元素。
盒子整体上作为行内元素显示，这意味着垂直方向上该元素和周围的内容并排显示，没有区别。
例：使用inline-block值

Example

4.认识插入元素
display属性设置为run-in值会创建一个这样的元素：其盒子类型取决于周围元素。
（1）如果插入元素包含一个display属性值为block的元素，那么插入元素就是块级元素。
（2）如果插入元素的相邻兄弟元素是块级元素，那么插入元素就是兄弟元素中的第一个行内元素。
（3）其他情况下，插入元素均作为块级元素对待。
例：相邻兄弟元素为块元素的插入元素

Example There are lots of different kinds of fruit - there are over 500 varieties of banana alone.

By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：书上是两段话连在一起的，没有换行。
例：相邻兄弟元素为行内元素的插入元素

Example There are lots of different kinds of fruit - there are over 500 varieties of banana alone.

By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices.

PS：课本是分行的

5.隐藏元素
将display属性设置为none值就是告诉浏览器不要为元素创建任何类型的盒子，也就是说元素没有后代元素。
这时元素在页面布局中不占据任何空间。
例：将display属性设置为none

Example

Block None

7.创建浮动盒
可以使用float属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。
float属性的值
值说明
left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界
right 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界
none 元素位置固定

例：使用float属性

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

Left Right None

阻止浮动元素堆叠
如果设置了多个浮动元素，默认情况下。它们会一个挨着一个地堆叠在一起。使用clear属性可以阻止出现这种情况。
clear属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。
clear属性的值
值说明
left 元素的左边界不能挨着另一个浮动元素
right 元素的右边界不能挨着另一个浮动元素
both 元素的左右边界都不能挨着浮动元素
none 元素的左右边界都可以挨着浮动元素

例：使用clear属性

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable within a small region.

Left Right None

创建布局
1定位内容
控制内容最简单的方式就是通过定位，这允许你使用浏览器改变元素的布局方式。
定位属性
属性说明值
position 设置定位方法
left 为定位元素设置偏移量 <长度>
right <百分数>
top auto
bottom
z-index 设置定位元素的层叠顺序数字

1.设置定位类型
position属性设置了元素的定位方法。
position属性的值
值说明
static 元素为普通布局，默认值
relative 元素位置相对普通位置定位
absolute 元素相对于position值不为static的第一位祖先元素来定位
fixed 元素相对于浏览器窗口来定位

position属性的不同值指定了元素定位所针对的不同元素。
使用top、bottom、left、right属性设置元素的偏移量的时候，指的是相对于position属性指定的元素的偏移量。
例：使用position属性

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

Static Relative Absolute Fixed

2.设置元素的层叠顺序
z-index属性指定元素显示的层叠顺序。
z-index属性的值是数值，且允许取负值。值越小，在层叠顺序中就越靠后。
例：使用z-index属性

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

2.创建多列布局
多列特性允许在多个垂直列中布局内容，跟报纸的排版方式类似。
多列属性
属性说明值
column-count 指定列数 <数值>
column-fill 指定内容在列与列之间的分布方式，balance指浏览器确保 balance
不同列之间的长度差异可能小。如果取auto值，则按照顺 auto
序填充列
column-gap 指定列之间的距离 <长度值>
column-rule 在一条声明中设置column-rule-*的简写属性 <宽度值><样式><颜色>
column-rule-color 设置列之间的颜色规则 <颜色>
column-rule-style 设置列之间的样式规则跟border-style属性的值相同
column-rule-width 设置列之间的宽度 <长度值>
columns 设置column-span和column-width的简写属性 <长度值><数值>
column-span 指定元素横向能跨多少列 None、all
column-width 指定列宽 <长度值>

例：使用多列布局

Example

There are lots of different kinds of fruit - there are over 500 varieties of banana alone.By the time we add the countless types of apples,oranges, and other well-known fruit,we are faced with thousands of choices. small apple One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples. small banana When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region. And of course,there are fruits which are truely unique - I am put in mind of the durian,which is widely consumed in SE Asia and is known as the "king of fruits".The durian is largely unknown in Europe and the USA - if it is known at all,it is for the overwhelming smell,which is compared to a combination of almonds,rotten onions and gym socks.

窗口适当的时候

全屏的时候

使用了column-count属性将页面布局分为三列。如果窗口大小调整，浏览器会自行调整列宽度，从而保留布局中的列数。
例：设置列宽度
······

······

适当宽度时

全屏时

3.创建弹性盒布局
例：有问题的简单布局

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

-webkit弹性盒属性
属性说明值
box-align 如果内容元素的高度小于容器的高度，告诉浏览 start、end、center、baseline、stretch
器如何处理多余的空间
box-flex 指定元素的可伸缩性，应用于弹性盒容器内的元素 <数值>
box-pack 如果可伸缩元素达到最大尺寸，告诉浏览器如何分 start、end、center、justify
配空间

1.创建简单的弹性盒
可以使用display属性创建弹性盒。标准值是flexbox，不过在标准完成和实现之前，必须使用-webkit-box。
例：创建简单的弹性盒

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

2.伸缩多个元素
应用box-flex属性可以告诉浏览器伸缩多个元素的尺寸。
例：创建多个可伸缩元素
·······

······

3.处理垂直空间
box-align属性告诉浏览器如何处理多余的垂直空间。
box-align属性的值
值说明
start 元素沿容器的顶边放置，任何空空间都在其下方显示
end 元素沿容器的底边放置，任何空空间都在其上方显示
center 多余的空间被分开为两部分，分别显示在元素的上方和下方
strech 调整元素的高度，以填充可用空间

例：应用box-align属性
······

······

4.处理最大尺寸
弹性盒模型伸缩时不会超过内容元素的最大尺寸值。
如果存在多余空间，浏览器会伸展元素，直到达到最大允许尺寸。
box-pack属性定义了在所有的可伸缩元素均达到最大尺寸的情况下，多余空间仍未分配完毕时应该如何处理。
box-pack属性的值
值说明
start 元素从左边界开始放置，任何未分配的空间显示到最后一个元素的右边
end 元素从右边界开始放置，任何未分配的空间显示到第一个元素的左边
center 多余空间平均分配到第一个元素的左边和最后一个元素的右边
justify 多余空间均分配到各个元素之间

例：使用box-pack属性

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

4.创建表格布局
创建CSS表格布局使用display属性。
跟表格布局相关的display属性的值
值说明
table 类似table元素
inline-table 类似table元素，但是创建一个行内元素
table-caption 类似caption元素
table-column 类似col元素
table-column-group 类似colgroup元素
table-header-group 类似thead元素
table-row-group 类似tbody元素
table-footer-group 类似tfoot元素
table-row 类似tr元素
table-cell 类似td元素

例：创建CSS表格布局

Example

One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.

When travelling in Asia,I was struck by how many different kinds of banana were avaiable - many of which had unique flavours and which were only avaiable within a small region.

This is an apple. apple

This is a banana. banana

No picture here

设置文本样式
1.应用基于文本样式
1.对齐文本
text-align属性：指定文本块的对齐方式。值：start、end、left、right、center、justify
text-justify属性：如果text-align属性使用了justify值，则该值会用来指定对齐文本的规则。
注意：可以将文本对齐到显式命名的某个边界（使用left或者right值），或者对齐到语言本来使用的边界（使用start和end值）。
例：对齐文本

Example

Start End Left Right Justify Center

如果使用justify值，可以使用text-justify属性指定文本添加空白的方式。
text-justify属性的值
值说明
auto 浏览器选择对齐规则，这是最简单的方法，不过，不同浏览器之间的呈现方式会有微小差别
none 禁用文本对齐
inter-word 空白分布在单词之间，适用于英语等词间有空的语言
inter-ideograph 空白分布子啊单词、表意字之间，且文本两端对齐，适用于汉语、日文和韩文等语言
inter-cluster 空白分布在单词、字形集的边界，适用于泰文等无词间空格的语言
distribute 空白分布在单词、字形集的边界，但连续文本或者草体除外
kashida 通过拉长选定字符调整对齐方式（仅适用于草体）

2.处理空白
空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。
例：带有空白的HTML文档

Example

There are lots of different kinds of fruit - there are over 500 varieties

		of banana alone.By the time we add the countless types of 
		apples,oranges,and other well-known fruit,we are faced with 
		thousands of choices.

		One 	of the		most interesting aspects of fruit is the 
		variety available	 in each country.I live near London,
		
		in an area which is 
		known for its apples.
	</p >
</body>

使用whitespace属性控制浏览器对空白字符的处理方式。
whitespace属性的值
值说明
normal 默认值，空白符被压缩，文本行自动换行
nowrap 空白符被压缩，文本行不换行
pre 空白符被保留，文本只在遇到换行符的时候换行，这跟pre元素的效果一样
pre-line 空白符被压缩，文本会在一行排满或遇到换行符时换行
pre-wrap 空白符被保留，文本会在一行排满或遇到换行符时换行

例：使用whitespace属性

Example

There are lots of different kinds of fruit - there are over 500 varieties

		of banana alone.By the time we add the countless types of 
		apples,oranges,and other well-known fruit,we are faced with 
		thousands of choices.

		One 	of the		most interesting aspects of fruit is the 
		variety available	 in each country.I live near London,
		
		in an area which is 
		known for its apples.
	</p >
</body>

3.指定文本方向
direction属性告诉浏览器文本块的排列方向。
例：使用direction属性

Example

This is left-to-right text

This is right-to-left text

4.指定单词、字母、行之间的间距
可以告诉浏览器单词与单词、字母与字母、行与行之间的间距。
间距属性
属性说明值
letter-spacing 设置字母之间的间距 normal、<长度值>
word-spacing 设置单词之间的间距 Normal、<长度值>
line-height 设置行高 Normal、<数值>、<长度值>、<%>

例：使用letter-spacing、word-spacing和line-height属性

Example

5.控制断词
word-wrap属性告诉浏览器当一个单词的长度超过包含块的宽度时如何处理。
word-wrap属性的值
值说明
normal 单词不断开，即使无法完全放入包含块元素
break-word 断开单词，使其放入包含块元素

例：使用word-wrap属性

Example

There are lots of different kinds of fruit - there are over 500 varieties of madeupfruitwithaverylongname alone.

6.首行缩进
text-indent属性用于指定文本块首行缩进，值可以是长度值，也可以是相对于元素宽度的百分数值。
例：使用text-indent属性

Example

2.文本装饰与大小写转换
text-decoration和text-transform两个属性分别允许我们装饰文本和转换文本大小写。
文本装饰和大小写转换属性
属性说明值
text-decoration 为文本块应用装饰效果 none、underline、overline、line-through、blink
text-transform 为文本块转换大小写 none、capitalize、uppercase、lowercase

例：使用text-decoration和text-transform属性

Example

3.创建文本阴影
使用text-shadow属性为文本创建阴影效果。
值：
使用text-shadow属性

Example

Thoughts about Fruit

4.使用字体
字体属性
属性说明值
font-family 指定文本块采用的字体名称
font-size 指定文本块的字体大小
font-style 指定字体样式 Normal、italic、oblique
font-variant 指定字体是否以小型大写字母显示 Normal、smallcaps
font-weight 设置字体粗细 Normal、bold、bolder、lighter、100~900之间数字
font 在一条声明中设置字体的简写属性

font属性值的格式如下：
font：

1.选择字体
font-family属性指定使用的字体。
通用字体系：serif、sans-serif、cursive、fantasy、monospace
例：使用font-family属性

Example

2.设置字体大小
font-size属性用来指定字体大小。
font-size属性的值
值说明
xx-small 设置字体大小。浏览器会决定每个值代表具体大小。不过，从上到下逐渐增大是有保证的
x-small
small
medium
large
x-large
xx-large
smaller 设置字体相对于父元素字体的大小
larger
使用CSS长度值精确设置字体大小
<%> 将字体大小表示为父元素字体大小的百分数

例：使用font-size属性

Example

3.设置字体样式和粗细
可以使用font-weight属性设置字体粗细——增加字体“重量”会使文本更粗。
font-style属性允许我们在正常字体、斜体和假斜体（倾斜字体）三种字体之间选择。
例：使用font-weight和font-style属性

Example

5.使用Web字体
使用@font-face指定Web字体，就可以直接下载Web字体并使用在自己的页面上，而不需要用户做什么。
例：使用Web字体

Example

PS：使用Web的话是用http://的，书上示例也是，可是我为了方便就用了本机下载的字体。

过渡、动画和变换
1.使用过渡
过渡效果一般是由浏览器直接改变元素的CSS属性实现的。
例如：如果使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。
例：直接应用新的属性值

Example

CSS过渡特性允许我们控制应用新属性值的速度。
过渡属性
属性说明值
transition-delay 指定过渡开始之前的延迟时间 <时间>
transition-duration 指定过渡的持续时间 <时间>
transition-property 指定应用过渡的属性 <字符串>
transition-timing-function 指定过渡期间计算中间值的方式
transition 在一条声明中指定所有过渡细节的简写属性

transition简写属性的格式如下：
transition：
例：使用过渡

Example

PS：过渡会在用户将鼠标悬停在span元素上100ms之后开始，持续时间为500ms，过渡应用到background-color、color、padding、font-size和border属性。

1.创建反向过渡
过渡只在应用与其关联的样式时才会生效。
因为这个原因，大多数过渡成对出现：暂时状态的过渡和方向相反的反向过渡。
例：创建另一种过渡

Example

2.选择中间值的计算方式
使用过渡时，浏览器需要为每个属性计算初始值和最终值之间的中间值。
使用transition-timing-function属性指定计算中间值的方式，表示为四个点控制的三次贝塞尔曲线。
有五种预设曲线可以选择：
1.ease（默认值） 2.linear 3.ease-in 4.ease-out 5.ease-in-out
例：使用transition-timing-function属性

Example

2.使用动画
CSS动画本质上是增强的过渡。
动画属性
属性说明值
animation-delay 设置动画开始前的延迟 <时间>
animation-direction 设置动画循环播放的时候是否反向播放 normal、alternate
animation-duration 设置动画播放的持续时间 <时间>
animation-iteration-count 设置动画的播放次数 infinite、<数值>
animation-name 指定动画名称 none、<字符串>
animation-play-state 允许动画暂停和重新播放 running、paused
animation-timing-function 指定如何计算中间动画值 ease、linear、ease-in
ease-out、ease-in-out、
cubic-bezier
animation 简写属性

animation简写属性的格式如下：
animation：
注意：这些属性都不是用来指定要作为动画的CSS属性的。
动画是在两部分定义的：
①第一部分包含在样式声明中，它们定义了动画的样式，但并没有定义哪些属性是动画。
②第二部分使用@key-frames规则创建，用来定义应用动画的属性。
例：创建动画

Example

1.使用关键帧
为创建更复杂的效果，我们会介绍几种表示关键帧的方法。
1.设置初始状态
使用form子句指定另一组初始值，处理为动画的属性的初始值来自元素本身。
例：指定另一组初始值

Example

2.指定中间关键帧
通过添加百分数子句实现添加其他关键帧定义动画的中间阶段。
例：添加中间关键帧

中间关键帧的另一个用途是定义属性值，以便创建更为复杂的动画。

2.设置重复方向
使用animation-direction属性指定首选方式。
normal值：每次重复都向前播放，如果可重复播放多次，每次动画都恢复初始状态，从头开始播放。
alternate值：动画先向前播放，然后反方向播放，相当于animation-iteration-count属性的值为2

例：使用animation-direction属性

3.理解结束状态
CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用。动画结束后，动画元素的外观回到初始状态。
例：动画结束后动画状态丢失

4.初始布局时应用动画
跟过渡相比，动画的一个优势是你可以将其应用到页面的初始布局。
例：在页面初始布局时为元素应用动画

5.重用关键帧
我们可以对同一组关键帧应用多个动画，从而为动画属性配置不同的值。
例：在多个动画之间重用关键帧

Example

6.为多个元素应用多个动画
在包含动画细节的样式中，扩展选择器的范围可以使一个变体是为多个元素应用同一个动画。
例：为多个元素应用一个动画

可以为一个元素应用多个动画，只需用逗号将动画属性的不同值隔开即可。
例：为一个元素应用多个关键帧

7.停止和启动动画
animation-play-state属性可以用来停止和启动动画。
paused值：动画停止。
playing值：动画开始播放。
例：停止和启动动画

Example

Running Paused

3.使用变换
可以使用CSS变换为元素应用线性变换。
transform属性：指定应用的变换功能。
transform-origin属性：指定变换的起点。
1.应用变换
通过transform属性为元素应用变换。
transform属性的值
值说明
translate(<长度值或百分数值>) 在水平方向、垂直方向或者两个方向上平移元素
translateX(<长度值或百分数值>)
translateY(<长度值或百分数值>)
scale(<数值>) 在水平方向、垂直方向或者两个方向上缩放元素
scaleX(<数值>)
scaleY(<数值>)
rotate(<角度>) 旋转元素
skew(<角度>) 在水平方向、垂直方向或者两个方向上上使元素倾斜一定的角度
skewX(<角度>)
skewY(<角度>)
matrix(4~6个数值，逗号隔开) 指定自定义变换。大多数浏览器还没有实现z轴缩放，因此最后两个数字可
以忽略（有些情况必须要省略）

例：为元素应用变换

Example

PS：旋转实现不了
2.指定元素变换的起点
transform-origin属性允许我们指定应用变换的起点。默认情况下，使用元素的中心作为起点。
transform-origin属性的值
值说明
<%> 指定元素x轴或者y轴的起点
<长度值> 指定距离
left、center、Right 指定x轴上的位置
top、center、bottom 指定y轴上的位置

例：使用transform-origin属性

Example

PS：也没有效果。

3.将变换作为动画和过渡处理
可以为变换应用动画和过渡，就跟其他CSS属性一样。
例：为变换应用过渡

Example

其他CSS属性和特性
1.设置元素的颜色和透明度
颜色相关属性：
color属性：设置元素的前景色值：<颜色>
opacity属性：设置颜色的透明度值：<数值>

1.设置前景色
color属性一般用来设置文本的颜色。
例：使用color属性

Example

2.设置元素的透明度
使用opacity属性让整个元素和文本内容透明。
这个属性的取值范围是0到1，前者代表完全透明，后者代表完全不透明。
例：使用opacity属性

Example

2.设置表格样式
有不少属性可用来为table元素设置独特样式。
表格相关属性
属性说明值
border-collapse 设置相邻单元格的边框处理样式 collapse、separate
border-spacing 设置相邻单元格的边框的间距 1~2个长度值
caption-size 设置表格标题的位置 top、bottom
empty-cells 设置空单元格是否显示边框 hide、show
table-layout 指定表格的布局样式 auto、fixed

1.合并表格边框
border-collapse用来控制table元素相邻单元格边框的样式。
例：使用border-collapse属性

Example

Results of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favorite:	Apples	Green	Medium	500
2nd Favorite:	Oranges	Orange	Large	450
©2011 Adam Freeman Fruit Data Enterprises

2.配置独立边框
border-spacing属性定义相邻元素边框的间距。
例：使用border-spacing属性

Example

Results of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favorite:	Apples	Green	Medium	500
2nd Favorite:	Oranges	Orange	Large	450
©2011 Adam Freeman Fruit Data Enterprises

3.处理空单元格
使用empty-cells属性控制这种行为。
例：使用empty-cells属性

Example

Results of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favorite:	Apples	Green	Medium	500
2nd Favorite:	Oranges	Orange
©2011 Adam Freeman Fruit Data Enterprises

4.设置标题的位置
为table元素添加caption，标题会显示在表格的顶部。
可以使用caption-side属性改变这种默认行为。
例：使用caption-side属性

Example

Results of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favorite:	Apples	Green	Medium	500
2nd Favorite:	Oranges	Orange	Large	450
©2011 Adam Freeman Fruit Data Enterprises

5.指定表格布局
使用table-layout属性设置表格布局。
例：使用table-layout属性

Example

Results of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favorite:	Apples	Green	Medium	500
2nd Favorite:	Oranges	Orange	Large	450
©2011 Adam Freeman Fruit Data Enterprises

3.设置列表样式
列表相关属性
属性说明值
list-style-type 指定列表中使用的标记的类型
list-style-image 指定图像作为列表标记 <图像>
list-style-position 指定标记相对于列表项目盒子的位置 inside、outside
list-style 设置所有列表特征的简写属性

list-style简写属性的格式如下所示：
list-style：

1.设置列表标记类型
list-style-type属性用来设置标记（有时候也称为项目符号）的样式。
list-style-type属性的值
值说明
none 没有标记
box 、check、circle、diamond 使用指定形状的标记，注意并不是所有的浏览器都支持每一种形状
disc、dash、square
decimal 使用十进制数字作为标记
binary 使用二进制数字作为标记
lower-alpha 使用小写字母字符作为标记
upper-alpha 使用大写字母字符作为标记

例：使用list-style-type属性

Example I like apples and oranges. I also like:

bananas
mangoes
cherries
plums
peaches
grapes

2.使用图像作为列表标记
list-style-image属性可以将图像用做列表标记。
例：使用图像作为列表标记

Example I like apples and oranges. I also like:

bananas
mangoes
cherries
plums
peaches
grapes

3.设置列表标记的位置
使用list-style-position属性指定标记相对于li元素内容框的位置。
inside值：定义标记位于内容框内部。
outside值：定义标记位于内容框外部。
例：指定标记的位置

Example I like apples and oranges. I also like:

bananas
mangoes
cherries
plums
peaches
grapes

4.设置光标样式
cursor属性用来改变光标的外形。
值：auto、crosshairs、default、help、move、pointer、progress、text、wait、n-resize、s-resize、e-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize
例：使用cursor属性

Example

PS：鼠标移动到span元素的位置时会放大，我移动时一直加载，所以展示不了。

小白读《HTML５权威指南》第三部分 CSS

下面是直接复制粘贴，没有图片且乱版

Thoughts about Fruit

猜你喜欢