电子教案·HTML5+CSS3网页设计基础.ppt

1、第1页第1章 网页设计基础本章概述 本章的学习目标主要内容第2页本章概述 网页设计工作主要包括网页内容显示、总体颜色选择、页面的排版布局和用户群的体验度等。网页设计作为一门综合性较高的课程，涉及商业策划、平面设计、程序语言和数据库等。本章将介绍网页的基本组成元素、页面结构和创建网页的方法。第3页本章的学习目标 了解网页上常见的基本元素及其特点 了解网页的布局结构即网页内容的排版知识 掌握编辑HTML5网页常用的编辑软件 了解HTML5发展、优势、浏览器支持情况 掌握HTML5文档的基本格式和语法规范 掌握创建和浏览网页的方法第4页主要内容1.1 网页的基本元素1.2 网页的布局结构1.3 创建

2、HTML5页面1.4 HTML5基础1.5 实训1.6 本章小结 第5页1.1 网页网页的基本的基本元素元素介绍介绍构成网页的基本元素及其构成网页的基本元素及其特点特点。l1.文本文本l2.图片图片和动画和动画l3.声音和声音和视频视频l4.超链接超链接l5.导航栏导航栏l6.表单表单l7.其他常见其他常见元素元素第6页1.2 网页的布局结构 从页面布局的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区块。块内有文字、图片、超链接等内容，这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素，如图1-2所示。1.3 创建HTML5页面第

3、7页本节主要内容：案例分析 用记事本编辑网页 用HBuilder编辑网页1.3.1 案例分析【案例展示】设计一个简单的页面，包含了网页标题文字和一行文本信息，本例文件1-1.html在IE浏览器中的浏览效果如图1-3所示。【知识要点】HTML文档的结构、创建网页、保存网页与浏览网页。【学习目标】掌握使用记事本和HBuilder创建、保存和浏览网页的方法。第8页1.3.2 用记事本编辑网页 用记事本创建网页过程如下。(1)打开记事本。(2)创建新文件。(3)保存网页。(4)浏览网页。(5)查看网页源代码。第9页1.3.3 用HBuilder编辑网页 用HBuilder创建网页过程如下。(1)启动

4、HBuilder，创建Web项目。(2)创建HTML文件。(3)编辑文件。(4)浏览网页。第10页1.4 HTML5基础第11页本节主要内容：HTML5概述 HTML5文档结构 HTML5语句结构 HTML5语法规范1.4.1 HTML5概述 1.HTML5发展 2014年10发布。HTML5将会逐渐取代HTML4.01、XHTML1.0标准。2.HTML5优势 新的简化的字符集声明。新的简化的DOCTYPE。简答而强大的HTML5API。以浏览器原生能力替代复杂的JavaScript代码。3.浏览器支持 目前常用的浏览器有IE、火孤(Firefox)、谷歌(Chrome)、Safari和 O

5、pera等。第12页1.4.2 HTML5文档结构HTML文档是一种纯文本格式的文件，文档的基本结构为:网页标题 网页内容第13页1.4.2 CSS的层叠和继承性1.声明：声明必须是 HTML 文档的第一行，位于 标签之前。2.文档标签：标记位于标记之后，也称为根标记，表示HTML文档的开始。3.头标签：标签用于定义HTML文档的头部信息，紧跟在标签之后。4.文档编码：HTML5文档使用meta元素的 charset属性指定文档编码，格式为：5.标题标签：标签用来定义文档的标题。6.主体标签：标记用于定义HTML文档所要显示的内容。第14页1.4.3 HTML5语句结构 HTML5语句主要有标

6、签、属性和元素构成，其语法结构如下：元素的内容 1.标签 标签分单标签和双标签，单标签如、等。双标签由开始和结束两个标签符组必须成对出现，等。第15页1.4.3 HTML5语句结构2.属性 属性在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值”形式来表示，有多个属性时用空格隔开，并且在指定多个属性时不用区分顺序。例如，段落标签有属性 align，align表示文字的对齐方式，表示为：欢迎访问本网站3.元素 元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签之间的内容。第16页1.4.4 HTML5语法规范 1.标签和属性的规范 标签名和属性建议都用小写字母。HT

