网页设计与制作教程第7章-使用CSS修饰网页元素课件.ppt

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第7章 使用CSS修饰网页元素7.1 文本控制文本控制 7.1.1 设置字体的类别CSS提供提供font-family属性来控制文字的字体类型。属性来控制文字的字体类型。语法：语法：font-family:字体名称字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。则应用引号括起。【演练【演练7-1】字体设置，本例页面】字体设置，本例页面7-1.html的显示效果如图的显示效果如图7-1所示。所示。7.1 文本控制文

2、本控制 7.1.2 设置字体的尺寸在在CSS样式中使用样式中使用font-size属性设置字体的尺寸，其值可以是绝对值也属性设置字体的尺寸，其值可以是绝对值也可以是相对值。可以是相对值。语法：语法：font-size:绝对尺寸绝对尺寸|相对尺寸相对尺寸【演练【演练7-2】字体尺寸设置，本例页面】字体尺寸设置，本例页面7-2.html的显示效果如图的显示效果如图7-2所示。所示。7.1 文本控制文本控制 7.1.3 设置字体的粗细CSS中使用中使用font-weight属性设置字体的粗细，包含属性设置字体的粗细，包含normal、bold、bolder、lighter、100、200、300、4

3、00、500、600、700、800和和900多个属多个属性值。性值。语法：语法：font-weight:bold|number|normal|lighter|100-900【演练【演练7-3】字体粗细设置，本例页面】字体粗细设置，本例页面7-3.html的显示效果如图的显示效果如图7-3所示。所示。7.1 文本控制文本控制 7.1.4 设置字体的倾斜CSS中的中的font-style属性用来设置字体的倾斜。属性用来设置字体的倾斜。语法：语法：font-style:normal|italic|oblique【演练【演练7-4】字体倾斜设置，本例页面】字体倾斜设置，本例页面7-4.html的显示

4、效果如图的显示效果如图7-4所示。所示。7.1 文本控制文本控制 7.1.5 设置文字的颜色在在CSS样式中，对文字增加颜色修饰十分简单，只需添加样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。属性即可。color属性的语法格式：属性的语法格式：color:颜色值颜色值;【演练【演练7-5】文字颜色设置，本例页面】文字颜色设置，本例页面7-5.html的显示效果如图的显示效果如图7-5所示。所示。7.1 文本控制文本控制 7.1.6 设置文字的背景颜色在在HTML中，可以使用标签的中，可以使用标签的bgcolor属性设置网页的背景颜色，而在属性设置网页的背景颜色，而在CSS里，

5、不仅可以用里，不仅可以用background-color属性来设置网页背景颜色，还可以设属性来设置网页背景颜色，还可以设置文字的背景颜色。置文字的背景颜色。语法：语法：background-color:color|transparent【演练【演练7-6】设置文字的背景颜色，显示效果如图】设置文字的背景颜色，显示效果如图7-6所示。所示。7.1 文本控制文本控制 7.1.7 设置文本的修饰使用使用CSS样式可以对文本进行简单的修饰，样式可以对文本进行简单的修饰，text属性所提供的属性所提供的text-decoration属性，主要实现文字加下划线、顶线、删除线及文字闪烁等效果。属性，主要实现

6、文字加下划线、顶线、删除线及文字闪烁等效果。语法：语法：text-decoration:underline|blink|overline|line-through|none【演练【演练7-7】字体修饰设置，本例页面】字体修饰设置，本例页面7-7.html的显示效果如图的显示效果如图7-7所示。所示。7.2 段落控制段落控制 7.2.1 设置文字的对齐方式使用使用text-align属性可以设置元素中文本的水平对齐方式。属性可以设置元素中文本的水平对齐方式。语法：语法：text-align:left|right|center|justify【演练【演练7-8】设置文字的对齐方式，本例页面】设置文

7、字的对齐方式，本例页面7-8.html的显示效果如图的显示效果如图7-8所示。所示。7.2 段落控制段落控制 7.2.2 设置段落的首行缩进首行缩进指的是段落的第一行从左向右缩进一定的距离。首行缩进指的是段落的第一行从左向右缩进一定的距离。语法：语法：text-indent:length【演练【演练7-9】设置段落的首行缩进，本例页面】设置段落的首行缩进，本例页面7-9.html的显示效果如图的显示效果如图7-9所示。所示。7.2 段落控制段落控制 7.2.3 设置首字下沉在在CSS样式中伪对象样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。可以实现对象内第一个字符的

