CSDN首发-CSS网络大讲堂 -CSS教程-窗内网

CSS网络大讲堂

 

本书主要介绍CSS的概念、类型、文本样式、边框样式、块样式、位置样式、列表和滤镜，同时介绍了关于CSS的高级应用，例如CSS和XML的整合以及和JavaScript的结合。本书为实例配备了视频教学文件，读者可以通过视频文件更加直观地学习CSS网页设计知识。

目    录

第0章  绪论1

0.1  CSS简介1

0.2  CSS的历史1

0.3  CSS的特点2

0.4  CSS的优势3

0.5  使用CSS4

0.6  常用的开发工具4

0.7  记事本4

0.8  FrontPage5

0.9  Dreamweaver6

0.10  CSS跨浏览器支持技术7

0.11  给特定浏览器提供不同的样式7

0.12  解决空白边叠加问题10

0.13  选择合适的DOCTYPE11

0.14  CSS Bug13

0.15  校验CSS Bug14

0.16  Bug捕捉基本步骤15

0.17  CSS建议18

第一篇  CSS基础篇

第1章  CSS快速入门22

1.1  使用HTML定义页面样式时的一些

问题22

1.1.1  问题描述22

1.1.2  解决办法22

1.1.3  知识扩展——CSS的语法22

1.1.4  网络课堂26

1.2  CSS的几种使用方式是什么26

1.2.1  问题描述26

1.2.2  解决办法26

1.2.3  知识扩展——内嵌样式表27

1.2.4  知识扩展——内部样式表27

1.2.5  知识扩展——链入样式表30

1.2.6  知识扩展——导入样式表30

1.2.7  触类旁通31

1.2.8  网络课堂33

1.3  CSS代码中的注释问题33

1.3.1  问题描述33

1.3.2  解决办法33

1.3.3  知识扩展——使用注释34

1.3.4  网络课堂35

1.4  CSS中的单位有哪些35

1.4.1  问题描述35

1.4.2  解决办法35

1.4.3  知识扩展——长度单位35

1.4.4  知识扩展——百分比单位36

1.4.5  知识扩展——颜色单位37

1.4.6  知识扩展——url38

1.4.7  网络课堂39

1.5  各种CSS用法的执行顺序是什么39

1.5.1  问题描述39

1.5.2  解决办法40

1.5.3  知识扩展——CSS的后来居上

原则40

1.5.4  知识扩展——CSS的继承性41

1.5.5  知识扩展——CSS的选择符优

先级42

1.5.6  知识扩展——!important声明强

制优先43

1.5.7  网络课堂43

第2章  CSS选择符44

2.1  统一设置同一标签样式44

2.1.1  问题描述44

2.1.2  解决办法44

2.1.3  知识扩展——什么是CSS选

择符44

2.1.4  知识扩展——类型选择符以及

属性选择符45

2.1.5  网络课堂46

2.2  CSS中的ID选择符怎么用46

2.2.1  问题描述46

2.2.2  解决办法46

2.2.3  知识扩展——ID选择符以及

包含选择符47

2.2.4  网络课堂48

2.3  CSS中的类选择符48

2.3.1  问题描述48

2.3.2  解决办法49

2.3.3  知识扩展——类选择符49

2.3.4  网络课堂50

2.4  CSS中的伪类能应用在按钮中吗50

2.4.1  问题描述50

2.4.2  解决办法50

2.4.3  知识扩展——CSS中的伪类51

2.4.4  网络课堂51

2.5  设置首字下沉问题52

2.5.1  问题描述52

2.5.2  解决办法53

2.5.3  知识扩展——CSS中的伪对象53

2.5.4  网络课堂54

2.6  不同标签的相同样式55

2.6.1  问题描述55

2.6.2  解决办法55

2.6.3  知识扩展——选择符分组55

2.6.4  网络课堂56

2.7  选择符组的优先级问题56

2.7.1  问题描述56

2.7.2  解决办法56

2.7.3  知识扩展——选择符组的优

先级57

2.7.4  网络课堂58

第3章  伪类和伪元素59

3.1  超链接伪类的用法59

3.1.1  问题描述59

3.1.2  解决办法59

3.1.3  知识扩展——超链接伪类的

用法59

3.1.4  网络课堂60

3.2  IE是否支持:focus伪类60

