CSS代码效果对比学习PDF电子书下载

Chapter 1 CSS基础 2

CSS的概念 2

CSS的应用 2

CSS的优点 2

CSS与HTML 3

内联样式定义 3

实例：通过style属性定义 3

文档样式定义 4

实例：直接定义 4

外部链接定义 5

实例：链接外部样式 6

外部导入定义 7

实例：导入外部样式 7

媒体样式 8

实例：多种媒体 8

Chapter 2　CSS使用规则 12

基本规则 12

基础 12

实例：使用基础规则 12

多个选择符 13

实例：使用多个选择符 13

样式类 14

常规类 14

实例：使用类选择符 15

一般类 16

实例：使用一般类选择符 16

ID类 18

实例：id属性的选择性定义 18

伪类 19

实例：用于链接的伪类定义 19

综合类 20

实例：用于独立链接的伪类定义 20

Chapter 3 在Dreamweaver中建立CSS内联样式 24

实例：使用内联样式 24

创建内部样式表 25

创建基础规则 25

实例：创建基础规则 25

创建常规类 26

实例：创建常规类 26

创建一般类 27

实例：创建一般类 27

创建ID类 29

实例：创建ID类 29

创建伪类 30

实例：创建伪类 30

创建综合类 31

实例：创建综合类 31

创建并引用外部样式表 32

直接创建外部样式表 33

实例：直接创建外部样式表 33

导出外部样式表 34

实例：导出外部样式表 34

引用外部样式表 35

实例：引用外部样式表 35

Chapter 4　CSS文字的设置 38

尺度单位 38

相对单位 38

绝对单位 38

控制字体 38

文字的字体设置 39

实例：同时设置多种字体 39

文字的粗细控制 40

实例：控制文字的粗细 40

文字的字体效果 41

实例：设置斜体样式 41

文字的大小控制 42

实例：控制文字的大小 43

英文字母的大小写转换 44

实例：英文字母大小写的相互转换 44

组合使用字体属性 45

实例：使用字体属性美化页面 46

精确文字排版 47

文字的加线效果 47

实例：文字的加线效果 48

段落的首行缩进 49

实例：控制首行缩进 49

汉字间距 50

实例：控制汉字间距 50

英文单词间距 52

实例：控制英文单词间距 52

行高 53

实例：控制段落行距 53

段落的位置控制 54

实例：控制段落位置 54

文本的转换 55

实例：转换文字大小写 55

文字列表 56

普通列表标记 56

实例：设置各种序列符号 57

图像列表标记 58

实例：设置图像符号 58

列表位置 60

实例：设置列表位置 60

组合使用列表属性 61

实例：使用字体属性美化页面 61

使用Dreamweaver进行CSS文字设置 62

Dreamweaver中的字体设置 63

实例：设置字体 63

Dreamweaver中的文字设置 65

实例：设置文字 65

Dreamweaver中的列表设置 68

实例：列表文字 68

Chapter 5　CSS颜色与背景的设置颜色的设置方法 72

以颜色名称设置 72

以十六进制设置 72

以百分比值设置 73

以数字颜色值设置 73

颜色的设置 73

文字的颜色设置 73

实例：文字颜色 74

文字背景颜色的设置 75

实例：文字背景 75

网页背景颜色的设置 76

实例：页面背景 76

背景图片的设置 77

网页的图片背景设置 77

实例：页面背景 77

背景图片的并排设置 78

实例：背景图像的单向平铺 78

实例：显示单个背景图像 79

图片的定位设置 80

实例：控制背景图片的位置 81

图片的固定设置 82

实例：固定背景图片 82

组合使用背景属性 83

实例：使用背景属性美化页面 84

使用Dreamweaver进行CSS颜色和背景设置 85

Dreamweaver中的颜色设置 85

实例：设置前景色和背景色 85

Dreamweaver中的背景图片设置 87

实例：设置背景图片 87

Chapter 6　元素模块化 92

模块大小 92

实例：设置模块大小 92

模块边界 93

模块外边界 93

实例：统一设置模块周围的空白区域 93

实例：分别设置模块周围的空白区域 94

模块内边界 95

实例：统一设置模块边界与模块内容的间距 96

实例：单独设置模块边界与模块内容的间距 97

模块边框 98

边框宽度 98

实例：统一设置模块边框宽度 99

实例：单独设置模块边框宽度 100

边框样式 101

实例：统一设置模块边框样式 101

实例：单独设置模块边框样式 102

边框颜色 103

实例：统一设置模块边框颜色 103

实例：单独设置模块边框颜色 104

组合设置边框属性 105

实例：统一设置模块边框 105

