Web前端开发精品课 HTML与CSS进阶教程PDF电子书下载

第一部分 HTM L进阶 2

第01章 HTML基础知识 2

1.1 HTML和CSS进阶简介 2

1.1.1 你真的精通HTML和CSS吗 2

1.1.2 进阶教程简介 3

1.2 HTML、 XHTML和HTM L5 3

1.2.1 HTML和XHTML 3

1.2.2 HTML5 4

1.3 div和span 6

1.4 id和class 7

1.4.1 id属性 7

1.4.2 class属性 7

1.5 浏览器标题栏小图标 8

第02章 语义化 10

2.1 语义化简介 10

2.2 标题语义化 12

2.3 图片语义化 14

2.3.1 alt属性和title属性 14

2.3.2 figure元素和figcaption元素 15

2.4 表格语义化 16

2.5 表单语义化 19

2.5.1 label标签 20

2.5.2 fieldset标签和legend标签 21

2.6 其他语义化 22

2.6.1 换行符<br/> 22

2.6.2 无序列表ul 24

2.6.3 strong标签和em标签 25

2.6.4 del标签和ins标签 25

2.6.5 img标签 26

2.7 语义化验证 26

2.8 HTML5舍弃的标签 27

第二部分 CSS进阶 30

第03章 CSS基础知识 30

3.1 CSS单位 30

3.1.1 绝对单位 30

3.1.2 相对单位 31

3.2 CSS特性 37

3.2.1 继承性 37

3.2.2 层叠性 39

3.3 CSS优先级 40

3.3.1 引用方式冲突 41

3.3.2 继承方式冲突 41

3.3.3 指定样式冲突 42

3.3.4 继承样式和指定样式冲突 44

3.3.5 !important 45

3.4 CSS引入方式 47

3.4.1 外部样式表 48

3.4.2 内部样式表 48

3.4.3 行内样式表 50

3.5 CSS选择器 51

3.5.1 后代选择器 51

3.5.2 子代选择器 52

3.5.3 兄弟选择器 54

3.5.4 相邻选择器 55

第04章 CSS规范 58

4.1 CSS规范简介 58

4.2 命名规范 59

4.2.1 CSS文件命名 59

4.2.2 id和class命名 59

4.3 书写规范 62

4.4 注释规范 65

4.4.1 顶部注释 65

4.4.2 模块注释 65

4.4.3 简单注释 65

4.5 CSS reset 66

4.5 1什么是CSS reset 66

4.5.2 为什么要用CSS reset 66

4.5.3 如何使用CSS reset 67

第05章 盒子模型 70

5.1 CSS盒子模型 70

5.2 深入border 73

5.2.1 性能差异 74

5.2.2 兼容差异 74

5.3 深入padding 74

5.4 外边距叠加 76

5.4.1 外边距叠加的三种情况 77

5.4.2 外边距叠加的意义 78

5.5 负margin技术 79

5.5.1 负margin简介 79

5.5.2 负margin技巧 82

5.6 overflow 86

第06章 display属性 90

6.1 块元素和行内元素 90

6.1.1 块元素 90

6.1.2 行内元素 92

6.2 display简介 93

6.2.1 块元素 93

6.2.2 inline元素 93

6.2.3 inline-block元素 94

6.3 display：none 95

6.3.1 display：none简介 95

6.3.2 “display：none”和“visibility：hidden”的区别 96

6.4 display：table-cell 98

6.4.1 图片垂直居中于元素 98

6.4.2 等高布局 100

6.4.3 自动平均划分元素 102

6.5 去除inline-block元素间距 103

第07章 文本效果 107

7.1 文本效果简介 107

7.2 深入text-indent 108

7.3 深入text-align 111

7.3.1 text-align起作用的元素 112

7.3.2 “text- align：center；”与“margin：O auto；”的区别 113

7.4 深入line-height 113

7.4.1 line-height的定义 113

7.4.2 line-height取值 115

7.5 深入vertical-align 118

7.5.1 vertical-align属性取值 119

7.5.2 vertical-align属性应用 121

第08章 表单效果 126

8.1 表单效果简介 126

8.2 深入radio和checkbox 127

8.3 深入textarea 128

8.3.1 固定大小，禁用拖动 129

8.3.2 在chrome、 Firefox和IE实现相同的外观 131

8.4 表单对齐 132

第09章 浮动布局 136

9.1 正常文档流 136

9.1.1 正常文档流 136

9.1.2 脱离文档流 138

9.2 深入浮动 139

9.3 浮动的影响 142

9.3.1 对自身的影响 142

9.3.2 对父元素影响 143

9.3.3 对兄弟元素的影响 144

9.3.4 对子元素的影响 148

9.4 浮动的负作用 150

9.5 清除浮动 152

9.5.1 clear：both 152

9.5.2 overflow：hidden 154

9.5.3 ：：after伪元素 155

第10章 定位布局 157

10.1 深入定位 157

10.1.1 子元素相对父元素定位 157

10.1.2 子元素相对祖先元素定位 160

10.2 z-index属性 162

第11章 CSS图形 165

11.1 CSS图形简介 165

11.2 三角形 166

11.2.1 CSS实现三角形的原理 166

11.2.2 带边框的三角形 168

11.3 圆 172

11.3.1 CSS实现圆角 172

11.3.2 CSS实现半圆和圆 175

11.3.3 border-radius派生子属性 177

11.4 椭圆 177

第12章 性能优化 180

12.1 CSS优化简介 180

12.2 属性缩写 181

12.2.1 盒模型缩写 181

12.2.2 背景缩写 183

12.2.3 字体缩写 184

12.2.4 颜色值缩写 184

12.3 语法压编 185

12.3.1 空白符 185

12.3.2 结尾分号 186

12.3.3 url的引号 186

12.3.4 属性值为0 187

12.3.5 属性值为以0开头的小数 187

12.3.6 合并相同的定义 187

12.3.7 利用继承进行合并 188

12.4 压缩工具 190

12.5 图片压缩 191

12.5.1 JPEG、 PNG和GIF 191

12.5.2 图片压缩 191

12.6 高性能的选择器 191

12.6.1 选择器在浏览器的解析原理 192

12.6.2 不同选择器的解析速度 192

第13章 CSS技巧 194

13.1 水平居中 194

13.1.1 文字的水平居中 194

13.1.2 元素的水平居中 195

13.2 垂直居中 198

13.2 1文字的垂直居中 198

13.2.2 元素的垂直居中 200

13.3 CSS Sprite 203

13.4 Icon Font图标 206

13.4.1 iconfont网站 207

13.4.2 icon font技术 209

第14章 重要概念 214

14.1 CSS中的重要概念 214

14.2 包含块 214

14.2.1 什么是包含块 214

14.2.2 包含块的判定以及包含块的范围 215

14.3 层叠上下文 216

14.3.1 什么是层叠上下文？ 216

14.3.2 什么是层叠级别？ 217

14.3.3 层叠上下文的特点 218

14.4 BFC和IFC 220

14.4.1 基本概念 220

14.4.2 什么是BFC 221

14.4.3 BFC的用途 223