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

1、HTML5+CSS3网页设计基础第4章 元素外观修饰第1页第四章第四章 元素外观修饰元素外观修饰本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第4章 元素外观修饰第2页本章概述本章概述l网页设计中各种元素包括文本、图像、列表、表网页设计中各种元素包括文本、图像、列表、表格、链接、格、链接、导航等导航等，可以用，可以用CSS样式进行设置以样式进行设置以美化页面美化页面。l本章将具体介绍页面各种元素样式属性及其设置本章将具体介绍页面各种元素样式属性及其设置方法方法。HTML5+CSS3网页设计基础第4章 元素外观修饰第3页本章的学习目标本章的学习目标l掌握文本掌握文本字体字体样式

2、属性样式属性的意义及其设置方法的意义及其设置方法。l掌握图像样式各个属性的意义及其设置方法掌握图像样式各个属性的意义及其设置方法。l掌握掌握列表样式的定义方法。列表样式的定义方法。l掌握表格样式的设置方法。掌握表格样式的设置方法。l掌握综合掌握综合应用元素应用元素外观属性制作页面的外观属性制作页面的方法方法。HTML5+CSS3网页设计基础第4章 元素外观修饰第4页主要内容主要内容4.1 文本文本样式样式4.2 图像样式图像样式4.3 列表样式列表样式4.4 表格样式表格样式4.5 实实训训4.6 本章小结本章小结 HTML5+CSS3网页设计基础第4章 元素外观修饰第5页4.1 文本样式文本

3、样式本节主要内容：本节主要内容：l案例分析案例分析l字体样式字体样式l文本外观属性文本外观属性l案例制作案例制作HTML5+CSS3网页设计基础第4章 元素外观修饰第6页4.1.1 案例分析案例分析l【案例展示】【案例展示】企业文化页面的设计。企业文化页面的设计。l【知识要点】【知识要点】字体类型、大小、粗细、颜色、修饰、对齐字体类型、大小、粗细、颜色、修饰、对齐方式、缩进、行间距、首字母样式、字符间距、单词间距方式、缩进、行间距、首字母样式、字符间距、单词间距、大小写转换、文本阴影、长单词换行、空白符处理、溢、大小写转换、文本阴影、长单词换行、空白符处理、溢出文本处理等。出文本处理等。l【学

4、习目标】【学习目标】掌握掌握CSS文本修饰的常用属性的作用并灵活文本修饰的常用属性的作用并灵活应用。应用。l参考代码：参考代码：4-1.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第7页4.1.2 字体样式字体样式网页设计网页设计时时需要选择合适的字体需要选择合适的字体、字号等文本样式进行页、字号等文本样式进行页面设计。为了方便控制页面中文本的样式，面设计。为了方便控制页面中文本的样式，CSS提供了一组提供了一组字体样式属性字体样式属性。l1.font-family(设置字体设置字体)语法：语法：font-family:namel2.font-size(设置字体大小设置字体大小

5、)语法：语法：font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length|%l3.font-weight(设置字体粗细设置字体粗细)语法：语法：font-weight:normal|bold|bolder|lighter|l4.font-style(字体风格字体风格)语法：语法：font-style:normal|italic|obliqueHTML5+CSS3网页设计基础第4章 元素外观修饰第8页4.1.2 字体样式字体样式l4.font-style(设置设置字体风格字体风格)语法：

6、语法：font-style:normal|italic|obliquel5.font-face(综合设置字体样式综合设置字体样式)可以用可以用font属性对字体样属性对字体样式进行综合设置。语法：式进行综合设置。语法：font:font-style font-weight font-size font-familyl参考示例参考示例：例例4-1-1.html、4-1-2.html、4-1-3.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第9页4.1.3 文本外观属性文本外观属性l1.color(定义文本的颜色定义文本的颜色)语法：语法：color：预定义颜色值：预定义颜色值|十

7、十六进制六进制|RGB代码代码l2.text-decoration(定义定义字体修饰字体修饰)语法：语法：text-decoration：underline|overline|line-through|nonel3.text-align(设置设置文本对齐方式文本对齐方式)语法：语法：text-align：center|left|right|justifyl4.line-height(设置行间距设置行间距)行间距就是行与行之间的垂直行间距就是行与行之间的垂直间距，一般称为行高，在间距，一般称为行高，在CSS 样式中用样式中用Line-height用于设用于设置行高。置行高。l5.text-ind

8、ent(定义定义首行缩进首行缩进)语法：语法：text-indent:length|%HTML5+CSS3网页设计基础第4章 元素外观修饰第10页4.1.2 字体样式字体样式l6.:first-letter伪元素伪元素(向文本的第一个字母添加特殊样式向文本的第一个字母添加特殊样式):first-letter伪元素用于指定元素第一个字母的样式。伪元素用于指定元素第一个字母的样式。l7.letter-spacing（字符间距）语法：（字符间距）语法：letter-spacing:normal|lengthl8.word-spacing（单词间距）语法：（单词间距）语法：word-spacing:n