3.2.1  问题描述60

3.2.2  解决办法61

3.2.3  知识扩展——:focus伪类的

用法61

3.2.4  网络课堂62

3.3  :first-child伪类的用法62

3.3.1  问题描述62

3.3.2  解决办法63

3.3.3  知识扩展——:first-child伪类的

用法63

3.3.4  网络课堂64

3.4  可适用于@page规则的伪类64

3.4.1  问题描述64

3.4.2  解决办法64

3.4.3  知识扩展——可适用于@page

规则的伪类65

3.4.4  网络课堂66

3.5  :lang伪类的用法66

3.5.1  问题描述66

3.5.2  解决办法67

3.5.3  知识扩展——:lang伪类的用法67

3.5.4  网络课堂69

3.6  伪元素:first-letter和:first-line的用法69

3.6.1  问题描述69

3.6.2  解决办法71

3.6.3  知识扩展——伪元素:first-letter和:first-line的用法72

3.6.4  网络课堂75

3.7  如何解决Firefox检测不到div高度

问题75

3.7.1  问题描述75

3.7.2  解决办法76

3.7.3  知识扩展——伪元素:before和

:after的用法77

3.7.4  网络课堂79

第二篇  CSS中级篇

第4章  文本属性80

4.1  如何设置字体颜色80

4.1.1  问题描述80

4.1.2  解决办法80

4.1.3  知识扩展——设置字体颜色

属性color81

4.1.4  网络课堂82

4.2  CSS字体样式的问题82

4.2.1  问题描述82

4.2.2  解决办法82

4.2.3  知识扩展——font-family属性82

4.2.4  知识扩展——font-style属性83

4.2.5  知识扩展——font-weight属性84

4.2.6  知识扩展——font-size属性85

4.2.7  知识扩展——font属性86

4.2.8  网络课堂87

4.3  关于使用CSS实现字体闪烁效果的

问题87

4.3.1  问题描述87

4.3.2  解决办法88

4.3.3  知识扩展——text-decoration

属性88

4.3.4  知识扩展——text-underline-position

属性89

4.3.5  知识扩展——text-shadow属性89

4.3.6  网络课堂90

4.4  字符之间的空白问题90

4.4.1  问题描述90

4.4.2  解决办法91

4.4.3  知识扩展——letter-spacing

属性92

4.4.4  知识扩展——word-spacing

属性93

4.4.5  网络课堂94

4.5  关于line-height的问题94

4.5.1  问题描述94

4.5.2  解决办法95

4.5.3  知识扩展——line-height属性

用来设置行间距96

4.5.4  网络课堂97

4.6  如何设置文本自动换行97

4.6.1  问题描述97

4.6.2  解决办法97

4.6.3  知识扩展——word-break属性97

4.6.4  知识扩展——line-break属性98

4.6.5  知识扩展——word-wrap属性99

4.6.6  网络课堂99

4.7  如何用CSS使首字母变为大写99

4.7.1  问题描述99

4.7.2  解决办法100

4.7.3  知识扩展——text-transform

属性100

4.7.4  知识扩展——font-variant属性101

4.7.5  网络课堂102

4.8  如何用CSS截取内容显示省略号102

4.8.1  问题描述102

4.8.2  解决办法103

4.8.3  知识扩展——text-overflow

属性103

4.8.4  网络课堂105

4.9  如何在表格中缩进文本105

4.9.1  问题描述105

4.9.2  解决办法105

4.9.3  知识扩展——text-indent属性105

4.9.4  网络课堂107

4.10  关于设置文本的行网格尺寸107

4.10.1  问题描述107

4.10.2  解决办法108

4.10.3  知识扩展——layout-grid-char

属性108

4.10.4  知识扩展——layout-grid-line

属性108

4.10.5  知识扩展——layout-grid-type

属性109

4.10.6  知识扩展——layout-grid属性109

4.10.7  网络课堂110

4.11  CSS如何实现div居中110

4.11.1  问题描述110

4.11.2  解决办法110

4.11.3  知识扩展——text-align属性110

4.11.4  知识扩展——vertical-align

属性112

4.11.5  知识扩展——ruby-align属性114

4.11.6  网络课堂115

4.12  文字怎么实现竖排115

4.12.1  问题描述115

4.12.2  解决办法115

4.12.3  知识扩展——direction属性116

