CSS 入门与实践

第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