《电子商务网页设计与制作》课件项目七.ppt

1、能力目标：能力目标：(1)独立使用独立使用Dreamweaver制作制作CSS层叠样式表层叠样式表(2)Dreamweaver中创建和修改中创建和修改CSS样式表样式表(3)能够进行设置能够进行设置CSS样式表的常用属性和属性值样式表的常用属性和属性值知识目标：知识目标：(1)CSS样式表的基本格式样式表的基本格式(2)CSS样式表的常见引用方式样式表的常见引用方式(3)掌握使用掌握使用CSS样式表美化页面的基本技术样式表美化页面的基本技术任务一任务一 认识认识CSSCSS样式表样式表2级标题 字体：宋体；大小：15像素；颜色：红色；装饰：下划线h2 font-family:宋体;font-s

2、ize:15px;color:red;text-decoration:underline;任务一任务一 认识认识CSSCSS样式表样式表 CSS标记选择器标记选择器h1 color:red;font-size:25px;选择器 属性 值 声明 声明 值 属性 任务一任务一 认识认识CSSCSS样式表样式表.class color:green;font-size:20px;类别选择器 属性 值 属性 值 声明 声明 类别名称 类别选择器类别选择器任务一任务一 认识认识CSSCSS样式表样式表在在HTMLHTML中使用中使用CSSCSS的方法的方法内嵌式内嵌式就是将CSS代码和HTML代码，放在同

3、一个HTML文件当中，具体使用方式我们看下面的代码。内嵌式pcolor:red;font-size:36px;CSS代码内嵌式任务一任务一 认识认识CSSCSS样式表样式表在在HTMLHTML中使用中使用CSSCSS的方法的方法链接式链接式就是将HTML代码和CSS代码分离开来，并分别存储在两个或者多个文件中。使用的时候使用固定的格式引用就可以了。具体使用方式看下面的代码。HTML代码文件：链接式 CSS代码链接式 CSS代码文件：pcolor:red;font-size:36px;任务三任务三 使用使用CSSCSS样式美化网页样式美化网页长度和颜色长度和颜色（1）长度在网页中，无论文字、图片

4、还是表格，这些元素都需要设置长度。在CSS中有多种长度单位，这里重点介绍最常用的“像素”长度单位。像素的单位为“px”，一个像素代表显示器上一个像素点的长度，在CSS中设置网页元素的长度时可以用，“数字+px”来表示元素的长度，比如，设置字体大小为24个像素，我们可以写成“font-size:24px;”（2）颜色在CSS中表示网页元素的颜色也有多种方式，这里重点介绍最常用的“6位十六进制数值表示法”。顾名思义“6位十六进制数值表示法”就是使用一个6位的十六进制数来表示某个颜色，比如字体为黑色我们可以写成“color:#000000;”实际上在Dreamweaver中设置元素的颜色时，并不需要

5、记住每种颜色的6位十六进制数值，只要在取色板里选择想要的颜色就可以了，颜色的数值Dreamweaver会自动生成。尺度单位名尺度单位名说说 明明inin（英寸）（英寸）不是国际标准单位，平常极少使用不是国际标准单位，平常极少使用cmcm（厘米）（厘米）国际标准单位，较少用国际标准单位，较少用mmmm（毫米）（毫米）国际标准单位，较少用国际标准单位，较少用ptpt（点数）（点数）最基本的显示单位，较少用最基本的显示单位，较少用pcpc（印刷单位）（印刷单位）应用在印刷行业中，应用在印刷行业中，1pc=12pt1pc=12pt任务三任务三 使用使用CSSCSS样式美化网页样式美化网页设置字体设置字