7、ML标签可以嵌套，但不允许交叉。HTML标签中的一个单词不能分两行写。属性值都要用双引号括起来。HTML源文件中的换行、回车符和空格在显示效果中是无效的。2.代码的缩进 HTML代码并不要求在书写时缩进，但为了文档的结构性和层次性，建议使用标签时首尾对齐，内部的内容向右缩进几格。第17页1.5 实训【实训任务】练习创建网页文档，展示企业简介信息，本例文件1-2.html在浏览器中的显示效果如图1-11所示。第18页第19页1.6 本章小结 本章讲述了网页的基本元素、布局结构和网页编辑技术。首先，介绍了网页上常见基本元素和网页的布局结构知识。然后，结合案例介绍了常用的网页编辑工具记事本和Hbui

8、lder。最后，介绍了HTML5文档的结构和语法规范等内容。第20页第2章 网页基本元素本章概述 本章的学习目标主要内容第21页本章概述 随着网络技术的发展，网页内容也更加丰富多样。展示网页内容的元素包括文本、图像、列表、表格、链接等，本章将具体介绍页面上常用的各种元素的标签及其属性。第22页本章的学习目标 掌握文本控制标签的功能和使用方法。掌握图像标签及其各属性的功能和使用方法。掌握网页上常用超链接的设置方法。掌握列表标签及其属性的功能和使用方法。掌握表格标签及其属性的功能和使用方法。掌握页面交互元表的功能和用法。掌握综合应用各种页面元素标签及其属性制作页面的方法。第23页主要内容2.1 文

9、本控制标签2.2 图像标签2.3 超链接标签2.4 列表2.5 表格2.6 页面交互标签2.7 实训2.8 本章小结第24页2.1 文本控制标签本节主要内容：标题标签 段落标签 换行标签 水平线标签 文本格式化标签 范围标签 注释标签 特殊符号第25页2.1.1 案例分析【案例展示】招商加盟-加盟中心局部页面的设计。使用标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等，设计招商加盟-加盟中心局部页面，【知识要点】标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等网页元素。【学习目标】掌握标题标签、段落标签、换行标签、水平线标签、文本格式控制标签的作用并灵活应用。参考代码：

10、2-1.html第26页2.1.2 标题标签 语法格式：标题文字说明：n的取值为1到6。align为可选属性，用来设置标题在页面的对齐方式，取值 left（左对齐）、center（居中对齐）、right（右对齐），默认取值left。参考示例：2-1-1.html第27页2.1.3 段落标签 语法格式：段落文字 说明：参数align的取值和功能参考标题标签中说明第28页2.1.4 换行标签 语法格式：文字 或 文字使用换行标签，可以使页面内容整齐、美观。第29页2.1.5 水平线标签语法格式：属性介绍：align：参考标题标签中align说明。size：设置水平线的粗细，n取正整数，默认为2像素

11、。width：设置水平线的长度，n取正整数表示确定的像素值，也可以是浏览器窗口的百分比，默认为100%。color：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制#RGB或rgb(r,g,b)来表示。noshade：设置水平线是否要阴影，默认有阴影。例：定义一条水平线，居中显示、粗5px、宽400px、红色、无阴影。代码如下。第30页2.1.6 文本格式化标签 参考示例：2-1-2.html标签标签显示效果显示效果和和文字以粗体方式显示，b定义文本粗体，strong定义强调文本和和文字以斜体方式显示，i定义斜体字，em定义强调文本和和文字以加删除线方式显示(HTML5不赞成使用s)和和文