8、样式控制。【演练【演练7-10】设置首字下沉，本例页面】设置首字下沉，本例页面7-10.html的显示效果如图的显示效果如图7-10所所示。示。7.2 段落控制段落控制 7.2.4 设置行高段落中两行文字之间垂直的距离称为行高。在段落中两行文字之间垂直的距离称为行高。在HTML中是无法控制行高的，中是无法控制行高的，在在CSS样式中，使用样式中，使用line-height属性控制行与行之间的垂直间距。属性控制行与行之间的垂直间距。语法：语法：line-height:length|normal【演练【演练7-11】设置行高，本例页面】设置行高，本例页面7-11.html的显示效果如图的显示效果如

9、图7-11所示。所示。7.2 段落控制段落控制 7.2.5 设置字符间距letter-spacing字符间距属性，可以设置字符与字符间的距离。字符间距属性，可以设置字符与字符间的距离。语法：语法：letter-spacing：length|normal【演练【演练7-12】设置字符间距，】设置字符间距，7-12.html的显示效果如图的显示效果如图7-12所示。所示。7.2 段落控制段落控制 7.2.6 设置文字的截断在在CSS样式中样式中“text-overflow”属性可以实现文字的截断效果。属性可以实现文字的截断效果。语法：语法：text-overflow：clip|ellipsis【演

10、练【演练7-13】设置文字的截断，】设置文字的截断，7-13.html的显示效果如图的显示效果如图7-13所示。所示。7.3 设置图像样式设置图像样式7.3.1 设置图像边框图像的边框就是利用图像的边框就是利用border属性作用于图像元素而呈现的效果。属性作用于图像元素而呈现的效果。【演练【演练7-14】设置图像边框，】设置图像边框，7-14.html的显示效果如图的显示效果如图7-15所示。所示。7.3 设置图像样式设置图像样式7.3.2 设置图像缩放使用使用CSS样式控制图像的大小，可以通过样式控制图像的大小，可以通过width和和height两个属性来实现。两个属性来实现。【演练【演练

11、7-15】设置图像缩放，本例页面】设置图像缩放，本例页面7-15.html的显示效果如图的显示效果如图7-16所示。所示。7.3 设置图像样式设置图像样式7.3.3 设置背景图像CSS除了可以设置背景颜色，还可以用除了可以设置背景颜色，还可以用background-image设置背景图像。设置背景图像。语法：语法：background-image:url(url)|none【演练【演练7-16】设置背景图像，】设置背景图像，7-16.html的显示效果如图的显示效果如图7-17所示。所示。7.3 设置图像样式设置图像样式7.3.4 设置背景重复背景重复（背景重复（background-repe

12、at）属性的主要作用是设置背景图片以何种）属性的主要作用是设置背景图片以何种方式在网页中显示。方式在网页中显示。语法：语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y【演练【演练7-17】设置背景重复，】设置背景重复，7-17.html的显示效果如图的显示效果如图7-18所示。所示。7.3 设置图像样式设置图像样式7.3.5 设置背景图像定位可以通过可以通过background-position属性来改变图像的插入位置。语法：属性来改变图像的插入位置。语法：background-position:length|lengthbackg

13、round-position:position|position1使用关键字进行背景定位使用关键字进行背景定位关键字参数的取值及含义如下：关键字参数的取值及含义如下：top：将背景图像同元素的顶部对齐。：将背景图像同元素的顶部对齐。bottom：将背景图像同元素的底部对齐。：将背景图像同元素的底部对齐。left：将背景图像同元素的左边对齐。：将背景图像同元素的左边对齐。right：将背景图像同元素的右边对齐。：将背景图像同元素的右边对齐。center：将背景图像相对于元素水平居中或垂直居中。：将背景图像相对于元素水平居中或垂直居中。7.3 设置图像样式设置图像样式7.3.5 设置背景图像定位2

14、使用长度进行背景定位使用长度进行背景定位长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。左上角相对于元素左上角的位置。3使用百分比进行背景定位使用百分比进行背景定位使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比位置对齐。的百分比位置对齐。7.3 设置图像样式设置图像样式7.3.5 设置背景图像定位【演练【演练7-20】使用百分比进行背景定位，本例页面】使用百分比进行背景定位，本例页面7-20.ht

15、ml的显示效果的显示效果如图如图7-21所示。所示。7.4 设置表格样式设置表格样式7.4.1 常用的CSS表格属性1border-collapse属性属性设置表格的边框是合并成单边框，还是分别有各自的边框。设置表格的边框是合并成单边框，还是分别有各自的边框。语法：语法：border-collapse:separate|collapse【演练【演练7-21】使用合并边框技术制作细线表格，本例页面】使用合并边框技术制作细线表格，本例页面7-21.html的显的显示效果如图示效果如图7-24所示。所示。7.4 设置表格样式设置表格样式7.4.1 常用的CSS表格属性2border-spacing属

