本书内容包含浏览器和开发工具介绍，CSS 基础知识和应用方法。通过贯穿全书的应用案例，引导读者了解和学习 CSS 相关的知识点，并利用这些知识分析和解决问题。读者在学习完本书后，应该能够掌握通过 CSS 来控制网页布局及内容呈现的方法，了解到常用的 CSS 技巧，并具备分析和解决 CSS 相关问题的能力

图形用户界面(Graphical User Interface，GUI)是指使用图形化的方式呈现计算机等设备的操作界面。GUI通过屏幕等设备上不同颜色的点(像素)为用户提供文本、图像等内容的呈现及鼠标单击、键盘输入和触摸屏点击等操作的反馈。

1973年，施乐公司首次在Alto计算机中搭载GUI。随后，苹果公司和微软公司相继推出搭载GUI的个人计算机和操作系统。目前，GUI已经成为用户与个人计算机、智能手机等电子设备最主要的沟通和交互方式。

对大部分用户来说，浏览器是最常用的GUI程序之一，也是用户进行搜索、阅读、分享和娱乐的平台。浏览器为用户提供了文本、图像和音/视频等丰富的内容，而网页就是这些内容的载体。随着浏览器及前端技术的发展，以及个人计算机和移动设备性能的大幅提升，浏览器已经不再单纯用来呈现博客、新闻等内容，它已经成为最广泛、最受欢迎的应用平台，越来越多的办公、社交、娱乐甚至游戏应用出现在浏览器中。

无论Web应用有多强大、多复杂，它们都需要使用CSS控制网页的布局及内容的呈现。读者将通过本书学习CSS的基础知识，并掌握通过CSS控制网页布局及内容呈现的方法。

本书内容包含浏览器和开发工具的介绍，以及CSS的基础知识和应用方法。通过应用案例引导读者了解和学习CSS的相关知识，并利用这些知识分析和解决问题。读者在阅读本书后，基本能够掌握通过CSS控制网页布局及内容呈现的方法，了解常用的CSS技巧，并具备分析和解决CSS相关问题的能力。

本书是面向前端初学者的自学教材，以及面向初级前端工程师的CSS参考资料。读者在学习本书时，只需要掌握基本的计算机操作和文件管理知识，并对HTML有基本的了解。在准备好一台计算机，甚至平板电脑和手机之后，就可以开始学习和练习了。

由于定位及篇幅限制，本书将内容重点放在CSS基础知识的讲解和实际应用上，但仍然会涉及一些流行的技术和应用方法，以及部分HTML和JavaScript的相关知识。读者在学习和实践的过程中，也可以通过互联网或相关书籍学习前端开发及Web应用开发的相关知识和技术。

胡俊卿

2018年5月

第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

虽然近几年前端相关的技术不断推新，但 CSS 作为网页开发的三大基础技术之一，其地位不会轻易被取代。本书的目的是让读者入门并上手 CSS 开发，掌握 CSS 的基础知识和应用方法，能够分析并使用 CSS 来实现网页布局和样式的控制。由于本书的定位及篇幅限制，本书将内容重点放在 CSS 基础知识的讲解和实际应用上，但仍然会涉及一些流行的技术和应用方式，以及部分 HTML 和 JavaScript 相关的知识。读者在学习和实践过程中，可以通过互联网或相关书籍来学习前端开发及 Web 应用开发相关的知识和技术

胡俊卿，山东科技大学软件工程专业。现任上海万企明道软件有限公司前端工程师，负责 Web 端和移动端部分模块的开发工作。自 2010 年接触前端及相关技术以来，一直从事前端开发相关的工作。参与过 CMS 系统、室内地图、CDN 平台、开发测试平台、社交应用及办公协作平台相关系统的设计和前端开发工作