12、字以加下划线方式显示(HTML5不赞成使用u)文字高亮显示创建一个引用标记，被标记的文字以斜体的方式显示第31页2.1.7 范围标签 语法格式：区域元素说明：与之间只能包含文本和各种行内标签，用来定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。第32页2.1.8 注释标签 语法格式：说明：注释内容可以为一行，也可以为多行。并且开始标签和结束标签可以不在一行上。第33页2.1.9 特殊符号特殊符号特殊符号描述描述字符的代码字符的代码 空格符 大于号>&和号&￥人民币¥版权©注册商标&r

13、eg;摄氏度°正负号±乘号×除号÷2.1.10 案例制作 制作完成演示案例:加盟中心。参考代码 2-1.html第34页第35页2.2 图像标签 本节主要内容：常用图像格式 图像标签及其属性 绝对路径与相对路径第36页2.2.1 案例分析【案例展示】新闻动态-资讯详情局部页面的设计。使用图像标签，标题标签、段落标签等，设计完成资讯详情局部页面的设计。【知识要点】图像标签的定义、图像属性设置、图文混排。【学习目标】掌握图像格式设置和图文混排技术。参考代码：2-2.html第37页2.2.2 常用图像格式网页图像有三种常用的格式：GIF、JPG和PN

14、G。具体区别如下。（1）GIF格式GIF格式支持动画，同时GIF格式也是一种无损的图像格式。再加上GIF格式支持透明(全透明或全不通明)，因此很适合在互联网上使用。GIF格式文件最多使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像，如Logo、小图标及其他色彩相对单一的图像。（2）PNG格式PNG格式是一种替代GIF格式的无专利权限制的格式。PNG格式最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG格式不支持动画。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。（3）JPG格式JPG格式所能显示的颜色比GIF格式和P

15、NG格式要多得多，可以用来保存超过256种颜色的图像。JPG格式主要用于摄影或者连续色调图像。2.2.3 图像标签及其属性 语法格式：第38页2.2.3 图像标签及其属性 属性介绍：src：用于指定图像文件的路径和文件名，是标签的必需属性。width：设置图像的显示宽度，单位是像素或百分比。height：设置图像的显示高度，单位是像素或百分比。alt：图像不能显示时，代替图像的说明文字。border：设置图像边框的宽度，单位是像素。align：设置图像的对齐方式，取值left、center、right。title：鼠标指向图片时，显示的提示文字。hspace：定义图像左侧和右侧的空白。vspa

16、ce：定义图像顶部和底部的空白。第39页2.2.3 图像标签及其属性 指定图像大小：用width和height属性用来定义图片的宽度和高度，其目的是通过指定图像的高度和宽度加快图像的下载速度。参考示例：2-2-1.html第40页2.2.3 图像标签及其属性 指定图像的替换文本：alt属性指定的替换文本 参考示例：2-2-2.html第41页2.2.3 图像标签及其属性 指定图像的边框：通过border属性可以为图像添加边框，设置边框的宽度，添加边框后的图像显得更醒目、美观。边框的颜色默认黑色，不可调整。参考示例：2-2-3.html第42页2.2.3 图像标签及其属性 指定图像的对齐方式：图

17、文混排技术是指设置图像与同一行中的文本、图像、插件或其它元素的对齐方式。默认情况下图像的底部会相对于于文本的第一行文字对齐。但是在制作网页的过程中，有时需要实现图像和文字的环绕效果，这就需要使用图像的对齐属性align。参考示例：2-2-4.html第43页2.2.4 绝对路径与相对路径 网页中路径分两种：绝对路径和相对路径。1.绝对路径 绝对路径是包括通信协议名、服务器名、路径及文件名的完整路径，是网页上的文件或目录在硬盘上的真正路径。2.相对路径 相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标文件的位置。第44页2.2.5 案例制

18、作 制作完成演示案例:资讯详情局部页面。参考代码 2-2.html第45页第46页2.3 超链接标签 本节主要内容：超链接简介 超链接的应用第47页2.3.1 案例分析【案例展示】链接案例网站信息页面。使用页面间链接、网站间链接、可下载文件链接等知识，制作网站信息页面。【知识要点】超链接的定义、页面间链接、网站间链接、下载文件链接等。【学习目标】掌握各种超链接 的应用场合和实现技术。参考代码：2-3.html2.3.2 超链接简介 语法格式：超文本说明：在上面的语法中，标签用于定义超链接，href和 target为其常用属性。href：用于指定链接目标的url地址。需要创建空链接时，用“#”代