9、ormal|lengthl9.text-transform(文本大小写转换文本大小写转换)语法：语法：text-transform:none|capitalize|uppercase|lowercasel10.text-shadow(文本阴影文本阴影)语法：语法：text-shadow:h-shadow v-shadow blur colorHTML5+CSS3网页设计基础第4章 元素外观修饰第11页4.1.3 文本外观属性文本外观属性l11.word-wrap(允许长单词或允许长单词或 URL 地址换行地址换行)语法：语法：word-wrap:normal|break-wordl12.whi

10、te-space(空白符处理字体修饰空白符处理字体修饰)语法：语法：white-space:normal|pre|nowrap l13.text-overflow(溢出文本溢出文本)语法：语法：text-overflow:clip|ellipsis|stringl参考示例参考示例：例例4-1-4.html、4-1-5.html、4-1-6.html、4-1-7.html、4-1-8.html、4-1-9.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰4.1.4 案例制作案例制作l制作完成演示案例制作完成演示案例:企业文化页面的设计。企业文化页面的设计。l参考代码参考代码 4-1.

11、html第12页HTML5+CSS3网页设计基础第4章 元素外观修饰第13页4.2 图像样式图像样式本节主要内容：本节主要内容：l案例分析案例分析l设置图像样式设置图像样式l案例制作案例制作HTML5+CSS3网页设计基础第4章 元素外观修饰第14页4.2.1 案例分析案例分析l【案例展示】【案例展示】新闻动态新闻动态-产品资讯局部页面的设计。产品资讯局部页面的设计。l【知识要点】设置图像边框、图像缩放、图像位置、图文【知识要点】设置图像边框、图像缩放、图像位置、图文混排等混排等。l【学习目标】【学习目标】掌握掌握CSS设置图像样式的常用属性设置图像样式的常用属性。l参考代码：参考代码：4-2

12、.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第15页4.2.2 设置图像样式设置图像样式在在HTML中，已经学习过图像元素的基本知识，下面用中，已经学习过图像元素的基本知识，下面用CSS样式设置图片的大小和边框。样式设置图片的大小和边框。l1.设置图像大小设置图像大小 使用使用CSS样式控制图片的大小，可以通过样式控制图片的大小，可以通过 width和和 height两个属性来实现。常用的取值单位有像素两个属性来实现。常用的取值单位有像素px和基于父元素宽和基于父元素宽度（高度）的百分比宽度（高度）。度（高度）的百分比宽度（高度）。l2.设置图像边框设置图像边框 用用CSS样

13、式设置图像的边框时，用样式设置图像的边框时，用border-style属性设置边属性设置边框线型，用框线型，用border-width设置边框粗细，用设置边框粗细，用border-color设设置边框颜色置边框颜色。HTML5+CSS3网页设计基础第4章 元素外观修饰4.2.3 案例制作案例制作l制作完成演示案例制作完成演示案例:新闻动态新闻动态-产品资讯局部页面产品资讯局部页面的设计。的设计。l参考代码参考代码 4-2.html第16页HTML5+CSS3网页设计基础第4章 元素外观修饰第17页4.3 列表样式列表样式本节主要内容：本节主要内容：l案例分析案例分析l设置列表项标记类型设置列表

14、项标记类型l设置列表项标记位置设置列表项标记位置l案例制作案例制作HTML5+CSS3网页设计基础第4章 元素外观修饰第18页4.3.1 案例分析案例分析l【案例展示】【案例展示】工程案例工程案例客户案例展示页面。客户案例展示页面。l【知识要点】【知识要点】设置列表类型、设置列表项目符号及位置的设置列表类型、设置列表项目符号及位置的属性和方法。属性和方法。l【学习目标】【学习目标】掌握掌握CSS设置列表样式的常用属性和方法。设置列表样式的常用属性和方法。l参考代码：参考代码：4-3.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第19页4.3.2 设置列表项标记类型设置列表项标记

15、类型l通常的项目列表主要采用通常的项目列表主要采用或或标签，然后配合标签，然后配合标标签列出各个项目。在签列出各个项目。在CSS样式中，列表项的标记类型是通样式中，列表项的标记类型是通过属性过属性list-syle-type来修改的来修改的。list-style-type属性主要用于修改列表项的标记类型属性主要用于修改列表项的标记类型，list-style-type属性常用的属性值见表属性常用的属性值见表4-1。l参考代码：参考代码：4-3-1.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第20页4.3.2 设置列表项标记类型设置列表项标记类型列表类型list-style-ty

16、pe的属性值说明无序列表disc默认值，标记是实心圆circle标记是空心圆square标记是实心正方形decimal标记是数字有序列表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属性值HTML5+CSS3网页设计基础第4章 元素外观修饰第21页4.3.3 设置列表项标记位置设置列表项

17、标记位置list-style-position属性用于声明列表标志相对于列表项内属性用于声明列表标志相对于列表项内容的位置，其属性值有两个关键词容的位置，其属性值有两个关键词 outside(外部外部)和和 inside(内部内部)。使用。使用 outside属性值（默认值），保持标记位于文本属性值（默认值），保持标记位于文本的左侧，放置在文本以外，环绕文本不根据标记对齐。使用的左侧，放置在文本以外，环绕文本不根据标记对齐。使用 inside属性值，列表项目标记放置在文本以内，像是插入在列属性值，列表项目标记放置在文本以内，像是插入在列表项内容最前面的行内元素一样，环绕文本根据标记对齐。表项内

