CSS设计指南

目 　 　录

第1章 　HTML标记与文档结构1

1.1 　HTML标记基础2

1.1.1 　文本用闭合标签2

1.1.2 　引用内容用自...

目 　 　录

第1章 　HTML标记与文档结构1

1.1 　HTML标记基础2

1.1.1 　文本用闭合标签2

1.1.2 　引用内容用自闭合标签3

1.1.3 　属性4

1.1.4 　标题与段落5

1.1.5 　复合元素5

1.1.6 　嵌套标签6

1.2 　HTML文档剖析7

1.2.1 　HTML模板7

1.2.2 　块级元素和行内元素10

1.2.3 　嵌套的元素15

1.3 　文档对象模型19

1.4 　小结21

第2章 　CSS工作原理23

2.1 　剖析CSS规则24

CSS规则命名惯例27

2.2 　上下文选择符28

2.3 　特殊的上下文选择符33

2.3.1 　子选择符>33

2.3.2 　紧邻同胞选择符+34

2.3.3 　一般同胞选择符~34

2.3.4 　通用选择符*35

2.4 　ID和类选择符36

2.4.1 　类属性36

2.4.2 　ID属性39

2.4.3 　什么时候用ID，什么时候用类40

2.4.4 　ID和类的小结42

2.5 　属性选择符42

2.5.1 　属性名选择符43

2.5.2 　属性值选择符43

2.5.3 　属性选择符的小结44

2.6 　伪类44

2.6.1 　UI伪类44

2.6.2 　结构化伪类47

2.7 　伪元素48

2.8 　继承50

2.9 　层叠51

2.9.1 　样式来源51

2.9.2 　层叠规则52

2.9.3 　计算特指度54

2.10 　规则声明56

2.10.1 　文本值56

2.10.2 　数字值57

2.10.3 　颜色值58

2.11 　小结62

第3章 　定位元素63

3.1 　理解盒模型63

3.1.1 　盒子边框66

3.1.2 　盒子内边距68

3.1.3 　盒子外边距69

3.1.4 　叠加外边距70

3.1.5 　外边距的单位71

3.2 　盒子有多大71

3.3 　浮动与清除77

3.3.1 　浮动78

3.3.2 　围住浮动元素的三种方法80

3.4 　定位87

3.4.1 　静态定位88

3.4.2 　相对定位88

3.4.3 　绝对定位89

3.4.4 　固定定位90

3.4.5 　定位上下文91

3.5 　显示属性94

3.6 　背景95

3.6.1 　CSS背景属性96

3.6.2 　背景颜色96

3.6.3 　背景图片97

3.6.4 　背景重复98

3.6.5 　背景位置99

3.6.6 　背景尺寸101

3.6.7 　背景粘附102

3.6.8 　简写背景属性103

3.6.9 　其他CSS3背景属性103

3.6.10 　多背景图片104

3.6.11 　背景渐变106

3.7 　小结110

第4章 　字体和文本111

4.1 　字体111

4.1.1 　字体族112

4.1.2 　字体大小115

4.1.3 　字体样式118

4.1.4 　字体粗细119

4.1.5 　字体变化120

4.1.6 　简写字体属性120

4.2 　文本属性121

4.2.1 　文本缩进121

4.2.2 　字符间距124

4.2.3 　单词间距125

4.2.4 　文本装饰125

4.2.5 　文本对齐126

4.2.6 　行高127

4.2.7 　文本转换128

4.2.8 　垂直对齐129

4.3 　Web字体大揭秘130

4.3.1 　公共字体库131

4.3.2 　打包的@font-face包132

4.3.3 　生成@font-face包133

4.4 　文字版式134

4.4.1 　简单的文本布局134

4.4.2 　基于网格排版138

4.4.3 　经典的排版练习145

4.5 　小结154

第5章 　页面布局155

5.1 　布局的基本概念156

5.2 　三栏?固定宽度布局157

5.3 　三栏?中栏流动布局172

5.3.1 　用负外边距实现172

5.3.2 　用CSS3单元格实现176

5.4 　多行多栏布局179

5.4.1 　CSS选择符的实际应用181

5.4.2 　内部DIV实战183

5.5 　小结183

第6章 　界面组件185

6.1 　导航菜单185

6.1.1 　纵向菜单186

6.1.2 　横向菜单189

6.1.3 　下拉菜单190

6.2 　表单200

6.2.1 　HTML表单元素201

6.2.2 　表单标记策略208

6.2.3 　设定表单样式209

6.2.4 　设计搜索表单218

6.3 　弹出层220

6.3.1 　堆叠上下文和z-index223

6.3.2 　用CSS创造三角形225

6.4 　小结226

第7章 　CSS3实战227

7.1 　规划页面结构227

7.2 　页眉231

7.2.1 　页面标题232

7.2.2 　搜索表单235

7.2.3 　菜单236

7.3 　专题区242

7.3.1 　登录表单246

7.3.2 　博文链接249

7.4 　图书区251

7.5 　页脚257

7.6 　小结259

第8章 　响应式设计261

8.1 　小设备上的大布局261

8.2 　媒体查询263

8.2.1 　@media规则264

8.2.2 　<link>标签的media属性266

8.2.3 　断点266

8.2.4 　用<meta>标签设定视口267

8.3 　针对平板优化布局268

8.4 　针对智能手机优化布局271

8.5 　最后两个问题275

8.5.1 　移动Safari中的缩放bug275

8.5.2 　让下拉菜单支持触摸276

8.6 　小结278

附录 　技术提示279

索引287

前　　言 对网页设计师来说，这是一个激动人心的时刻！互联网已经囊括了几乎所有媒体，有线电视、CD和DVD已经被Hulu、Netflix、Pandora和Spotify等这些按需取用的在线服务取代。 当然，访问这些媒体的设备同样异彩纷呈。有传统的台式电脑、笔记本电脑，还有平板电脑、智能手机，甚至60英寸的大屏幕电视。 而保障所有这些设备和媒体顺畅运作，有一套全新的技术标准：HTML5、CSS3...

(查看全部试读)