19、替URL。target：用于指定链接页面的打开方式，常用的取值有_self和_blank两种，_self为默认值，意为在原窗口中打开，_ blank为在新窗口中打开。第48页2.3.3 超链接的应用 1.站内页面之间的链接 同一网站域名下的各页面之间可以用超链接实现互相链接访问。例如，在首页以外的其他页面上，点击超链接“首页”返回网站首页。代码如下。首页 4.下载链接 5.图像做超链接 6.锚记链接第49页2.3.3 超链接的应用 2.网站之间的链接不同网站之间通过超链接实现信息和资源共享。例如，在网页上，点击超链接“163邮箱”打开163网易邮箱首页。代码如下。163邮箱 例如，点击超链接“

20、百度百科超链接”打开百度百科网站上关于超链接介绍的页面。代码如下。百度百科-超链接 第50页2.3.3 超链接的应用 3.媒体链接 超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。例如，点击超链接“MP4视频”打开视频文件并开始播放。代码如下。MP4视频 第51页2.3.3 超链接的应用 4.下载链接如果超链接指向不是一个网页文件，而是其他文件，如doc、xls、zip、rar文件等，单击链接时就会下载相应的文件。例如，点击超链接“合作协议下载”，开始下载文件。代码如下。合作协议下载 注意：在项目文件夹的datum目录里，有“合

21、作协议.zip”文件，才能点击下载。第52页2.3.3 超链接的应用 5.图像做超链接 为了增加页面的美观性，有时用图像代替文字做超链接。例如，超链接中的“首页”超文本，用图片替换。代码如下。链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。第53页2.3.3 超链接的应用 6.锚记链接 创建锚记链接，需要两个步骤。(1)首先定义锚记名称。格式1：目标附近的文本 格式2：网页内容，E代表html标签，如p、hn、div等。(2)然后，定义锚记链接。点击超文本时，跳转到锚记名或id名开始的位置。格式：超文本第54页2.3.4 案例制作 制作完成演示案例:网站

22、信息页面。参考代码 2-3.html第55页第56页2.4 列表 本节主要内容：无序列表 有序列表 定义列表 嵌套列表第57页2.4.1 案例分析【案例展示】招商加盟-合作方式局部页面。使用多种列表技术设计招商加盟-合作方式页面。【知识要点】无序列表、有序列表、定义列表和嵌套列表【学习目标】掌握各种列表的使用方法和列表嵌套技术。参考代码：2-4.html2.4.2 无序列表 语法格式：列表项1列表项2 属性type定义无序列表的前导符号。取值circle（圆圈）、disc（圆点）和square（方块），默认disc。参考示例：2-4-1.html第58页2.4.3 有序列表 语法格式：列表项1

23、列表项2 属性介绍：type：列表项的符号类型，取值1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字），默认符号是阿拉伯数字。start：列表项编号的起始值，取值正整数。默认取值1，即编号从1开始。reversed：是否对列表项反向排序，当取值为“reversed”时，反向排序。参考示例：2-4-2.html第59页2.4.4 定义列表 语法格式：标题1 标题1的描述1 标题1的描述2 标题2 标题2的描述1 标题2的描述2 说明：标签指定定义列表，标签指定列表项的标题，标签对标题进行描述。参考示例：2-4-3.html第60页2.4.5 嵌套列表

24、 所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。参考示例：2-4-4.html第61页2.4.6 案例制作 制作完成演示案例:合作方式局部页面。参考代码 2-4.html第62页2.5 表格 第63页本节主要内容：表格的结构 表格的基本语法 表格的修饰 不规范表格2.5.1 案例分析【案例展示】LED射灯介绍局部页面。使用表格技术，制作LED射灯介绍局部页面。【知识要点】表格元素、语法、表格修饰的设置。【学习目标】掌握设置表格属性的方法。第64页2.5.2 表格的结构 表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据