4.12.4  知识扩展——writing-mode

属性117

4.12.5  知识扩展——layout-flow

属性118

4.12.6  网络课堂119

第5章  背景属性120

5.1  背景颜色不显示120

5.1.1  问题描述120

5.1.2  解决办法120

5.1.3  知识扩展——background-color

属性120

5.1.4  知识扩展——layer-background-color属性121

5.1.5  网络课堂122

5.2  如何设置背景图片122

5.2.1  问题描述122

5.2.2  解决办法122

5.2.3  知识扩展——background-image

属性122

5.2.4  知识扩展——layer-background-image属性125

5.2.5  网络课堂125

5.3  JavaScript如何设置背景图片不重复126

5.3.1  问题描述126

5.3.2  解决办法126

5.3.3  知识扩展——background-repeat

属性126

5.3.4  网络课堂128

5.4  如何设置背景图片的位置128

5.4.1  问题描述128

5.4.2  解决办法129

5.4.3  知识扩展——background-position

属性130

5.4.4  知识扩展——background-position-x属性133

5.4.5  知识扩展——background-position-y属性133

5.4.6  触类旁通134

5.4.7  网络课堂135

5.5  background-attachment属性没有效果136

5.5.1  问题描述136

5.5.2  解决办法136

5.5.3  知识扩展——background-attachment属性136

5.5.4  知识扩展——background属性138

5.5.5  网络课堂140

第6章  边框与尺寸属性141

6.1  如何设置文本框的边框样式141

6.1.1  问题描述141

6.1.2  解决办法142

6.1.3  知识扩展——border-style属性143

6.1.4  知识扩展——border-bottom-style

属性145

6.1.5  知识扩展——border-left-style

属性146

6.1.6  知识扩展——border-right-style

属性147

6.1.7  知识扩展——border-top-style

属性147

6.1.8  触类旁通148

6.1.9  网络课堂150

6.2  HTML中边框颜色的问题150

6.2.1  问题描述150

6.2.2  解决办法151

6.2.3  知识扩展——border-color属性151

6.2.4  知识扩展——border-bottom-color

属性152

6.2.5  知识扩展——border-left-color

属性153

6.2.6  知识扩展——border-right-color

属性153

6.2.7  知识扩展——border-top-color

属性154

6.2.8  网络课堂155

6.3  如何用css控制table的边框宽度和

边框颜色155

6.3.1  问题描述155

6.3.2  解决办法157

6.3.3  知识扩展——border-width

属性158

6.3.4  知识扩展——border-bottom-width

属性159

6.3.5  知识扩展——border-left-width

属性160

6.3.6  知识扩展——border-right-width

属性160

6.3.7  知识扩展——border-top-width

属性161

6.3.8  触类旁通162

6.3.9  网络课堂163

6.4  如何为页面中的图像设置边框163

6.4.1  问题描述163

6.4.2  解决办法164

6.4.3  知识扩展——border属性165

6.4.4  知识扩展——border-top属性167

6.4.5  知识扩展——border-bottom

属性167

6.4.6  知识扩展——border-left属性168

6.4.7  知识扩展——border-right

属性168

6.4.8  触类旁通169

6.4.9  网络课堂170

6.5  关于height属性的百分比问题171

6.5.1  问题描述171

6.5.2  解决办法171

6.5.3  知识扩展——height属性172

6.5.4  知识扩展——min-height属性173

6.5.5  知识扩展——max-height属性173

6.5.6  触类旁通174

6.5.7  网络课堂175

6.6  如何防止表格被内容撑开175

6.6.1  问题描述175

6.6.2  解决办法175

6.6.3  知识扩展——width属性177

6.6.4  知识扩展——min-width属性178

6.6.5  知识扩展——max-width属性178

6.6.6  网络课堂179

第7章  边距与间隙属性180

7.1  如何设置页面模块的边距180

7.1.1  问题描述180

7.1.2  解决办法180

7.1.3  知识扩展——margin属性180

7.1.4  触类旁通182

7.1.5  网络课堂184

7.2  img标签的margin-bottom属性无效184

7.2.1  问题描述184

7.2.2  解决办法185

7.2.3  知识扩展——margin-bottom

属性185

7.2.4  知识扩展——margin-left属性186

7.2.5  知识扩展——margin-right属性188

