HTML5+CSS3网页设计基础-第四章-元素外观修饰课件

第1页第四章元素外观修饰本章概述本章的学习目标主要内容第1页第四章元素外观修饰本章概述第2页本章概述网页设计中各种元素包括文本、图像、列表、表格、链接、导航等，可以用CSS样式进行设置以美化页面。本章将具体介绍页面各种元素样式属性及其设置方法。第2页本章概述网页设计中各种元素包括文本、图像、列表、表格、第3页本章的学习目标掌握文本字体样式属性的意义及其设置方法。掌握图像样式各个属性的意义及其设置方法。掌握列表样式的定义方法。掌握表格样式的设置方法。掌握综合应用元素外观属性制作页面的方法。第3页本章的学习目标掌握文本字体样式属性的意义及其设置方法。第4页主要内容4.1文本样式4.2图像样式4.3列表样式4.4表格样式4.5实训4.6本章小结第4页主要内容4.1文本样式第5页4.1文本样式本节主要内容：案例分析字体样式文本外观属性案例制作第5页4.1文本样式本节主要内容：第6页4.1.1案例分析【案例展示】企业文化页面的设计。【知识要点】字体类型、大小、粗细、颜色、修饰、对齐方式、缩进、行间距、首字母样式、字符间距、单词间距、大小写转换、文本阴影、长单词换行、空白符处理、溢出文本处理等。【学习目标】掌握CSS文本修饰的常用属性的作用并灵活应用。参考代码：4-1.html第6页4.1.1案例分析【案例展示】企业文化页面的设计。第7页4.1.2字体样式网页设计时需要选择合适的字体、字号等文本样式进行页面设计。为了方便控制页面中文本的样式，CSS提供了一组字体样式属性。1.font-family(设置字体)语法：font-family:name2.font-size(设置字体大小)语法：font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length|%3.font-weight(设置字体粗细)语法：font-weight:normal|bold|bolder|lighter|<integer>4.font-style(字体风格)语法：font-style:normal|italic|oblique第7页4.1.2字体样式网页设计时需要选择合适的字体、字第8页4.1.2字体样式4.font-style(设置字体风格)语法：font-style:normal|italic|oblique5.font-face(综合设置字体样式)可以用font属性对字体样式进行综合设置。语法：font:font-stylefont-weightfont-sizefont-family参考示例：例4-1-1.html、4-1-2.html、4-1-3.html第8页4.1.2字体样式4.font-style(设置第9页4.1.3文本外观属性1.color(定义文本的颜色)语法：color：预定义颜色值|十六进制|RGB代码2.text-decoration(定义字体修饰)语法：text-decoration：underline|overline|line-through|none3.text-align(设置文本对齐方式)语法：text-align：center|left|right|justify4.line-height(设置行间距)行间距就是行与行之间的垂直间距，一般称为行高，在CSS样式中用Line-height用于设置行高。5.text-indent(定义首行缩进)语法：text-indent:length|%第9页4.1.3文本外观属性1.color(定义文本的第10页4.1.2字体样式6.:first-letter伪元素(向文本的第一个字母添加特殊样式):first-letter伪元素用于指定元素第一个字母的样式。7.letter-spacing（字符间距）语法：letter-spacing:normal|length8.word-spacing（单词间距）语法：word-spacing:normal|length9.text-transform(文本大小写转换)语法：text-transform:none|capitalize|uppercase|lowercase10.text-shadow(文本阴影)语法：text-shadow:h-shadowv-shadowblurcolor第10页4.1.2字体样式6.:first-lette第11页4.1.3文本外观属性11.word-wrap(允许长单词或URL地址换行)语法：word-wrap:normal|break-word12.white-space(空白符处理字体修饰)语法：white-space:normal|pre|nowrap13.text-overflow(溢出文本)语法：text-overflow:clip|ellipsis|string参考示例：例4-1-4.html、4-1-5.html、4-1-6.html、4-1-7.html、4-1-8.html、4-1-9.html第11页4.1.3文本外观属性11.word-wrap4.1.4案例制作制作完成演示案例:企业文化页面的设计。参考代码4-1.html第12页4.1.4案例制作制作完成演示案例:企业文化页面的设计。第13页4.2图像样式本节主要内容：案例分析设置图像样式案例制作第13页4.2图像样式本节主要内容：第14页4.2.1案例分析【案例展示】新闻动态-产品资讯局部页面的设计。【知识要点】设置图像边框、图像缩放、图像位置、图文混排等。【学习目标】掌握CSS设置图像样式的常用属性。参考代码：4-2.html第14页4.2.1案例分析【案例展示】新闻动态-产品资讯第15页4.2.2设置图像样式在HTML中，已经学习过图像元素的基本知识，下面用CSS样式设置图片的大小和边框。1.设置图像大小使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。常用的取值单位有像素px和基于父元素宽度（高度）的百分比宽度（高度）。2.设置图像边框

用CSS样式设置图像的边框时，用border-style属性设置边框线型，用border-width设置边框粗细，用border-color设置边框颜色。第15页4.2.2设置图像样式在HTML中，已经学习过图4.2.3案例制作制作完成演示案例:新闻动态-产品资讯局部页面的设计。参考代码4-2.html第16页4.2.3案例制作制作完成演示案例:新闻动态-产品资讯局第17页4.3列表样式本节主要内容：案例分析设置列表项标记类型设置列表项标记位置案例制作第17页4.3列表样式本节主要内容：第18页4.3.1案例分析【案例展示】工程案例—客户案例展示页面。【知识要点】设置列表类型、设置列表项目符号及位置的属性和方法。【学习目标】掌握CSS设置列表样式的常用属性和方法。参考代码：4-3.html第18页4.3.1案例分析【案例展示】工程案例—客户案例第19页4.3.2设置列表项标记类型通常的项目列表主要采用<ul>或<ol>标签，然后配合<li>标签列出各个项目。在CSS样式中，列表项的标记类型是通过属性list-syle-type来修改的。list-style-type属性主要用于修改列表项的标记类型，

list-style-type属性常用的属性值见表4-1。参考代码：4-3-1.html第19页4.3.2设置列表项标记类型通常的项目列表主要采第20页4.3.2设置列表项标记类型列表类型list-style-type的属性值说明无序列表<ul>disc默认值，标记是实心圆circle标记是空心圆square标记是实心正方形decimal标记是数字有序列表<ol>upper-alpha标记是大写英文字母，如A,B,C,E,F,…lower-alpha标记是小可英文字母，如a,b,c,d,e,f,…upper-roman标记是大写罗马字母，如I,II,III,IV,V,VI,…lower-roman标记是小写岁马字母，如i,ii,iii,iv,v,vi,…none不显示任何符号表4-1常用的list-style-type属性值第20页4.3.2设置列表项标记类型列表类型list-s第21页4.3.3设置列表项标记位置list-style-position属性用于声明列表标志相对于列表项内容的位置，其属性值有两个关键词outside(外部)和inside(内部)。使用outside属性值（默认值），保持标记位于文本的左侧，放置在文本以外，环绕文本不根据标记对齐。使用inside属性值，列表项目标记放置在文本以内，像是插入在列表项内容最前面的行内元素一样，环绕文本根据标记对齐。参考代码：4-3-2.html第21页4.3.3设置列表项标记位置list-style4.3.4案例制作制作完成演示案例:工程案例—客户案例展示页面。参考代码4-3.html第22页4.3.4案例制作制作完成演示案例:工程案例—客户案例展第23页4.4表格样式本节主要内容：案例分析border-collapse(设置表格边框合并)border-spacing(设置单元格间距)empty-cells(设置是否显示单元格边框)caption-side(设置表格标题位置)案例制作第23页4.4表格样式本节主要内容：第24页4.4.1案例分析【案例展示】营销动态--销售统计部分页面。【知识要点】表格边框合并、单元格间距。【学习目标】掌握设置表格样式的常用属性。参考代码：4-4.html第24页4.4.1案例分析【案例展示】营销动态--销售统第25页4.4.2border-collapse(设置表格边框合并)border-collapse属性用于设置表格的边框是合并成单边框，还是分别有自己的边框。语法：border-collapse:separate|collapse参数：separate：边框分开，border-spacing和empty-cells属性起作用。（默认值）collapse：边框合并，即两个相邻的边框共用一个边框。忽略border-spacing和empty-cells属性。参考代码：4-4-1.html第25页4.4.2border-collapse(设置表第26页4.4.3border-spacing(设置单元格间距)border-spacing用于设置相邻单元格边框间的距离。语法：border-spacing:length||length参数：length：相邻单元格的边框之间的距离，单位px、cm等，不允许用负值。参考代码：4-4-2.html第26页4.4.3border-spacing(设置单元第27页4.4.4empty-cells(设置是否显示单元格边框)empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。语法：empty-cells:show|hide参数：show：在空单元格周围绘制边框(默认)。hide：不在空单元格周围绘制边框参考代码：4-4-3.html第27页4.4.4empty-cells(设置是否显示单元第28页4.4.5caption-side(设置表格标题位置)caption-side用于设置表格标题的位置。语法：caption-side:top|bottom|left|right参数：top：把表格标题定位在表格之上，默认值。bottom：把表格标题定位在表格之下。left：把表格标题定位在表格的左边。right：把表格标题定位在表格的右边。第28页4.4.5caption-side(设置表格标题位4.4.6案例制作制作完成演示案例:营销动态--销售统计部分页面。参考代码4-4.html第29页4.4.6案例制作制作完成演示案例:营销动态--销售统计4.5实训制作完成演示案例:设计网站首页上热销产品局部页面。参考代码4-5.html第30页4.5实训制作完成演示案例:设计网站首页上热销产品局部页第31页4.6本章小结本章首先介绍了文本样式各个属性的意义及其设置方法，然后介绍了图片、列表和表格的样式设置方法，最后通过实例讲解了表格、图片和文本在页面设计中的实际应用技术。通过本章的学习，读者能掌握页面元素的样式设置技术，灵活应用这些技术进行网页元素修饰，设计出美观大方的网页。第31页4.6本章小结本章首先介绍了文本样式各个属性的第32页第四章元素外观修饰本章概述本章的学习目标主要内容第1页第四章元素外观修饰本章概述第33页本章概述网页设计中各种元素包括文本、图像、列表、表格、链接、导航等，可以用CSS样式进行设置以美化页面。本章将具体介绍页面各种元素样式属性及其设置方法。第2页本章概述网页设计中各种元素包括文本、图像、列表、表格、第34页本章的学习目标掌握文本字体样式属性的意义及其设置方法。掌握图像样式各个属性的意义及其设置方法。掌握列表样式的定义方法。掌握表格样式的设置方法。掌握综合应用元素外观属性制作页面的方法。第3页本章的学习目标掌握文本字体样式属性的意义及其设置方法。第35页主要内容4.1文本样式4.2图像样式4.3列表样式4.4表格样式4.5实训4.6本章小结第4页主要内容4.1文本样式第36页4.1文本样式本节主要内容：案例分析字体样式文本外观属性案例制作第5页4.1文本样式本节主要内容：第37页4.1.1案例分析【案例展示】企业文化页面的设计。【知识要点】字体类型、大小、粗细、颜色、修饰、对齐方式、缩进、行间距、首字母样式、字符间距、单词间距、大小写转换、文本阴影、长单词换行、空白符处理、溢出文本处理等。【学习目标】掌握CSS文本修饰的常用属性的作用并灵活应用。参考代码：4-1.html第6页4.1.1案例分析【案例展示】企业文化页面的设计。第38页4.1.2字体样式网页设计时需要选择合适的字体、字号等文本样式进行页面设计。为了方便控制页面中文本的样式，CSS提供了一组字体样式属性。1.font-family(设置字体)语法：font-family:name2.font-size(设置字体大小)语法：font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length|%3.font-weight(设置字体粗细)语法：font-weight:normal|bold|bolder|lighter|<integer>4.font-style(字体风格)语法：font-style:normal|italic|oblique第7页4.1.2字体样式网页设计时需要选择合适的字体、字第39页4.1.2字体样式4.font-style(设置字体风格)语法：font-style:normal|italic|oblique5.font-face(综合设置字体样式)可以用font属性对字体样式进行综合设置。语法：font:font-stylefont-weightfont-sizefont-family参考示例：例4-1-1.html、4-1-2.html、4-1-3.html第8页4.1.2字体样式4.font-style(设置第40页4.1.3文本外观属性1.color(定义文本的颜色)语法：color：预定义颜色值|十六进制|RGB代码2.text-decoration(定义字体修饰)语法：text-decoration：underline|overline|line-through|none3.text-align(设置文本对齐方式)语法：text-align：center|left|right|justify4.line-height(设置行间距)行间距就是行与行之间的垂直间距，一般称为行高，在CSS样式中用Line-height用于设置行高。5.text-indent(定义首行缩进)语法：text-indent:length|%第9页4.1.3文本外观属性1.color(定义文本的第41页4.1.2字体样式6.:first-letter伪元素(向文本的第一个字母添加特殊样式):first-letter伪元素用于指定元素第一个字母的样式。7.letter-spacing（字符间距）语法：letter-spacing:normal|length8.word-spacing（单词间距）语法：word-spacing:normal|length9.text-transform(文本大小写转换)语法：text-transform:none|capitalize|uppercase|lowercase10.text-shadow(文本阴影)语法：text-shadow:h-shadowv-shadowblurcolor第10页4.1.2字体样式6.:first-lette第42页4.1.3文本外观属性11.word-wrap(允许长单词或URL地址换行)语法：word-wrap:normal|break-word12.white-space(空白符处理字体修饰)语法：white-space:normal|pre|nowrap13.text-overflow(溢出文本)语法：text-overflow:clip|ellipsis|string参考示例：例4-1-4.html、4-1-5.html、4-1-6.html、4-1-7.html、4-1-8.html、4-1-9.html第11页4.1.3文本外观属性11.word-wrap4.1.4案例制作制作完成演示案例:企业文化页面的设计。参考代码4-1.html第43页4.1.4案例制作制作完成演示案例:企业文化页面的设计。第44页4.2图像样式本节主要内容：案例分析设置图像样式案例制作第13页4.2图像样式本节主要内容：第45页4.2.1案例分析【案例展示】新闻动态-产品资讯局部页面的设计。【知识要点】设置图像边框、图像缩放、图像位置、图文混排等。【学习目标】掌握CSS设置图像样式的常用属性。参考代码：4-2.html第14页4.2.1案例分析【案例展示】新闻动态-产品资讯第46页4.2.2设置图像样式在HTML中，已经学习过图像元素的基本知识，下面用CSS样式设置图片的大小和边框。1.设置图像大小使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。常用的取值单位有像素px和基于父元素宽度（高度）的百分比宽度（高度）。2.设置图像边框

用CSS样式设置图像的边框时，用border-style属性设置边框线型，用border-width设置边框粗细，用border-color设置边框颜色。第15页4.2.2设置图像样式在HTML中，已经学习过图4.2.3案例制作制作完成演示案例:新闻动态-产品资讯局部页面的设计。参考代码4-2.html第47页4.2.3案例制作制作完成演示案例:新闻动态-产品资讯局第48页4.3列表样式本节主要内容：案例分析设置列表项标记类型设置列表项标记位置案例制作第17页4.3列表样式本节主要内容：第49页4.3.1案例分析【案例展示】工程案例—客户案例展示页面。【知识要点】设置列表类型、设置列表项目符号及位置的属性和方法。【学习目标】掌握CSS设置列表样式的常用属性和方法。参考代码：4-3.html第18页4.3.1案例分析【案例展示】工程案例—客户案例第50页4.3.2设置列表项标记类型通常的项目列表主要采用<ul>或<ol>标签，然后配合<li>标签列出各个项目。在CSS样式中，列表项的标记类型是通过属性list-syle-type来修改的。list-style-type属性主要用于修改列表项的标记类型，

list-style-type属性常用的属性值见表4-1。参考代码：4-3-1.html第19页4.3.2设置列表项标记类型通常的项目列表主要采第51页4.3.2设置列表项标记类型列表类型list-style-type的属性值说明无序列表<ul>disc默认值，标记是实心圆circle标记是空心圆square标记是实心正方形decimal标记是数字有序列表<ol>upper-alpha标记是大写英文字母，如A,B,C,E,F,…lower-alpha标记是小可英文字母，如a,b,c,d,e,f,…upper-roman标记是大写罗马字母，如I,II,III,IV,V,VI,…lower-roman标记是小写岁马字母，如i,ii,iii,iv,v,vi,…none不显示任何符号表4-1常用的list-style-type属性值第20页4.3.2设置列表项标记类型列表类型list-s第52页4.3.3设置列表项标记位置list-style-position属性用于声明列表标志相对于列表项内容的位置，其属性值有两个关键词outside(外部)和inside(内部)。使用outside属性值（默认值），保持标记位于文本的左侧，放置在文本以外，环绕文本不根据标记对齐。使用inside属性值，列表项目标记放置在文本以内，像是插入在列表项内容最前面的行内元素一样，环绕文本根据标记对齐。参考代码：4-3-2.html第21页4.3.3设置列表项标记位置list-style4.3.4案例制作制作完成演示案例:工程案例—客户案例展示页面。参考代码4-3.html第53页4.3.4案例制作制作完成演示案例:工程案例—客户案例展第54页4.4表格样式本节主要内容：案例分析border-collapse(设置表格边框合并)border-spacing(设置单元格间距)empty-cells(设置是否显示单元格边框)caption-side(设置表格标题位置)案例制作第23页4.4表格样式本节主要内容：第55页4.4.1案例分析【案例展示】营销动态--销售统计部分页面。【知识要点】表格边框合并、单元格间距。【学习目标】掌握设置表格样式的常用属性。参考代码：4-4.html第24页4.4.1案例分析【案例展示】营销动态--销售统第56页4.4.2border-collapse(设置表格边框合并)border-collapse属性用于设置表格的边框是合并成单边框，还是分别有自己的边框。语法：border-co