25、或其他内容。表格中的内容按照相应的行或列进行分类和显示。第65页2.5.3 表格的基本语法 表格标题 表头1表头2表头n 表头2-1表头2-2表头2-n 表头m-1表头m-2表头m-n第66页2.5.3 表格的基本语法表格的整体外观由标签的属性决定。border：定义表格边框的宽度，单位是像素。默认值“0”，显示为没有边框的表格。width：定义表格的宽度，单位是像素或百分比。height：定义表格的高度，单位是像素或百分比。cellspacing：定义单元格之间的空白，单位是像素，默认2px。cellpadding：定义单元格边框与内容之间的空白,单位是像素，默认1px。参考示例：2-5-1

26、.html第67页2.5.4 表格的修饰 表格是网页布局中的重要元素，可以对其设置进而美化表格。1.设置表格大小2.设置表格背景3.设置表格的对齐方式4.设置表格中数据的对齐方式 参考示例：2-5-3.html第68页2.5.5 不规范表格1跨行跨行是指单元格在垂直方向上合并，语法如下：单元格内容2跨列跨列是指单元格在水平方向上合并，语法如下：单元格内容3跨行、跨列 参考示例：2-5-4.html第69页2.5.6 案例制作 制作完成演示案例:LED射灯介绍局部页面。参考代码 2-5.html第70页2.6 页面交互标签 第71页本节主要内容：details和summary元素表格的基本语法

27、progress元素 meter元素2.6.1 details和summary元素 details元素用于显示或隐藏文档的细节信息用details和summary实现信息显示/隐藏功能的代码格式如下：标题 文档详细信息 属性open:取值open，定义details是否显示。默认不显示。参考示例：2-6-1.html第72页2.6.2 progress元素 progress元素用于显示某个特定任务的时间进度 语法格式：属性介绍：value：定义当前已完成的工作量值。属性值value1取值在0.0和1.0之间或者是在max值以下。max:定义全部的工作量数值。属性值value2默认取值范围是从0

28、.0-1.0，或者指定值，默认值是1.0。参考示例：2-6-2.html第73页2.6.3 meter元素 meter元素用于表示指定范围内的数值。语法格式：属性介绍：value：定义度量的当前值。必须。optimum：定义度量的优化值，即什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。第74页2.6.3 meter元素 low：定义度量的值位于哪个点被界定为低的值的范围。high：定义度量的值位于哪个点被界定为高的值的范围。min：定义范围的最小值，默认值是0。max：定义范围的最大值，默认值是1。参考示例：2-6-3.

29、html第75页2.7 实训【实训任务】设计新闻动态产品资讯局部页面。【知识要点】文本控制标签、图像标签及图文混排、列表、超链接。【实训目标】掌握用文本标签、图像标签、列表、超链接等设计页面的技术。第76页第77页2.8 本章小结 本章首先介绍了文本控制标签的功能及用法，然后介绍了图像标签、文件的路径知识和图文混排技术，还有超链接技术、列表和表格的设计技术，页面交互元素的功能，最后通过实例讲解了文本控制标签、图像标签、列表标签、超链接在页面设计中的实际应用技术。通过本章的学习，读者能掌握应用页面元素设计简单网页的技术。第78页第3章 CSS入门本章概述 本章的学习目标主要内容第79页本章概述

30、CSS在Web设计领域是一个突破，它为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，包括版式、颜色和大小等。CSS样式表可以将所有的样式声明统一存放，进行统一管理，也就是说，页面中显示的内容放在结构里，而修饰、美化放在样式里，做到结构(内容)与样式分开，这样，当页面使用不同的样式时，呈现出的效果是不一样的。W3C(万维网联盟)推荐使用CSS来完成表现。第80页本章的学习目标 理解CSS的定义、优点。掌握CSS的定义与使用方法。掌握CSS样式规则。掌握CSS基础选择器，能够运用CSS选择器选择页面元素。掌握CSS长度单位、百分比单位和色彩单位的使用 掌握CSS的层叠性和继承性。理