16、性属性border-spacing属性用来设置相邻单元格边框间的距离。属性用来设置相邻单元格边框间的距离。语法：语法：border-spacing:length|length【演练【演练7-22】使用】使用border-spacing属性设置相邻单元格边框间的距离，属性设置相邻单元格边框间的距离，本例页面本例页面7-22.html的显示效果如图的显示效果如图7-25所示。所示。7.4 设置表格样式设置表格样式7.4.1 常用的CSS表格属性3caption-side属性属性caption-side属性用于设置表格标题的位置。属性用于设置表格标题的位置。语法：语法：caption-side:to

17、p|bottom|left|right4empty-cells属性属性empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。的边框。语法：语法：empty-cells:hide|show7.4 设置表格样式设置表格样式7.4.1 常用的CSS表格属性【演练【演练7-23】使用】使用empty-cells属性设置表格单元格无内容时隐藏单元格属性设置表格单元格无内容时隐藏单元格的边框，本例页面的边框，本例页面7-23.html的显示效果如图的显示效果如图7-26所示。所示。7.4 设置表格样式设置表格样式7.4.2 制

18、作畅销活动排行榜【演练【演练7-24】使用隔行换色表格制作畅销活动排行榜，本例页面】使用隔行换色表格制作畅销活动排行榜，本例页面7-24.html的显示效果如图的显示效果如图7-27所示。所示。7.5 设置表单样式设置表单样式7.5.1 CSS美化常用的表单元素1美化文本域美化文本域【演练【演练7-25】使用】使用CSS美化文本域，本例页面美化文本域，本例页面7-25.html的显示效果如图的显示效果如图7-28所示。所示。7.5 设置表单样式设置表单样式7.5.1 CSS美化常用的表单元素2美化按钮美化按钮【演练【演练7-26】使用】使用CSS美化按钮，本例页面美化按钮，本例页面7-26.h

19、tml的显示效果如图的显示效果如图7-29所示。所示。7.5 设置表单样式设置表单样式7.5.1 CSS美化常用的表单元素3制作登录框制作登录框【演练【演练7-27】使用】使用CSS制作登录框，本例页面制作登录框，本例页面7-27.html的显示效果如图的显示效果如图7-30所示。所示。7.5 设置表单样式设置表单样式7.5.2 光影世界联系我们表单【演练【演练7-28】制作光影世界联系我们表单，本例页面】制作光影世界联系我们表单，本例页面7-28.html在浏览器在浏览器中的显示效果如图中的显示效果如图7-31所示。所示。7.6 综合案例综合案例制作光影世界网络融资平台页面制作光影世界网络融

20、资平台页面7.6.1 页面布局规划通过成熟的构思与设计，光影世界网络融资平台页面的效果如图通过成熟的构思与设计，光影世界网络融资平台页面的效果如图7-32所示，所示，页面布局示意图如图页面布局示意图如图7-33所示。所示。7.6 综合案例综合案例制作光影世界网络融资平台页面制作光影世界网络融资平台页面7.6.2 页面的制作过程1前期准备前期准备（1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹下创建文件夹images和和style，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页

21、面需要使用的图像素材存放在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹style下新建一个名为下新建一个名为style.css的样式表文件。的样式表文件。2制作页面制作页面7.6 综合案例综合案例制作光影世界网络融资平台页面制作光影世界网络融资平台页面7.6.2 页面的制作过程1前期准备前期准备（1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹下创建文件夹images和和style，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放

22、在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹style下新建一个名为下新建一个名为style.css的样式表文件。的样式表文件。2制作页面制作页面7.7 实训实训制作家具商城会员注册页面制作家具商城会员注册页面制作家具商城会员注册页面制作家具商城会员注册页面，页面效果如图制作家具商城会员注册页面，页面效果如图7-34所示，布局示意图如图所示，布局示意图如图7-35所示。所示。7.7 实训实训制作家具商城会员注册页面制作家具商城会员注册页面制作家具商城会员注册页面制作步骤。制作步骤。1前期准备前期准备（1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹

23、下创建文件夹images和和css，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹css下新建一个名为下新建一个名为style.css的样式表文件。的样式表文件。2制作页面制作页面习题习题7习题71使用使用CSS美化表单技术制作家具商城会员登录页面，如图美化表单技术制作家具商城会员登录页面，如图7-36所示。所示。2使用使用CSS对页面中的网页元素加以修饰，制作介绍清明上河园简介的对页面中的网页元素加以修饰，制作介绍清明上河园简介的页面，如图页面，如图7-37所示。所示。3使用使用CSS对页面中的网页元素加以修饰，制作如图对页面中的网页元素加以修饰，制作如图7-38所示的环保社所示的环保社区页面。区页面。