实例：统一设置各个方向模块边框 106

使用Dreamweaver进行模块设置 108

Dreamweaver中的模块大小设置 108

实例：设置模块大小 108

Dreamweaver中的模块边界设置 110

实例：设置模块边界 110

Dreamweaver中的模块边框设置 112

实例：设置模块边框 112

Chapter 7　区域和层 118

区域的概念 118

区域的定位 118

边偏移量 119

实例：区域的绝对定位 119

实例：区域的相对定位 120

溢出、裁切、浮动与清除 121

内容溢出 121

实例：制作内嵌的滚动条效果 122

裁切 123

实例：裁切区域 123

浮动 124

实例：图文混排 124

清除 125

实例：分节段落文字的图文混排 125

层的概念 127

层的可见性 127

实例：隐藏元素内容 127

三维空间的建立 128

实例：图片和文字的层次建立 128

使用Dreamweaver进行区域和层设置 130

Dreamweaver中的定位设置 130

实例：设置位置 130

Dreamweaver中的浮动与清除设置 132

实例：设置浮动与清除 132

Dreamweaver中的溢出与裁切设置 135

实例：设置溢出 135

实例：设置裁切 137

Dreamweaver中的层设置 138

实例：设置层隐藏 138

实例：设置层Z值 138

Chapter 8　CSS中的滤镜 142

什么是滤镜 142

带有视觉滤镜效果的网页 142

Alpha滤镜 142

实例：圆形透明渐层效果 143

实例：矩形透明渐层效果 143

实例：多参数的综合利用 144

Blur滤镜 145

实例：动态模糊效果 146

Fliph和Flipv滤镜 147

实例：翻转图片 147

Gray滤镜 148

实例：黑白图片 148

Invert滤镜 149

实例：底片效果 149

Xray滤镜 150

实例：X光效果 150

Wave滤镜 151

实例：波浪效果 152

Chroma滤镜 153

实例：透明效果 153

Dropshadow滤镜 154

实例：阴影效果 154

GIow滤镜 155

实例：光晕效果 155

Mask滤镜 156

实例：印章效果 157

Shadow滤镜 158

实例：阴影动态效果 158

转换滤镜效果 159

Barn滤镜 159

实例：模拟开关门效果 160

Blinds滤镜 161

实例：百叶窗效果 161

CheckerBoard滤镜 162

实例：国际象棋棋盘的网格推拉效果 163

Fade滤镜 164

实例：渐隐效果 165

GradientWipe滤镜 166

实例：滚动渐隐效果 166

Inset滤镜 167

实例：对角扩张效果 167

Iris滤镜 169

实例：剪切轮廓扩张或收缩效果 169

Pixelate滤镜 170

实例：像素化效果 170

RadialWipe滤镜 172

实例：放射状擦除效果 172

RandomBars滤镜 173

实例：随机线条效果 173

RandomDissolve滤镜 175

实例：随机像素溶解效果 175

Slide滤镜 176

实例：滑条抽离效果 176

Sprial滤镜 178

实例：矩形螺旋转换效果 178

Stretch滤镜 179

实例：拉伸（缩）变形效果 180

Strips滤镜 181

实例：锯齿边覆盖效果 181

Wheel滤镜 182

实例：风车叶轮旋转效果 183

ZigZag滤镜 184

实例：擦地板效果 184

RevealTrans滤镜 185

实例：转换效果 186

BlendTrans滤镜 187

实例：渐隐效果 188

使用Dreamweaver进行滤镜设置 189

Dreamweaver中的视觉滤镜设置 190

实例：设置视觉滤镜 190

Chapter 9　美化网页 194

超链接的多样化 194

页面中统一链接样式的设置 194

实例：统一设置链接样式 194

页面中多种链接样式的设置 195

实例：单独设置局部链接样式 195

漂亮的滚动条 197

实例：滚动条的制作 197

不同意义的光标样式 198

实例：变换光标样式 199

CSS布局页面结构 200

制作页面整体结构 201

实例：建立页面结构 201

制作页面Head区域 202

制作页面Nav区域 203

制作页面main区域中的left区域 205

制作页面main区域中的right区域 207

制作页面footer区域 209

使用Dreamweaver进行网页美化 210

Dreamweaver中的整体链接设置 210

实例：设置页面整体的链接 210

Dreamweaver中的局部链接设置 215

实例：设置页面局部的链接 215

Dreamweaver中的鼠标光标设置 220

实例：设置鼠标光标 220

Dreamweaver中的滚动条设置 222

实例：设置浏览器滚动条 222

在Dreamweaver中使用CSS构建页面 223

实例：构建页面 223

制作页面整体内容 226