31、解CSS优先级，能够区分复合选择器权重的大小第81页主要内容3.1 CSS定义与使用3.2 CSS 选择器3.3 CSS属性单位3.4 CSS高级特性3.5 实训3.6 本章小结 第82页3.1 CSS定义与定义与使用使用本节主要内容：本节主要内容：lCSS概述概述lCSS定义和定义和引用引用3.1.1 CSS概述 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。同时CSS非常常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。如今大多数网页都是遵循Web标准开发的

32、，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。HTML与CSS的关系就像人的骨骼与衣服，通过更改CSS样式，可以轻松控制网页的表现样式。第83页第84页3.1.2 CSS定义和引用定义和引用l1.内联样式内联样式l内联样式就是在元素标签内使用内联样式就是在元素标签内使用style属性，属性，style属性值属性值可以包含任何可以包含任何CSS样式声明样式声明。内。内联样式的格式为联样式的格式为:ll需要需要说明的是，内联样式由于将表现和内容混在一起，不说明的是，内联样式由于将表现和内容混在一起，不符合符合Web标准，所以要慎用这种方法，当样式仅需要在一

33、标准，所以要慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式个元素上应用一次时可以使用内联样式。l参考示例参考示例：3-1-1.html第85页3.1.2 CSS定义和引用定义和引用l2.内部样式表内部样式表l内部样式表是写在内部样式表是写在HTML的的里面的，只对所里面的，只对所在的网页有效在的网页有效。l（1）内部内部样式表的格式为：样式表的格式为：选择选择符符1属性：属性值；属性：属性值属性：属性值；属性：属性值 /*注释内容注释内容*/选择符选择符2属性：属性值；属性：属性值属性：属性值；属性：属性值选择符选择符n属性：属性值；属性：属性值属性：属性值；属性：属性值第8

34、6页3.1.2 CSS定义和引用定义和引用l（2）组合组合选择符的格式选择符的格式除了在除了在内分别定义各种选择符的样式外，如内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦，其格式为：少重复定义的麻烦，其格式为：选择选择符符1，选择符，选择符2，选择符，选择符n属性：属性值；属性：属性值属性：属性值；属性：属性值ll参考示例参考示例：3-1-2.html第87页3.1.2 CSS定义和引用定义和引用l3.外部外部样式表样式表l多个页面需要应用相同样式时，应该使用外部样式表。外多个页面需要应

35、用相同样式时，应该使用外部样式表。外部样式表管理整个部样式表管理整个Web页的外观。页的外观。Web开发时，首先对整开发时，首先对整个外观定义一个个外观定义一个CSS文件（扩展名为文件（扩展名为css），当页面需要），当页面需要使用样式时，通过使用样式时，通过标签链接外部样式表文件。使用标签链接外部样式表文件。使用外部样式表可以实现改变一个文件就能改变整个站点外观外部样式表可以实现改变一个文件就能改变整个站点外观的目的。的目的。第88页3.1.2 CSS定义和引用定义和引用l(1)用用标签链接样式表文件标签链接样式表文件标签必须放到页面的标签必须放到页面的 标签对内。标签对内。其格式为其格式为

36、:第89页3.1.2 CSS定义和引用定义和引用l(2)样式样式表文件的格式表文件的格式l样式表文件可以用任何文本编辑器样式表文件可以用任何文本编辑器(如记事本如记事本)打开并编辑打开并编辑，一般样式表文件的扩展名为，一般样式表文件的扩展名为.css。样式表文件的内容是。样式表文件的内容是定义的样式表，不包含定义的样式表，不包含HTML标签。样式表文件的格式为标签。样式表文件的格式为：l选择符选择符1属性：属性值；属性：属性值属性：属性值；属性：属性值 /*注释内容注释内容*/l选择符选择符2属性：属性值；属性：属性值属性：属性值；属性：属性值ll选择符选择符n属性：属性值；属性：属性值属性：