7.2.6  知识扩展——margin-top属性189

7.2.7  网络课堂190

7.3  padding属性在不同浏览器中的显示

差异问题190

7.3.1  问题描述190

7.3.2  解决办法191

7.3.3  知识扩展——padding属性191

7.3.4  网络课堂193

7.4  IE 6/7下设置padding-bottom时

出现的Bug193

7.4.1  问题描述193

7.4.2  解决办法194

7.4.3  知识扩展——padding-bottom

属性194

7.4.4  知识扩展——padding-left属性195

7.4.5  知识扩展——padding-right

属性196

7.4.6  知识扩展——padding-top属性196

7.4.7  触类旁通199

7.4.8  网络课堂199

第8章  定位与布局200

8.1  如何设置元素的定位方式200

8.1.1  问题描述200

8.1.2  解决办法201

8.1.3  知识扩展——position属性201

8.1.4  触类旁通207

8.1.5  网络课堂207

8.2  关于绝对定位元素无法覆盖相对

定位元素207

8.2.1  问题描述207

8.2.2  解决办法209

8.2.3  知识扩展——边偏移属性210

8.2.4  网络课堂211

8.3  请问css的z-index属性层叠顺序的

问题211

8.3.1  问题描述211

8.3.2  解决办法212

8.3.3  知识扩展——z-index属性213

8.3.4  网络课堂214

8.4  为什么横向滚动条不可用215

8.4.1  问题描述215

8.4.2  解决办法215

8.4.3  知识扩展——overflow属性215

8.4.4  知识扩展——overflow-x属性

和overflow-y属性216

8.4.5  网络课堂218

8.5  求解CSS样式中float属性的问题218

8.5.1  问题描述218

8.5.2  解决办法218

8.5.3  知识扩展——float属性219

8.5.4  知识扩展——clear属性220

8.5.5  网络课堂221

8.6  如何利用clip属性创造彩色字体221

8.6.1  问题描述221

8.6.2  解决办法222

8.6.3  知识扩展——clip属性222

8.6.4  网络课堂224

8.7  IE下块元素如何实现display:inline-block

的效果224

8.7.1  问题描述224

8.7.2  解决办法224

8.7.3  知识扩展——display属性225

8.7.4  知识扩展——visibility属性227

8.7.5  触类旁通228

8.7.6  网络课堂230

第三篇  CSS高级篇

第9章  列表属性231

9.1  为什么list-style-type:decimal在IE中

显示的全是1231

9.1.1  问题描述231

9.1.2  解决办法231

9.1.3  知识扩展——list-style-type

属性232

9.1.4  触类旁通235

9.1.5  网络课堂235

9.2  list-style-image的图标图像对齐问题236

9.2.1  问题描述236

9.2.2  解决办法237

9.2.3  知识扩展——list-style-image

属性237

9.2.4  触类旁通239

9.2.5  网络课堂240

9.3  列表的项目符号消失问题240

9.3.1  问题描述240

9.3.2  解决办法241

9.3.3  知识扩展——list-style-position

属性242

9.3.4  触类旁通243

9.3.5  网络课堂245

9.4  如何水平显示列表245

9.4.1  问题描述245

9.4.2  解决办法246

9.4.3  知识扩展——list-style属性246

9.4.4  网络课堂247

第10章  滚动条属性248

10.1  如何制作带有彩色亮边框的滚动条248

10.1.1  问题描述248

10.1.2  解决办法248

10.1.3  知识扩展——scrollbar-highlight-

color属性250

10.1.4  网络课堂250

10.2  如何制作带有彩色3D亮边框的

滚动条251

10.2.1  问题描述251

10.2.2  解决办法251

10.2.3  知识扩展——scrollbar-3dlight-

color属性252

10.2.4  网络课堂253

10.3  如何制作彩色滚动条区块253

10.3.1  问题描述253

10.3.2  解决办法254

10.3.3  知识扩展——scrollbar-face-color

属性255

10.3.4  网络课堂255

10.4  如何使方向箭头消失256

10.4.1  问题描述256

10.4.2  解决办法256

10.4.3  知识扩展——scrollbar-arrow-color属性257

10.4.4  网络课堂258

10.5  如何制作彩色滚动条暗边框258

10.5.1  问题描述258

10.5.2  解决办法259