18、容最前面的行内元素一样，环绕文本根据标记对齐。l参考代码：参考代码：4-3-2.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰4.3.4 案例制作案例制作l制作完成演示案例制作完成演示案例:工程案例工程案例客户案例展示页面。客户案例展示页面。l参考代码参考代码 4-3.html第22页HTML5+CSS3网页设计基础第4章 元素外观修饰第23页4.4 表格样式表格样式本节主要内容：本节主要内容：l案例分析案例分析lborder-collapse(设置表格边框合并设置表格边框合并)lborder-spacing(设置单元格间距设置单元格间距)lempty-cells(设置是否显示单

19、元格边框设置是否显示单元格边框)lcaption-side(设置表格标题位置设置表格标题位置)l案例制作案例制作HTML5+CSS3网页设计基础第4章 元素外观修饰第24页4.4.1 案例分析案例分析l【案例展示】【案例展示】营销动态营销动态-销售统计部分页面。销售统计部分页面。l【知识要点】【知识要点】表格边框合并、单元格间距。表格边框合并、单元格间距。l【学习目标】【学习目标】掌握设置表格样式的常用属性。掌握设置表格样式的常用属性。l参考代码：参考代码：4-4.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第25页4.4.2 border-collapse(设置表格边框合并设

20、置表格边框合并)border-collapse属性用于设置表格的边框是合并成单边属性用于设置表格的边框是合并成单边框，还是分别有自己的边框。框，还是分别有自己的边框。语法：语法：border-collapse:separate|collapse参数：参数：lseparate：边框分开，：边框分开，border-spacing 和和 empty-cells 属性起作用。（默认值）属性起作用。（默认值）lcollapse：边框合并，即两个相邻的边框共用一个边框。：边框合并，即两个相邻的边框共用一个边框。忽略忽略 border-spacing 和和 empty-cells 属性。属性。l参考代码：参

21、考代码：4-4-1.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第26页4.4.3 border-spacing(设置单元格间距设置单元格间距)border-spacing用于设置相邻单元格边框间的距离。用于设置相邻单元格边框间的距离。语法：语法：border-spacing:length|length参数：参数：llength：相邻单元格的边框之间的距离，单位：相邻单元格的边框之间的距离，单位 px、cm 等等，不允许用负值。，不允许用负值。l参考代码：参考代码：4-4-2.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第27页4.4.4 empty-cells

22、(设置是否显示单元格边框设置是否显示单元格边框)empty-cells属性用于设置当表格的单元格无内容时，是属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。否显示该单元格的边框。语法：语法：empty-cells:show|hide参数：参数：lshow：在空单元格周围绘制边框：在空单元格周围绘制边框(默认默认)。lhide：不在空单元格周围绘制边框：不在空单元格周围绘制边框l参考代码：参考代码：4-4-3.htmlHTML5+CSS3网页设计基础第4章 元素外观修饰第28页4.4.5 caption-side(设置表格标题位置设置表格标题位置)caption-side用于设置表格

23、标题的位置。用于设置表格标题的位置。语法：语法：caption-side:top|bottom|left|right参数：参数：ltop：把表格标题定位在表格之上，默认值。：把表格标题定位在表格之上，默认值。lbottom：把表格标题定位在表格之下。：把表格标题定位在表格之下。lleft：把表格标题定位在表格的左边。：把表格标题定位在表格的左边。lright：把表格标题定位在表格的右边。：把表格标题定位在表格的右边。HTML5+CSS3网页设计基础第4章 元素外观修饰4.4.6 案例制作案例制作 l制作完成演示案例制作完成演示案例:营销动态营销动态-销售统计部分页面。销售统计部分页面。l参考代

24、码参考代码 4-4.html第29页HTML5+CSS3网页设计基础第4章 元素外观修饰4.5 实训实训l制作完成演示案例制作完成演示案例:设计网站首页上热销产品局部设计网站首页上热销产品局部页面页面。l参考代码参考代码 4-5.html第30页HTML5+CSS3网页设计基础第4章 元素外观修饰第31页4.6 本章小结本章小结 l本章首先介绍了文本样式各个属性的意义及其设置方法，本章首先介绍了文本样式各个属性的意义及其设置方法，然后介绍了图片、列表和表格的样式设置方法，最后通过然后介绍了图片、列表和表格的样式设置方法，最后通过实例讲解了表格、图片和文本在页面设计中的实际应用技实例讲解了表格、图片和文本在页面设计中的实际应用技术。术。l通过本章的学习，读者能掌握页面元素的样式设置技术，通过本章的学习，读者能掌握页面元素的样式设置技术，灵活应用这些技术进行网页元素修饰，设计出美观大方的灵活应用这些技术进行网页元素修饰，设计出美观大方的网页。网页。