Web前端开发系列丛书：CSS入门与实践

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

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

目录
第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

第5章选择器
第1～4章介绍了CSS的语法、使用方式和基本特征。本章将介绍CSS中的一款十分灵活的工具——选择器。
选择器通过一系列的规则指定应用当前样式规则的目标元素，也就是说，样式规则只对与选择器相匹配的元素生效，对不匹配的元素无效。
5.1基本选择器
基本选择器包括以下4种类型。
1. 元素选择器
元素选择器使用元素标签作为选择器。p 会匹配当前页面中的所有

元素。/ 匹配当前页面中的所有

元素 /
p {
color: #333;
}
2. ID选择器
#target 匹配 id 属性值为"target"的一个元素。#header {
margin-bottom: 24px;
}
一个页面中不能存在两个 id 属性值相同的元素。
3. 类选择器
.target 匹配 class 属性值中包含"target"单词的元素。.error {
color: red;
}
HTML元素的class属性可以包含多个值，这些值以列表的形式存在(在DOM中称为classListclassList: 访问网址为https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。)。当列表中有一个值与选择器匹配时，样式就对该元素生效。
……

前言
图形用户界面(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月