CSS入门与实践PDF电子书下载

第1章 了解CSS 1

1.1 CSS的作用 1

1.2 工作机制 1

1.3 网页浏览器 2

1.4 兼容性问题 2

第2章 开发工具 4

2.1 浏览器和开发者工具 4

2.1.1 Google Chrome浏览器 4

2.1.2 开发者工具 5

2.2 代码编辑工具 7

2.2.1 Visual Studio Code 7

2.2.2 在线编辑和预览工具 8

2.3 静态文件服务器 8

2.4 代码存储和版本控制——Git 9

2.5 参考文档和资料 9

第3章 开始编写CSS 11

3.1 CSS规则 11

3.2 选择器 11

3.3 属性声明 13

3.3.1 属性名称 13

3.3.2 属性前缀 13

3.3.3 属性值 14

3.4 ＠规则 15

3.4.1 ＠ charset 15

3.4.2 ＠ import 15

3.4.3 ＠ media 16

3.5 注释 17

3.6 错误处理 17

3.6.1 无效的值 17

3.6.2 使用浏览器解决样式问题 18

第4章 网页中的样式 21

4.1 将CSS应用到网页中 21

4.1.1 内联样式 21

4.1.2 内部样式 21

4.1.3 外部样式 22

4.2 使用JS控制样式 22

4.3 相对路径和绝对路径 23

4.4 网页中存在的样式 24

4.4.1 浏览器默认样式 24

4.4.2 网页开发者定义的样式 24

4.4.3 用户自定义样式 25

4.5 样式的层叠 25

4.5.1 根据来源确定优先级 25

4.5.2 根据规则顺序确定优先级 26

4.5.3 ！important标记 26

4.6 样式的继承 27

第5章 选择器 28

5.1 基本选择器 28

5.2 属性选择器 29

5.3 伪类选择器 29

5.3.1 a元素专属的几种状态 30

5.3.2 ∶active状态 30

5.3.3 ∶hover状态 30

5.3.4 ∶focus状态 30

5.3.5 ∶enabled状态与∶disabled状态 30

5.3.6 ∶checked状态 31

5.3.7 ∶root状态 31

5.3.8 子元素位置 31

5.3.9 子元素类型 32

5.3.10 ∶not（selector） 32

5.3.11 ∶fullscreen 32

5.4 伪元素选择器 32

5.4.1 ∷after 33

5.4.2 ∷before 33

5.4.3 ∷first-letter 33

5.4.4 ∷first-line 33

5.4.5 ∷selection 33

5.5 关系选择器 34

5.6 选择器组合 34

5.6.1 叠加 34

5.6.2 组合 35

5.7 选择器优先级 35

第6章 CSS属性值 37

6.1 整数 37

6.2 数值 37

6.3 百分数 37

6.4 尺寸值 37

6.5 角度值 38

6.6 时间 38

6.7 字符串 39

6.8 关键词 39

6.9 颜色值 39

6.10 函数 41

第7章 字体和文本 42

7.1 本章实例 42

7.2 字体相关属性 44

7.2.1 font-family属性 44

7.2.2 font-size属性 45

7.2.3 font-style属性 46

7.2.4 font-weight属性 46

7.2.5 line-height属性 47

7.2.6 font属性 47

7.2.7 ＠font-face声明 47

7.3 文本相关属性 49

7.3.1 direction属性 49

7.3.2 letter-spacing属性 49

7.3.3 word-spacing属性 49

7.3.4 white-space属性 50

7.3.5 word-break属性 52

7.3.6 text-align属性 52

7.3.7 text-justify属性 55

7.3.8 text-indent属性 55

7.3.9 text-transform属性 55

7.3.10 text-overflow属性 56

7.3.11 word-wrap属性 57

7.3.12 user-select属性 57

7.4 装饰性样式 58

7.4.1 color属性 58

7.4.2 text-decoration属性 58

7.4.3 text-shadow属性 59

第8章 盒模型 60

8.1 本章实例——音乐网站主页 60

8.1.1 页面框架 61

8.1.2 网格布局 64

8.2 元素的呈现方式 66

8.3 盒子的组成 68

8.4 宽度和高度 70

8.5 内边距 71

8.6 边框 71

8.7 外边距 75

8.8 尺寸计算 78

8.9 内容溢出 78

第9章 弹性盒模型 81

9.1 本章实例——弹性多列布局 81

9.2 相关概念 82

9.3 弹性容器相关属性 83

9.4 弹性子元素相关属性 88

第10章 装饰性样式 92

10.1 边框背景图 92

10.2 轮廓 95

10.3 圆角 96

10.4 背景 99

10.5 渐变 104

10.6 盒阴影 107

10.7 透明度 108

第11章 定位 110

11.1 相关属性 110

11.1.1 position属性 110

11.1.2 top、 bottom、 left、 right属性 112

11.1.3 z-index属性 113

11.2 应用场景 114

11.2.1 Tooltip组件 114

11.2.2 Dropdown组件 116

11.2.3 Dialog组件 118

第12章 浮动 120

12.1 浮动的特征 120

12.2 清除浮动 122

12.3 应用场景 124

第13章 变换 127

13.1 添加变换效果 127

13.2 支持的变换类型 129

13.3 设置变换原点 130

第14章 过渡 131

14.1 添加过渡效果 131

14.2 相关属性 132

第15章 动画 134

15.1 动画实例 134

15.2 定义动画 136

15.3 使用和控制动画 137

第16章 其他属性 140

16.1 visibility属性 140

16.2 resize属性 141

16.3 cursor属性 142

16.4 content属性 143

16.5 filter属性 144

16.6 vertical-align属性 146

第17章 内置元素的样式 149

17.1 按钮 149

17.2 列表 150

17.3 表格 153

17.4 表单 156