37、属性值；属性：属性值l参考示例参考示例：3-1-3.html第90页3.2 CSS 选择器本节主要内容：案例分析 CSS样式规则 CSS基础选择器 案例制作第91页3.2.1 案例分析【案例展示】使用链入外部样式表的方法制作企业简介页面。【知识要点】常用的CSS选择符、网页中引用CSS。【学习目标】掌握CSS的定义与使用方法 参考代码：3-2.html第92页3.2.2 CSS样式规则 CSS为样式化网页内容提供了一条捷径，即样式规则，每一条规则都是单独的语句。样式表的每个规则都有两个主要部分：选择符(selector)和声明(declaration)。CSS控制网页内容显示格式的方式是通过许

38、多定义的样式属性(如字号、段落控制等)实现的，并将多个样式属性定义为一组可供调用的选择符(selector)。用户只需要通过选择符对不同的HIML标签进行控制，并赋予各种样式声明，即可实现各种效果。声明由一个或多个属性值对组成。第93页3.2.2 CSS样式规则 样式规则的语法为：selector属性：属性值；属性：属性值 语法说明:selector表示希望进行格式化的元素；声明部分包括在选择符后的大括号中；用“属性：属性值”描述要应用的格式化操作。第94页3.2.3 CSS基础选择器 1标记选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS

39、样式。其基本语法格式为：标记名属性1:属性值1;属性2:属性值2;属性3:属性值3;该语法中，所有的HTML标记名都可以作为标记选择器，如body、hl、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都生效。标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。第95页3.2.3 CSS基础选择器 2类选择器 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式为：.类名属性1：属性值1；属性2：属性值2；属性3：属性值3；该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义clas属性。

40、类选择器最大的优势是可以为元素对象定义单独或相同的样式。参考示例：3-2-1.html第96页3.2.3 CSS基础选择器 3id选择器 id选择器使用“”进行标识，后面紧跟id名，其基本语法格式为：#id名属性1：属性值1；属性2：属性值2；属性3：属性值3；该语法中，id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。参考示例：3-2-2.html第97页3.2.3 CSS基础选择器 4通配符选择器 通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式为：*属性1：属

41、性值1；属性2：属性值2；属性3：属性值3；例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。*margin:0;/*定义外边距*/padding:0;/*定义内边距*/第98页3.2.3 CSS基础选择器 5标签指定式选择器 标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h：h3.special或pone。参考示例：3-2-3.html第99页3.2.3 CSS基础选择器 6后代选择器 后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面

42、，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。参考示例：3-2-4.html第100页3.2.3 CSS基础选择器 7并集选择择器 并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、类选择器及id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。参考示例：3-2-5.html3.2.4 案例制作 制作完成演示案例:制作企业简介。参考代码 3-2.html第101页3.3 CSS属性单位第102页本节主要内容：长度单位 色彩单位3.3.1 长度、百分比单位 1长度单位

43、 长度单位有相对长度单位和绝对长度单位两种类型。相对长度单位是指以该属性前一个属性的单位值为基础来完成目前的设置。绝对长度单位将不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的lcm与打印机上的1cm是一样长的。由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的。第103页3.3.1 长度、百分比单位 2百分比单位 百分比单位也是一种常用的相对长度类型，通常的参考依据为元素的font-size属性。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分

44、比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格。第104页3.3.2 色彩单位 1用十六进制数方式表示色彩值 在计算机中，定义每种色彩的强度范围为0255。当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度都为255时，将产生白色。在HTML中，使用十六进制数指定色彩时，前面是一个“#”号，再加上6个十六进制数字表示，表示方法为：#RRGGBB。其中，前两

