电子商务网站建设与网页设计5

使用CSS样式美化网页CHAPTERFIVECSS（CascadingStyleSheet，层叠样式表）是一种用于控制网页元素样式显示的标记性语言，也是目前流行的网页设计技术。将网页结构和样式分离，HTML负责网页的结构设计，CSS负责网页的美化设计，这样有利于网页的加载和搜索。本项目将学习如何使用CSS样式美化网页。学会创建CSS样式，以及设置和编辑CSS样式。可以熟练地利用CSS样式来美化网页。学习目标Contents目录认识CSS样式表1在Dreamweaver中创建CSS2应用CSS选择器3CSS继承性、特殊性、层叠性和重要性4使用CSS格式化排版5一、认识CSS样式表了解CSS的基本语法在网页中引用CSS的方式一、认识CSS样式表1了解CSS的基本语法CSS的样式规则自定义的类ID和复合内容123属性1选择器声明2HTML标签值一、认识CSS样式表2在网页中引用CSS的方式01直接添加在HTML标记中02将样式表内嵌到HTML文件中03将外部样式表链接到HTML文件上04联合使用样式表Contents目录认识CSS样式表1在Dreamweaver中创建CSS2应用CSS选择器3CSS继承性、特殊性、层叠性和重要性4使用CSS格式化排版5二、在Dreamweaver中创建CSS创建CSS规则创建CSS文件二、在Dreamweaver中创建CSS1创建CSS规则二、在Dreamweaver中创建CSS2创建CSS文件Contents目录认识CSS样式表1在Dreamweaver中创建CSS2应用CSS选择器3CSS继承性、特殊性、层叠性和重要性4使用CSS格式化排版5三、应用CSS选择器应用元素选择器应用类选择器应用ID选择器应用后代选择器应用群组选择器应用通配符选择器三、应用CSS选择器1应用元素选择器三、应用CSS选择器2应用群组选择器三、应用CSS选择器3应用类选择器三、应用CSS选择器4应用ID选择器三、应用CSS选择器5应用后代选择器三、应用CSS选择器6应用通配符选择器Contents目录认识CSS样式表1在Dreamweaver中创建CSS2应用CSS选择器3CSS继承性、特殊性、层叠性和重要性4使用CSS格式化排版5四、CSS继承性、特殊性、层叠性和重要性继承性层叠性重要性特殊性四、CSS继承性、特殊性、层叠性和重要性1继承性四、CSS继承性、特殊性、层叠性和重要性2特殊性四、CSS继承性、特殊性、层叠性和重要性3层叠性四、CSS继承性、特殊性、层叠性和重要性4重要性Contents目录认识CSS样式表1在Dreamweaver中创建CSS2应用CSS选择器3CSS继承性、特殊性、层叠性和重要性4使用CSS格式化排版5五、使用CSS格式化排版文字排版CSS背景列表排版表格排版段落排版链接样式五、使用CSS格式化排版1文字排版字

体属

性值字体类型font-family宋体、微软雅黑字号大小font-size像素，如12像素字体颜色color16进制颜色表示法字体加粗font-weightbold字体倾斜font-styleitalic下划线text-decorationunderline删除线text-decorationline-through文字排版常用的CSS规则五、使用CSS格式化排版1文字排版五、使用CSS格式化排版2段落排版段落排版常用的CSS规则字

体属

性值段落缩进text-indent2em行间距line-height2em或像素值中文字间距或英文中字母与字母的间距letter-spacing像素值英文单词之间的间距word-spacing像素值对齐方式text-alignleft（左对齐）、right（右对齐）、centent（居中对齐）五、使用CSS格式化排版2段落排版五、使用CSS格式化排版3CSS背景CSS背景规则相关属性列表属

性描

述background简写属性，作用是将背景属性设置在一个声明中background-color设置元素的背景颜色background-image把图像设置为背景background-position设置背景图像的起始位置background-repeat设置背景图像是否及如何重复background-attachment背景图像是否固定或者随着页面的其余部分滚动五、使用CSS格式化排版3CSS背景background-position属性值列表单一关键字描

述center背景图片设置在中间top背景图片设置顶部bottom背景图片设置到底部right背景图片设置到右边left背景图片设置到左边五、使用CSS格式化排版3CSS背景五、使用CSS格式化排版4列表排版列表排版属性值列表属性描述list-style简写属性，用于把所有用于列表的属性设置于一个声明中list-style-image将图像设置为列表项标志list-style-position设置列表中列表项标志的位置list-style-type设置列表项标志的类型五、使用CSS格式化排版4列表排版五、使用CSS格式化排版5表格排版五、使用CSS格式化排版6链接样式链接的四种状态链接状态描述a:link普通的、未被访问的链接a:visited用户已访问的链接a:hover鼠标指针位于链接的上方a:active链接被点击的时刻五、使用CSS格式化排版6链接样式项