10.5.3  知识扩展——scrollbar-shadow-color属性260

10.5.4  网络课堂260

10.6  关于设置滚动条暗边框属性的区别261

10.6.1  问题描述261

10.6.2  解决办法261

10.6.3  知识扩展——scrollbar-darkshadow-

color属性262

10.6.4  网络课堂263

10.7  如何制作滚动条基准色263

10.7.1  问题描述263

10.7.2  解决办法264

10.7.3  知识扩展——scrollbar-base-color

属性265

10.7.4  网络课堂265

10.8  如何制作彩色滚动条拖动区域266

10.8.1  问题描述266

10.8.2  解决办法266

10.8.3  知识扩展——scrollbar-track-color

属性267

10.8.4  网络课堂267

第11章  改善页面中的表格268

11.1  如何隐藏表格中空单元格上的边框

和背景268

11.1.1  问题描述268

11.1.2  解决办法269

11.1.3  知识扩展——empty-cells

属性270

11.1.4  触类旁通271

11.1.5  网络课堂272

11.2  如何隐藏单元格超出的数据272

11.2.1  问题描述272

11.2.2  解决办法274

11.2.3  知识扩展——table-layout

属性275

11.2.4  网络课堂276

11.3  如何设置表格标题的位置277

11.3.1  问题描述277

11.3.2  解决办法278

11.3.3  知识扩展——caption-side

属性278

11.3.4  知识扩展——表格特有的

元素280

11.3.5  网络课堂280

11.4  如何制作一个单线边框表格281

11.4.1  问题描述281

11.4.2  解决办法282

11.4.3  知识扩展——border-collapse

属性282

11.4.4  知识扩展——设置表格背景

颜色交替显示283

11.4.5  网络课堂286

11.5  如何设置单元格边界之间的距离286

11.5.1  问题描述286

11.5.2  解决办法287

11.5.3  知识扩展——border-spacing

属性287

11.5.4  触类旁通288

11.5.5  网络课堂292

第12章  逐步改善页面中的表单293

12.1  如何使用CSS设计表单上的元素293

12.1.1  问题描述293

12.1.2  解决办法293

12.1.3  知识扩展——CSS为表单元素

设置样式293

12.1.4  触类旁通296

12.1.5  网络课堂297

12.2  如何使提交按钮看起来像文本297

12.2.1  问题描述297

12.2.2  解决办法298

12.2.3  知识扩展——同一个表单中的

元素应用不同的样式299

12.2.4  网络课堂301

12.3  关于Dreamweaver的层和表格问题301

12.3.1  问题描述301

12.3.2  解决办法301

12.3.3  知识扩展——使用CSS代替表格

设计一个含有两列的表单301

12.3.4  触类旁通304

12.3.5  网络课堂307

12.4  HTML中的fieldset属性的相关问题307

12.4.1  问题描述307

12.4.2  解决办法308

12.4.3  知识扩展——fieldset元素310

12.4.4  网络课堂312

12.5  为表单设计快捷键312

12.5.1  问题描述312

12.5.2  解决办法312

12.5.3  知识扩展——for属性和accesskey

属性313

12.5.4  网络课堂315

12.6  如何在下拉菜单中使用不同的颜色来

强调各菜单项315

12.6.1  问题描述315

12.6.2  解决办法316

12.6.3  知识扩展——使用不同背景

强调下拉菜单中各项317

12.6.4  网络课堂319

12.7  当用户单击时如何突出表单域.319

12.7.1  问题描述319

12.7.2  解决办法319

12.7.3  知识扩展——强调用户单击的

表单字段320

12.7.4  网络课堂322

第13章  滤镜及其他323

13.1  如何实现博客名的文字特效323

13.1.1  问题描述323

13.1.2  解决办法324

13.1.3  知识扩展——Mask滤镜325

13.1.4  网络课堂325

13.2  如何实现文章标题的文字特效326

13.2.1  问题描述326

13.2.2  解决办法326

13.2.3  知识扩展——Blur滤镜327

13.2.4  知识扩展——其他模糊滤镜328

13.2.5  网络课堂329

13.3  如何为图片添加边框329

13.3.1  问题描述329

13.3.2  解决办法330

13.3.3  知识扩展——Glow滤镜330

13.3.4  触类旁通331

13.3.5  网络课堂332