45、个数字代表红光强度(Red)，中间两个数字代表绿光强度(Green)，后后两个数字代表蓝光强度(Blue)。红色、绿色、蓝色、黑色、白色的十六进制设置值分别为:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第105页3.3.2 色彩单位 2用色彩名称方式表示色彩值CSS中也提供了与HTML一样的用色彩的英文名称表示色彩的方式。例如下面的示例代码：pcolor:red第106页3.3.2 色彩单位 3用rgb函数方式表示色彩值在CSS中，可以用rgb函数设置所要的色彩。语法格式为：rgb(R,G,B)其中，R为红色值，G为绿色值，B为蓝色值。这3个参数可取正整

46、数值或百分比值，正整数值的取值范围为0255，百分比值的取值范围为色彩强度的百分比0.0%100.0%。例如下面的示例代码：pcolor:rgb(128,50,220)pcolor:rgb(15%,100,60%)第107页3.4 CSS高级特性第108页本节主要内容：案例分析 CSS的层叠和继承性 CSS的优先级 案例制作3.4.1 案例分析【案例展示】使用各种类型的元素制作客户案例的相关产品局部页面。【知识要点】CSS的层叠性、继承性及优先级。【学习目标】灵活使用CSS高级特性的方法设置元素的样式第109页3.4.2 CSS的层叠和继承性 1.层叠性 层叠(cascade)是指CSS能够对

47、同一个元素应用多个样式表的能力。一般原则是,最接近目标的样式定义优先级最高。高优先级样式将继承低优先级样式的未重叠定义,但覆盖重叠的定义。根据规定,样式表的优先级别从高到低为:内联样式表、内部样式表、链接样式表和默认浏览器样式表。参考示例：3-4-1.html第110页3.4.2 CSS的层叠和继承性 2.继承性 CSS的主要特征就是继承（Inheritance），它依赖于祖先-子孙关系，这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父代样式。根据CSS规则，子元素继承父元素属性。如:bodyfont-family:微软雅黑;通过继承，所有bod

48、y的子元素都应该显示为为“微软雅黑”字体，子元素的子元素也一样。参考示例：3-4-2.html第111页3.4.3 CSS的优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题，当多个规则应用到同一个元素时权重越大的样式会被优先采用。参考示例：3-4-3.html第112页3.4.4 案例制作 制作完成演示案例:客户案例相关产品局部页面。参考代码 3-4.html第113页3.5 实训 制作完成演示案例:LED射灯详细信息页面。参考代码 3-5.html第114页第115页3.6 本章小结 本章全面讲述了CSS所实现的结构与表现的分离及CSS样式的优先级规

49、则。首先介绍了CSS定义与使用、CSS样式规则、引入方式及CSS基础选择器。接下来，讲解了CSS属性单位、CSS的层叠性、继承性及优先级。最后通过CSS修饰文本，制作出了一个常见的LED射灯详细信息页面。第116页第四章 元素外观修饰本章概述 本章的学习目标主要内容第117页本章概述 网页设计中各种元素包括文本、图像、列表、表格、链接、导航等，可以用CSS样式进行设置以美化页面。本章将具体介绍页面各种元素样式属性及其设置方法。第118页本章的学习目标 掌握文本字体样式属性的意义及其设置方法。掌握图像样式各个属性的意义及其设置方法。掌握列表样式的定义方法。掌握表格样式的设置方法。掌握综合应用元素

50、外观属性制作页面的方法。第119页主要内容4.1 文本样式4.2 图像样式4.3 列表样式4.4 表格样式4.5 实训4.6 本章小结 第120页4.1 文本样式文本样式本节主要内容：本节主要内容：l案例分析案例分析l字体样式字体样式l文本外观属性文本外观属性l案例制作案例制作第121页4.1.1 案例分析【案例展示】企业文化页面的设计。【知识要点】字体类型、大小、粗细、颜色、修饰、对齐方式、缩进、行间距、首字母样式、字符间距、单词间距、大小写转换、文本阴影、长单词换行、空白符处理、溢出文本处理等。【学习目标】掌握CSS文本修饰的常用属性的作用并灵活应用。参考代码：4-1.html第122页4