CSS代码效果对比学习PDF|Epub|txt|kindle电子书版本网盘下载

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

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

Chapter 1 CSS基础2

CSS的概念2

CSS的应用2

CSS的优点2

CSS与HTML3

内联样式定义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