6、体在CSS中，使用font-family属性来设置字体的样式。比如，针对页面中所有p标签设置字体为“微软雅黑”，代码如下：p font-family:微软雅黑;设置文字大小设置文字大小在CSS中，使用font-size属性来设置文字的大小。一般使用“数字+像素”的格式来设置文字大小。比如，针对页面中所有p标签的字体设置为“36像素”，代码如下：p font-size:36px;/*字体大小36个像素*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页设置文字行高设置文字行高在CSS中，使用line-height属性来设置行的高度，通过它可以控制行与行之间的距离。一般使用“数字+像素”

7、的格式来设置行高。比如，针对页面中所有p标签设文字行高为“20像素”，代码如下：p line-height:20px;/*行高为20个像素*/设置文本的水平位置设置文本的水平位置在CSS中，使用text-align属性来设置文本的水平位置。p text-align:left;/*左对齐*/p text-align:right;/*右对齐*/p text-align:center;/*居中对齐*/p text-align:justify;/*两端对齐*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页设置文字设置文字粗细粗细在CSS中，使用font-weight属性来设置文字的粗细设

8、置 值说 明normal正常粗细bold粗体bolder加粗体lighter比正常粗细要细100-900共有9个层次（100，200900），数字越大字体越粗 任务三任务三 使用使用CSSCSS样式美化网页样式美化网页设置图片边框设置图片边框基本属性在CSS中，一个边框由以下3个要素组成。（1）border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。（2）border-color（颜色）：可以使用各种合法的颜色来定义方式。（3）border-style（线型）：可以在一些预先定义好的线型中选择。属性值说明none定义无边框dotted定义点状边框dashed定义虚线s

9、olid定义实线double定义双线表7-2 border-style属性值 为不同的边框分别设置样式为不同的边框分别设置样式在CSS中，可以分别使用border-left，border-right，border-top，border-bottom搭配上面学的内容来分别单独设置上下左右四条边框的样式、颜色和粗细。代码如下：img border-left-style:solid;/*左边框样式为实线*/border-left-color:#F00;/*左边框颜色为红色*/border-left-width:5px;/*左边框粗细为5个像素*/border-right-style:dotted;/

10、*右边框样式为点画线*/border-right-color:#000;/*右边框颜色为黑色*/border-right-width:2px;/*右边框粗细为2个像素*/border-top-style:dashed;/*上边框样式为虚线*/border-top-color:#00F;/*上边框颜色为蓝色*/border-top-width:10px;/*上边框粗细为10个像素*/border-bottom-style:double;/*下边框样式为双线*/border-bottom-color:#FF0;/*下边框颜色为黄色*/border-bottom-width:20px;/*下边框粗细

11、为20个像素*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页 设置图片缩放设置图片缩放在CSS中，使用width属性来设置图片的宽度，使用height属性来设置图片的高度。单位同样使用像素。具体书写方式，代码如下：img width:500px;/*图片宽500个像素*/height:300px;/*图片高300个像素*/img width:80%;/*图片宽度为上一级标签宽度的80%*/height:80%;/*图片高度为上一级标高度的80%*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页 设置图文混排设置图文混排文字环绕在CSS中，使用float属性来设置文字的

12、环绕方式，属性值可以设置为“left”和“right”，分别表示左环绕和右环绕img float:left;/*文字左环绕*/img float:right;/*文字右环绕*/图片与文字的间距在CSS中，使用margin属性来设置图片图片和文字的间距，单位同样使用像素。具体书写方式，代码如下：img float:left;margin:20px;/*图片和文字间距为20个像素*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页 设置背景图像设置背景图像在CSS中，使用background-image属性来设置背景图片，属性值为图片的相对路径。具体书写方式，代码如下：body back

13、ground-image:url(1.jpg);/*网页背景图片为1.jpg*/用上述代码设置背景图像后，图像会自动沿着水平和垂直两个方向平铺。设置背景图像平铺设置背景图像平铺在默认情况下，图像会自动向水平和垂直两个方向平铺。具体书写方式，代码如下：body background-image:url(1.jpg);/*背景图片为1.jpg*/background-repeat:no-repeat;/*背景图片不重复，只出现一次*/background-repeat:repeat-x;/*背景图片水平方向平铺*/background-repeat:repeat-y;/*背景图片垂直方向平铺*/任务三任务三 使用使用CSSCSS样式美化网页样式美化网页