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

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2019/3/12,#,使用,CSS,样式美化网页,CHAPTER FIVE,CSS,（,Cascading Style Sheet,，层叠样式表）是一种用于控制网页元素样式显示的标记性语言，也是目前流行的网页设计技术。将网页结构和样式分离，,HTML,负责网页的结构设计，,CSS,负责网页的美化设计，这样有利于网页的加载和搜索。本项目将学习如何使用,CSS,样式美化网页。,学会创建,CSS,样式，以及设置和编辑,CSS,样式。,可以熟练地利用,CSS,样式来美化网页。,学习目标,Contents,目录,认识,CSS,样式表,1,在,Dreamweaver,中创建,CSS,2,应用,CSS,选择器,3,CSS,继承性、特殊性、层叠性和重要性,4,使用,CSS,格式化排版,5,一、,认识,CSS,样式表,了解,CSS,的基本语法,在网页中引用,CSS,的方式,一、,认识,CSS,样式表,1,了解,CSS,的基本语法,CSS,的样式规则,自定义的类,ID,和复合内容,1,2,3,属性,1,选择器,声明,2,HTML,标签,值,一、,认识,CSS,样式表,2,在网页中引用,CSS,的方式,01,直接添加在,HTML,标记中,02,将样式表内嵌到,HTML,文件中,03,将外部样式表链接到,HTML,文件上,04,联合使用样式表,Contents,目录,认识,CSS,样式表,1,在,Dreamweaver,中创建,CSS,2,应用,CSS,选择器,3,CSS,继承性、特殊性、层叠性和重要性,4,使用,CSS,格式化排版,5,二、,在,Dreamweaver,中创建,CSS,创建,CSS,规则,创建,CSS,文件,二、,在,Dreamweaver,中创建,CSS,1,创建,CSS,规则,二、,在,Dreamweaver,中创建,CSS,2,创建,CSS,文件,Contents,目录,认识,CSS,样式表,1,在,Dreamweaver,中创建,CSS,2,应用,CSS,选择器,3,CSS,继承性、特殊性、层叠性和重要性,4,使用,CSS,格式化排版,5,三、,应用,CSS,选择器,应用元素选择器,应用类选择器,应用,ID,选择器,应用后代选择器,应用群组选择器,应用通配符选择器,三、,应用,CSS,选择器,1,应用元素选择器,三、,应用,CSS,选择器,2,应用群组选择器,三、,应用,CSS,选择器,3,应用类选择器,三、,应用,CSS,选择器,4,应用,ID,选择器,三、,应用,CSS,选择器,5,应用后代选择器,三、,应用,CSS,选择器,6,应用通配符选择器,Contents,目录,认识,CSS,样式表,1,在,Dreamweaver,中创建,CSS,2,应用,CSS,选择器,3,CSS,继承性、特殊性、层叠性和重要性,4,使用,CSS,格式化排版,5,四、,CSS,继承性、特殊性、层叠性和重要性,继承性,层叠性,重要性,特殊性,四、,CSS,继承性、特殊性、层叠性和重要性,1,继承性,四、,CSS,继承性、特殊性、层叠性和重要性,2,特殊性,四、,CSS,继承性、特殊性、层叠性和重要性,3,层叠性,四、,CSS,继承性、特殊性、层叠性和重要性,4,重要性,Contents,目录,认识,CSS,样式表,1,在,Dreamweaver,中创建,CSS,2,应用,CSS,选择器,3,CSS,继承性、特殊性、层叠性和重要性,4,使用,CSS,格式化排版,5,五、,使用,CSS,格式化排版,文字排版,CSS,背景,列表排版,表格排版,段落排版,链接样式,五、,使用,CSS,格式化排版,1,文字排版,字,体,属,性,值,字体类型,font-family,宋体、微软雅黑,字号大小,font-size,像素，如,12,像素,字体颜色,color,16,进制颜色表示法,字体加粗,font-weight,bold,字体倾斜,font-style,italic,下划线,text-decoration,underline,删除线,text-decoration,line-through,文字排版常用的,CSS,规则,五、,使用,CSS,格式化排版,1,文字排版,五、,使用,CSS,格式化排版,2,段落排版,段落排版常用的,CSS,规则,字,体,属,性,值,段落缩进,text-indent,2em,行间距,line-height,2em,或像素值,中文字间距或英文中字母与字母的间距,letter-spacing,像素值,英文单词之间的间距,word-spacing,像素值,对齐方式,text-align,left,（左对齐）、,right,（右对齐）、,centent,（居中对齐）,五、,使用,CSS,格式化排版,2,段落排版,五、,使用,CSS,格式化排版,3 CSS,背景,CSS,背景规则相关属性列表,属,性,描,述,background,简写属性，作用是将背景属性设置在一个声明中,background-color,设置元素的背景颜色,background-image,把图像设置为背景,background-position,设置背景图像的起始位置,background-repeat,设置背景图像是否及如何重复,background-attachment,背景图像是否固定或者随着页面的其余部分滚动,五、,使用,CSS,格式化排版,3 CSS,背景,background-position,属性值列表,单一关键字,描,述,center,背景图片设置在中间,top,背景图片设置顶部,bottom,背景图片设置到底部,right,背景图片设置到右边,left,背景图片设置到左边,五、,使用,CSS,格式化排版,3 CSS,背景,五、,使用,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,链接样式,项目习题,打开“素材文件,项目五,5-26.html”,，利用本项目所学知识，对网页进行格式化排版，使其达到如左图所示的网页效果。,操作提示：设置内嵌式样式表,，设置,body,属性，设置背景颜色样式，设置,h,标题样式，设置,ul,样式，并设置超链接样式，如右图所示。,