13.4  如何控制雾化网页的透明度332

13.4.1  问题描述332

13.4.2  解决办法332

13.4.3  知识扩展——Alpha滤镜333

13.4.4  知识扩展——Chroma滤镜334

13.4.5  触类旁通335

13.4.6  网络课堂336

13.5  对一个对象同时使用多个滤镜的问题336

13.5.1  问题描述336

13.5.2  解决办法337

13.5.3  知识扩展——FlipH滤镜338

13.5.4  知识扩展——FlipV滤镜338

13.5.5  网络课堂340

13.6  同一个对象同时使用多个无参滤镜

失效问题340

13.6.1  问题描述340

13.6.2  解决办法340

13.6.3  知识扩展——Xray滤镜340

13.6.4  知识扩展——Invert滤镜341

13.6.5  网络课堂342

13.7  如何实现描边字效果342

13.7.1  问题描述342

13.7.2  解决办法343

13.7.3  知识扩展——Shadow滤镜343

13.7.4  知识扩展——DropShadow

滤镜344

13.7.5  网络课堂345

13.8  制作多张图像轮换交替显示效果346

13.8.1  问题描述346

13.8.2  解决办法346

13.8.3  知识扩展——BlendTrans滤镜348

13.8.4  知识扩展——RevealTrans

滤镜350

13.8.5  网络课堂352

13.9  让文字产生波纹变形352

13.9.1  问题描述352

13.9.2  解决办法352

13.9.3  知识扩展——Wave滤镜352

13.9.4  网络课堂354

13.10  如何添加多个模拟光源354

13.10.1  问题描述354

13.10.2  解决办法354

13.10.3  知识扩展——Light滤镜355

13.10.4  触类旁通357

13.10.5  网络课堂358

13.11  如何轻松设置灰度页面358

13.11.1  问题描述358

13.11.2  解决办法359

13.11.3  知识扩展——Gray滤镜359

13.11.4  网络课堂359

13.12  如何实现漂亮的鼠标指针360

13.12.1  问题描述360

13.12.2  解决办法360

13.12.3  知识扩展——多种鼠标

指针样式360

13.12.4  网络课堂362

第14章  与XML整合363

14.1  什么是XML363

14.1.1  问题描述363

14.1.2  解决办法363

14.1.3  知识扩展——XML简介363

14.1.4  知识扩展——XML标记与

元素364

14.1.5  知识扩展——XML属性367

14.1.6  触类旁通367

14.1.7  网络课堂369

14.2  为什么要发展XML？369

14.2.1  问题描述369

14.2.2  解决办法369

14.2.3  知识扩展——在XML中引用

外部CSS样式文件370

14.2.4  触类旁通374

14.2.5  网络课堂375

14.3  XML使用嵌入式CSS样式出错375

14.3.1  问题描述375

14.3.2  解决办法376

14.3.3  知识扩展——在XML中使用

嵌入式CSS样式377

14.3.4  触类旁通378

14.3.5  网络课堂379

14.4  为XML设置的CSS样式无效379

14.4.1  问题描述379

14.4.2  解决办法380

14.4.3  知识扩展——为XML定义

复杂的CSS样式380

14.4.4  网络课堂383

14.5  使用XSLT删除XML文件中的重复

 元素383

14.5.1  问题描述383

14.5.2  解决办法384

14.5.3  知识扩展——XSLT简介386

14.5.4  知识扩展——XSLT详解386

14.5.5  触类旁通392

14.5.6  网络课堂393

第四篇  实例应用篇

第15章  常见的CSS页面特效394

15.1  会变色的表格边框394

15.2  随着鼠标浮动的文字396

15.3  会闪的图片398

15.4  图片翻转399

15.5  舞动的文字401

15.6  会收缩的导航栏405

15.7  逐渐变色的表格408

第16章  制作个人博客页面413

16.1  案例效果图分析413

16.2  页面框架布局设计415

16.3  站点目录结构设计417

16.4  index页面418

16.4.1  页面整体框架布局418

16.4.2  页面头部设计419

16.4.3  页面底部设计421

16.4.4  首页banner_content内容区

设计423

16.4.5  首页main_content内容区

设计426

16.5  留言页面431

16.6  作品集页面434

16.6.1  作品集banner_content内容区

设计434

16.6.2  作品集main_content内容区

设计437