目录

第1章了解CSS1

1.1CSS的作用1

1.2工作机制1

1.3网页浏览器2

1.4兼容性问题2第2章开发工具4

2.1浏览器和开发者工具4

2.1.1Google Chrome浏览器4

2.1.2开发者工具5

2.2代码编辑工具7

2.2.1Visual Studio Code7

2.2.2在线编辑和预览工具8

2.3静态文件服务器8

2.4代码存储和版本控制——Git9

2.5参考文档和资料9第3章开始编写CSS11

3.1CSS规则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@charset15

3.4.2@import15

3.4.3@media16

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.1a元素专属的几种状态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:fullscreen32

5.4伪元素选择器32

5.4.1::after33

5.4.2::before33

5.4.3::first\|letter33

5.4.4::firstline33

5.4.5::selection33

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.1fontfamily属性44

7.2.2fontsize属性45

7.2.3fontstyle属性46

7.2.4fontweight属性46

7.2.5lineheight属性47

7.2.6font属性47

7.2.7@fontface声明47

7.3文本相关属性49

7.3.1direction属性49

7.3.2letterspacing属性49

7.3.3wordspacing属性49

7.3.4white\|space属性50

7.3.5wordbreak属性52

7.3.6textalign属性52

7.3.7textjustify属性55

7.3.8textindent属性55

7.3.9texttransform属性55

7.3.10textoverflow属性56

7.3.11wordwrap属性57

7.3.12userselect属性57

7.4装饰性样式58

7.4.1color属性58

7.4.2textdecoration属性58

7.4.3text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.1position属性110

11.1.2top、bottom、left、right属性112

11.1.3zindex属性113

11.2应用场景114

11.2.1Tooltip组件114

11.2.2Dropdown组件116

11.2.3Dialog组件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.1visibility属性140

16.2resize属性141

16.3cursor属性142

16.4content属性143

16.5filter属性144

16.6verticalalign属性146第17章内置元素的样式149

17.1按钮149

17.2列表150

17.3表格153

17.4表单156