《《HTML与CSS》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《HTML与CSS》PPT课件.ppt（81页珍藏版）》请在金锄头文库上搜索。
1、1网网络编程程 第第2章章 HTML技术介绍技术介绍第第3章章 CSS技术基础技术基础2主主题章节内容章节内容本章小结本章小结课后习题课后习题3章章节内容内容2.0 引言引言2.1 HTML网页文档结构网页文档结构2.2 常用常用HTML标签标签2.3 CSS（Cascading Style Sheet）42.0 引言引言HTML是制作网页的基础，在现实中的各种网页都是制作网页的基础，在现实中的各种网页都是建立在是建立在HTML基础之上的。通过基础之上的。通过HTML，可以实，可以实现对页面元素的显示处理。现对页面元素的显示处理。本章简单介绍本章简单介绍HTML网网页文档的页文档的基本知识，基
2、本知识，整体结构，常用的整体结构，常用的HTML标签标签和超链接。和超链接。CSS技术是网页技术中的核心内容之一，通过技术是网页技术中的核心内容之一，通过CSS不但可以控制页面某个元素的显示样式，而且可以不但可以控制页面某个元素的显示样式，而且可以整体控制整个站点内某元素的样式。在本章将简要整体控制整个站点内某元素的样式。在本章将简要绍绍CSS技术的基本知识技术的基本知识。理解理解HTML、CSS基本原理，是开发静态基本原理，是开发静态Web页面页面的基础。的基础。5章章节内容内容2.0 引言引言2.1 HTML网页文档结构网页文档结构2.2 常用常用HTML标签标签2.3 CSS（Casca
3、ding Style Sheet）2.1 HTML网页文档结构网页文档结构 一个完整的一个完整的HTML文件由标题、段落、表格和文本等各文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素，种嵌入的对象组成，这些对象统称为元素，HTML使用标使用标记来分隔并描述这些元素。实际上整个记来分隔并描述这些元素。实际上整个HTML文件就是由文件就是由元素与标记组成的。元素与标记组成的。文件开始标记文件开始标记文件头开始的标记文件头开始的标记文件头的内容文件头的内容文件头结束的标记文件头结束的标记文件主体开始的标记文件主体开始的标记文件主体的内容文件主体的内容文件主体结束的标记文件主体结
4、束的标记文件结束标记文件结束标记7章章节内容内容2.0 引言引言2.1 HTML网页文档结构网页文档结构2.2 常用常用HTML标签标签2.3 CSS（Cascading Style Sheet）lHTML标签可以划分为如下四种格式：标签可以划分为如下四种格式：n标记名称标记名称：单一型，无设置值。例如，：单一型，无设置值。例如，brn标记名称标记名称 属性属性”属性值属性值”：单一型，有设置值。：单一型，有设置值。例如，例如，hr width=”80%”n标记名称标记名称-/标记名称标记名称：对称型，无设置值。：对称型，无设置值。例如，例如，title-/titlen标记名称标记名称 属性属
5、性”属性值属性值”-/标记名称标记名称：对：对称型，有设置值。例如，称型，有设置值。例如，body bgcolor=”red”-/body2.2 常用常用HTML标签标签9类型类型HTML元素元素描述描述主窗体主窗体 元素元素、 超文本的开始和结束超文本的开始和结束、 超文本头部信息的开始和结束超文本头部信息的开始和结束、超文本窗口标题的开始和结束，超文本窗口标题的开始和结束，它被显示在浏览器的标题栏中它被显示在浏览器的标题栏中用来描述用来描述HTML文档的元信息，文档的元信息，即文档自身的信息即文档自身的信息、网页主体部分，是网页主体部分，是HTML语言的语言的核心部分核心部分lHTMLHT
6、ML标题标题 HTML HTML 标题（标题（HeadingHeading）是通过）是通过 - - 等标签等标签进行定义的，此标签只能在进行定义的，此标签只能在headhead标签内出现。标签内出现。实例实例最大字号标题最大字号标题中字号标题中字号标题最小字号标题最小字号标题11类型类型HTML元素元素描述描述字符字符风格风格控制控制元素元素、 、定义字体的大小定义字体的大小、字体加粗字体加粗、字体变斜体字体变斜体、字体加下划线字体加下划线、字体加中划线字体加中划线、字体为上标字体为上标、字体为下标字体为下标、定义字体属性定义字体属性lHTMLHTML段落段落HTML HTML 段落是通过段落
7、是通过 标签进行定义的。标签进行定义的。实例实例 HTML HTML的英文全称是的英文全称是Hyper Text Markup LanguageHyper Text Markup Language，它是超文本标记语言的缩写，是，它是超文本标记语言的缩写，是InternetInternet上用于编上用于编写网页的主要语言。写网页的主要语言。 HTML HTML中每个用来作为标记的符号都可以看作是一中每个用来作为标记的符号都可以看作是一条命令，它告诉浏览器应该如何显示文件的内容。条命令，它告诉浏览器应该如何显示文件的内容。lHTML HTML 图像图像HTML HTML 图像是通过图像是通过 标签
8、进行定义的。标签进行定义的。img src=image01.jpg width=100 height=150 /14类型类型HTML元素元素描述描述版面版面控制控制元素元素、空格、回车有效空格、回车有效、段落的开始和结束段落的开始和结束加水平线加水平线插入图片插入图片框架框架元素元素设置框架页显示设置框架页显示表示每一个框架中显示的表示每一个框架中显示的页面页面15类型类型HTML元素元素描述描述标题标题元素元素和和标题分级方式：标题分级方式：UL表示表示无序无序;OL表示有序表示有序子标题子标题链接链接 、超链接超链接表格表格元素元素、 显示表格显示表格、表格的行显示表格的行显示、表格的列显
9、示表格的列显示、设定表格每行设定表格每行的字段抬头的字段抬头lHTML HTML 链接链接HTML HTML 链接是通过链接是通过 标签进行定义的。标签进行定义的。实例实例内蒙古大学内蒙古大学17超链接标签 链接链接文字文字 超超链接链接 target 属性属性属性属性值值说说 明明_blank将连结内容显示在新窗口中。将连结内容显示在新窗口中。 _self将连接内容显示在原本的窗口中。将连接内容显示在原本的窗口中。 _top将连结内容显示在原本的窗口中，并取消框架的限制。将连结内容显示在原本的窗口中，并取消框架的限制。 _parent将内容显示在上一层的框架中。将内容显示在上一层的框架中。
10、l表格表格表格由表格由 标签来定义。每个表格均有若干行（标签来定义。每个表格均有若干行（由由 标签定义），每行被分割为若干单元格（由标签定义），每行被分割为若干单元格（由 标签定义）。数据单元格可以包含文本、图片、标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。列表、段落、表单、水平线、表格等等。row 1, column 1row 1, column 1row 1, column 2row 1, column 2row 2, column 1row 2, column 1row 2, column 2row 2, column 219设设置表格的置表格的边边框与
11、大小框与大小这几个属性用来定义表格的边框线条粗细及其高度和宽度。这几个属性用来定义表格的边框线条粗细及其高度和宽度。绝对位置绝对位置表示法：表示法：使用像素来做为设定单位 ，不论窗口如何调整，占用固定的像素。 相对相对位置表示法位置表示法 ：使用百分比做为设定单位 ，占用某一固定的比例大小 。属性属性说明说明border改变表格边框厚度。改变表格边框厚度。 width改变表格的宽度。改变表格的宽度。 height改变表格的高度。改变表格的高度。 20表格中数据的表格中数据的对齐对齐方式方式属属 性性可可设定设定的的属性属性值值说说 明明alignleft、center、right靠左、置中、靠
12、右对齐，默认为靠左对齐靠左、置中、靠右对齐，默认为靠左对齐 valigntop、center、bottom向上、置中、向下对齐，默认为置中对齐向上、置中、向下对齐，默认为置中对齐 表格中数据的对齐方式分为表格中数据的对齐方式分为水平对齐水平对齐与与垂直对齐垂直对齐两种。两种。若这两个属性用在若这两个属性用在标签标签中，则可设置整行的对齐方式，中，则可设置整行的对齐方式，若用在若用在标签标签中，则是设置个别单元格中数据的对齐方式。中，则是设置个别单元格中数据的对齐方式。l表单表单表单是一个包含表单元素的区域。表单元素允许用户表单是一个包含表单元素的区域。表单元素允许用户在表单中（比如：文本域、下
13、拉列表、单选框、复选在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，然后服务器端可以获得用户输入框等等）输入信息，然后服务器端可以获得用户输入的数据。的数据。表单标签（表单标签（）定义。）定义。姓名姓名: : 年龄年龄: : 22类型类型HTML元素元素描述描述表单表单元素元素、显示表单显示表单普通输入文本普通输入文本密码输入框密码输入框复选框复选框单选按钮单选按钮将图片设置为提将图片设置为提交按钮交按钮23类型类型HTML元素元素描述描述表单表单元素元素、下拉列表框下拉列表框、设置下拉选项设置下拉选项、多行文本域多行文本域提交按钮提交按钮重置按钮重置按钮隐藏域隐藏域文本选择框
14、文本选择框24表单与交互式网页结构表单与交互式网页结构25 JSP借由标签借由标签所所构成构成的的表单区块表单区块中，取得中，取得用户在用户在其中特定其中特定字字段输入段输入的的数据数据內容內容 。26创创建表建表单单标签在网页创建一块标签在网页创建一块特定特定区域作为一种标签区域作为一种标签容器，形成收集容器，形成收集用户数据用户数据功能的功能的网页表单网页表单。属性属性method、action和和name，配合配合标签标签，形成，形成创建表单创建表单的的完整语法完整语法。表单内容表单内容其中其中method指定网页以何种模式传送表单的属性数据，可能的两种模式分别是指定网页以何种模式传送表
15、单的属性数据，可能的两种模式分别是Post和和Get 。action代表这一份表单网页传送出去之后，服务器对其响应所返回的网页路径代表这一份表单网页传送出去之后，服务器对其响应所返回的网页路径地址地址 ，若是这个属性没有设定，网页本身会被当作若是这个属性没有设定，网页本身会被当作action属性值属性值 。name代表代表表单的名称，表单的名称，JSP利用这个名称，辨识网页中的特定表单区域利用这个名称，辨识网页中的特定表单区域。27文本框是用来取得用户在网页所输入的姓名、地址之类等相关数据内文本框是用来取得用户在网页所输入的姓名、地址之类等相关数据内容容 。文本框外观文本框外观密码输入属性主要
16、用在取得用户输入的密码，且会出现密码符号代替密码输入属性主要用在取得用户输入的密码，且会出现密码符号代替用户所输入的数据以避免密码被其它人看见。用户所输入的数据以避免密码被其它人看见。 28文本框属性文本框属性属属 性性说说 明明typetext / password。name指定文字输入栏的名称。如指定文字输入栏的名称。如name=usrname，则在，则在JSP程程序中可利用此名称来取得其中所输入的数据。序中可利用此名称来取得其中所输入的数据。 value设定文字属性的默认值。设定文字属性的默认值。 size设定文字属性的长度。设定文字属性的长度。 maxlength设定文字属性可接受的字
17、符上限，中文字也算一个字符。设定文字属性可接受的字符上限，中文字也算一个字符。 29多行文本多行文本输输入区域入区域 多行文本输入区域常用于输入大量的文字数据多行文本输入区域常用于输入大量的文字数据 30属性属性 属属 性性说说 明明name设定文本区域的名称设定文本区域的名称 rows设定设定文本区域文本区域显示的行数显示的行数 cols设定设定文本区域文本区域显示的列数显示的列数 value设定设定文本区域文本区域的默认值的默认值 31单选按按钮单选按钮单选按钮使用使用于多选于多选一的一的情况情况，标签的标签的type属性设属性设定为定为radio：具有相同具有相同name属性的单选钮，被
18、归纳为同一个选项属性的单选钮，被归纳为同一个选项群组，因此只能选择其中某一个选项，若群组，因此只能选择其中某一个选项，若name属性属性不同则为各自独立的选择群组，不同则为各自独立的选择群组， 一一个个以上的以上的单选按钮单选按钮組合，組合，提供用户在网页提供用户在网页上上选择选择所需的特所需的特定定选项选项。 32单选按钮属性单选按钮属性属属 性性说说 明明 name设定该单选钮的名称设定该单选钮的名称 value设定单选钮返回给设定单选钮返回给JSP程序的值程序的值 checked设定单选钮是否为预设选取设定单选钮是否为预设选取 33复复选框框复复选选框用来复框用来复选选多个多个选项选项
19、，其其INPUTINPUT标签标签的的typetype属性属性设为设为checkboxcheckbox。 input type=checkbox复复选选框通常代表一种布框通常代表一种布尔尔类类型的数据，若是符合其提示型的数据，若是符合其提示说说明明则选择则选择 。一一组组复复选选框并不会特框并不会特别别限定只允限定只允许选择许选择其中一个其中一个选项选项 。34复选框属性复选框属性属属 性性说说 明明name设定复选框的名称设定复选框的名称 value设定复选框返回给设定复选框返回给JSP程序的值程序的值 checked设定复选框是否为预设选取，若值为设定复选框是否为预设选取，若值为true则
20、表示默认选取则表示默认选取 35下拉列表框下拉列表框 下拉列表框的主体由下拉列表框的主体由、标签所组成，而其内容选项标签所组成，而其内容选项则是使用则是使用标签来设定标签来设定 。 选项选项1 选项选项236下拉列表框属性下拉列表框属性 属属 性性说说 明明name设定下拉列表框的名称设定下拉列表框的名称size设定下拉列表框显示的项目个数设定下拉列表框显示的项目个数 multiple设定下拉列表框内的数据是否能够复选设定下拉列表框内的数据是否能够复选 属属 性性说说 明明value设定数据选项所返回给设定数据选项所返回给JSP的值的值 selected设定数据选项为默认选取。设定数据选项为默
21、认选取。37提交按提交按钮与重置按与重置按钮发送按钮发送按钮：当用户单击按钮后当用户单击按钮后可可将数据传送将数据传送給給程序程序处理处理。重设按钮重设按钮：将输入与选择将输入与选择的的数据数据清除。清除。属性属性value用用来设定按钮来设定按钮上的上的显示显示文字。文字。特效和多媒体特效和多媒体处理理 实现滚动效果实现滚动效果实现滚动效果的语法格式如下所示。实现滚动效果的语法格式如下所示。滚动内容滚动内容特效和多媒体特效和多媒体处理理 设置背景音乐设置背景音乐1代码指定方式代码指定方式现实中通常使用标记现实中通常使用标记来实现，使用此来实现，使用此标记的语法格式如下所示。标记的语法格式如下
22、所示。402使用媒体插件使用媒体插件在现实中通常使用标记在现实中通常使用标记来实现，使来实现，使用此标记的语法格式如下所示。用此标记的语法格式如下所示。常用属性：常用属性：Autostart:取取true或或false，是否自动播放，是否自动播放Loop: 取正整数，重复播放次数取正整数，重复播放次数Width、Height:取正整数，播放器的宽高。取正整数，播放器的宽高。特效和多媒体特效和多媒体处理理插入插入Flash在页面中可以通过在页面中可以通过标记插入标记插入Flash，使用此，使用此标记的语法格式如下所示。标记的语法格式如下所示。 特效和多媒体特效和多媒体处理理使用使用ActiveX
23、 控件控件通过通过标记可以在页面中插入标记可以在页面中插入ActiveX控件，使用此标记的语法格式如下控件，使用此标记的语法格式如下所示。所示。43HTML小结：小结：所有的元素不区分大小写，但属性值大小写敏感所有的元素不区分大小写，但属性值大小写敏感所有的标记都必须完结所有的标记都必须完结HTML元素的各属性的取值必须使用元素的各属性的取值必须使用”括起来，属性间括起来，属性间空格隔开空格隔开利用开发工具编写使用的属性时更方便利用开发工具编写使用的属性时更方便表单元素必须掌握表单元素必须掌握网上的学习资料：网上的学习资料：http:/ 引言引言2.1 HTML网页文档结构网页文档结构2.2
24、常用常用HTML标签标签2.3 CSS（Cascading Style Sheet）2.3 CSS2.3 CSS（Cascading Style SheetCascading Style Sheet） lCSSCSS基础基础 我们看到的我们看到的HTMLHTML文件也是由内容和格式组成，那么就文件也是由内容和格式组成，那么就需要一种能够设定统一规则的样式表，需要一种能够设定统一规则的样式表，CSSCSS就是来完就是来完成这个功能的，成这个功能的，CSSCSS为为Cascading Style SheetsCascading Style Sheets的简的简写，即写，即层叠样式表层叠样式表。 层
25、叠的意思就是层叠的意思就是CSSCSS通常被译作层叠样式表单，是用通常被译作层叠样式表单，是用于增强控制网页样式并允许将信息与网页内容分离的于增强控制网页样式并允许将信息与网页内容分离的一种标记性语言。一种标记性语言。CSSCSS提供比提供比HTMLHTML标签属性更多的特标签属性更多的特性让用户设置，应用起来也相对灵活。性让用户设置，应用起来也相对灵活。 CSS的特点的特点作为一种网页样式显示技术，作为一种网页样式显示技术，CSS主要具有如下几个特点。主要具有如下几个特点。CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执语言是一种标记语言，它不需要编译，可以直接由浏览器执行。行。在
26、标准网页设计中在标准网页设计中CSS负责网页内容的表现。负责网页内容的表现。CSS文件也可以说是一个文本文件，它包含了一些文件也可以说是一个文本文件，它包含了一些CSS标记，标记，CSS文件必须使用文件必须使用css为文件名后缀。为文件名后缀。可以通过简单的更改可以通过简单的更改CSS文件，改变网页的整体表现形式，可以文件，改变网页的整体表现形式，可以减少我们的工作量，所以她是每一个网页设计人员的必修课。减少我们的工作量，所以她是每一个网页设计人员的必修课。CSS是由是由W3C的的CSS工作组产生和维护的。工作组产生和维护的。 CSS的意义的意义CSS引入网页制作领域后主要具有如下意义：引入网
27、页制作领域后主要具有如下意义：实现了内容与表现分离：使网页的内容与表现完全分开。实现了内容与表现分离：使网页的内容与表现完全分开。表现的统一：可以使网页的表现非常统一，并且容易修表现的统一：可以使网页的表现非常统一，并且容易修改。改。CSS可以支持多种设备，比如手机，可以支持多种设备，比如手机，PDA，打印机，电，打印机，电视机，游戏机等。视机，游戏机等。使用使用CSS可以减少网页的代码量，增加网页的浏览速度，可以减少网页的代码量，增加网页的浏览速度，减少硬盘的占用空间。减少硬盘的占用空间。lCSS的技术方面的优势有下面几个：的技术方面的优势有下面几个：样式重用样式重用 编写好的样式（编写好的
28、样式（CSS）文档，可以被用于多个）文档，可以被用于多个HTML文档，文档，样式就达到了重用的目的，节省了编写代码的时间，统一样式就达到了重用的目的，节省了编写代码的时间，统一了多个了多个HTML文档的样式。文档的样式。轻松的增加网页的特殊效果轻松的增加网页的特殊效果 使用使用CSS标记，可以非常简单对图片、文本信息进行修饰，标记，可以非常简单对图片、文本信息进行修饰，设置相关属性。设置相关属性。使元素更加准确定位使元素更加准确定位 使显示的信息按设计人员的意愿出现在指定的位置。使显示的信息按设计人员的意愿出现在指定的位置。2.3.2 创建建样式表式表通过通过CSS样式，网页设计者摆脱了原来的
29、样式，网页设计者摆脱了原来的HTML语法的限制，可以进一步将各种语法的限制，可以进一步将各种HTML标记做更精确的定义。但是并不是所标记做更精确的定义。但是并不是所有的浏览器都支持有的浏览器都支持CSS样式表，因此，为了样式表，因此，为了预防浏览器不支持预防浏览器不支持CSS而出现的问题，而出现的问题，最好最好将使用将使用注释标记隐藏注释标记隐藏CSS样式样式。使用使用CSS的基本语法构如下所示。的基本语法构如下所示。在使用在使用CSS时应该遵循如下时应该遵循如下3个原则。个原则。当有多个属性时，属性之间必须用当有多个属性时，属性之间必须用“; ”隔开。隔开。设置的属性必须被包含在设置的属性必
30、须被包含在“”中。中。如果一个属性有多个值，必须用空格将它们隔开。如果一个属性有多个值，必须用空格将它们隔开。样式表的基础就是组成它的样式表的基础就是组成它的CSSCSS规则，每一条规则规则，每一条规则都是单独的语句。都是单独的语句。CSSCSS规则由两部分组成：选择符规则由两部分组成：选择符（selectorselector）和声明。声明由属性（）和声明。声明由属性（propoertypropoerty）和属性的值组成。和属性的值组成。语法格式为：语法格式为：选择符选择符 属性属性: :值值; ; 选择符选择符用来指定针对哪一个用来指定针对哪一个HTMLHTML标签应用样式表的部标签应用样式
31、表的部分，任何分，任何HTMLHTML元素都可以是一个元素都可以是一个CSSCSS的选择符。的选择符。例如例如，P color: redP color: red; ; u类选择符类选择符用类选择符能够把相同的用类选择符能够把相同的HTML标记分类定义不同的样式。定标记分类定义不同的样式。定义类选择符时，在自定义类的名称前加一个点号义类选择符时，在自定义类的名称前加一个点号“.”。uID选择符选择符在页面中，元素的在页面中，元素的ID属性指定了某个惟一元素的标识，同样属性指定了某个惟一元素的标识，同样ID选择符可以用来对某个特定元素定义独特的样式。选择符可以用来对某个特定元素定义独特的样式。ID
32、选择选择符的应用和类选择符类似，只要把符的应用和类选择符类似，只要把CLASS换成换成ID即可。即可。u包含选择符包含选择符当元素当元素1中包含子元素中包含子元素2时，可以针对子元素时，可以针对子元素2定义包含选择符。定义包含选择符。5354声明声明声明是包含在大括号中的内容，首先给出属性名，可以包声明是包含在大括号中的内容，首先给出属性名，可以包括颜色、边界和字体等，然后是属性值，来给一个属性能括颜色、边界和字体等，然后是属性值，来给一个属性能够接受的值，加上分号之后可以指定多个样式。例如：够接受的值，加上分号之后可以指定多个样式。例如：H1 H1 font-size: 24pt; colo
33、r: green font-size: 24pt; color: green 组合规则组合规则用户通过大括号内列出声明，有时候对于同一个选择符列用户通过大括号内列出声明，有时候对于同一个选择符列出了几个规则，这时候规则是可以合并起来写的，同时很出了几个规则，这时候规则是可以合并起来写的，同时很多不同的选择符却具有重复的样式表声明，为了减少样式多不同的选择符却具有重复的样式表声明，为了减少样式表的重复声明，组合的选择符声明是允许的。例如表的重复声明，组合的选择符声明是允许的。例如：H1, H1, H2, H3, H4, H5, H6 color: red;font-family: sans-H2
34、, H3, H4, H5, H6 color: red;font-family: sans-serif serif 继承继承所有在选择符中嵌套的选择符都会继承外层选择符指定的所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个属性值，除非另外更改。例如，一个BODYBODY定义了的定义了的颜色颜色值值也会应用到段落的文本中。也会应用到段落的文本中。注释注释 注释是用户嵌入注释是用户嵌入CSSCSS代码中的专用位，浏览器会忽略掉注释。代码中的专用位，浏览器会忽略掉注释。样式表里面的注解使用样式表里面的注解使用C C语言编程中一样的约定方法去指定。语言编程中一样的约定
35、方法去指定。CSSCSS的注释以字符的注释以字符/*/*开始以开始以* */ /结束，两者之间的内容浏览器结束，两者之间的内容浏览器都会忽略掉。都会忽略掉。2.3.3 添加添加样式表的方法式表的方法开发人员可以用任何一种文本编辑工具来编写样式开发人员可以用任何一种文本编辑工具来编写样式表表CSS，比如，比如Windows下的记事本和写字板。另外，下的记事本和写字板。另外，也可以使用一些专门的也可以使用一些专门的HTML文本编辑工具（如文本编辑工具（如Frontpage、Ultraedit等），来编辑等），来编辑CSS文档。文档。在在CSS中可以使用四种不同的方法，将样式表的功中可以使用四种不同
36、的方法，将样式表的功能加到网页中。方法包括：直接定义元素的能加到网页中。方法包括：直接定义元素的STYLE属性、定义内部样式表、嵌入外部样式表和连接外属性、定义内部样式表、嵌入外部样式表和连接外部样式表。上述四种方法将样式表分为内部样式表部样式表。上述四种方法将样式表分为内部样式表和外部样式表。和外部样式表。l添加添加CSSCSS样式表的方法样式表的方法行内样式表行内样式表行内样式表是最简单的一种使用方式，由标签行内样式表是最简单的一种使用方式，由标签stylestyle属性支持，属性支持，csscss规则直接写在标签内，如：规则直接写在标签内，如：p style= 不过，使用这种方法定义样式
37、表时，只可以控制该元素。不过，使用这种方法定义样式表时，只可以控制该元素。l添加添加CSSCSS样式表的方法样式表的方法嵌入样式表（内部样式表）嵌入样式表（内部样式表）嵌入式样式表是一个样式集，它是网页代码的一部分，在带嵌入式样式表是一个样式集，它是网页代码的一部分，在带有有标签的标签的HTMLHTML文件内直接嵌入文件内直接嵌入CSSCSS，它与行间样式表，它与行间样式表有相似的地方，但是又不同，行间样式表的作用域只有一行，有相似的地方，但是又不同，行间样式表的作用域只有一行，而嵌入式样式表可以作用在整个文档中。而嵌入式样式表可以作用在整个文档中。嵌入嵌入样式表是把样式表放到页面的样式表是把
38、样式表放到页面的部，这些定义的样部，这些定义的样式应用到某个具体的页面中，样式表用式应用到某个具体的页面中，样式表用元素添加。元素添加。l链接样式表链接样式表 链接样式表也是外部样式表，它首先定义个扩展名为链接样式表也是外部样式表，它首先定义个扩展名为.css.css的文的文件，该文件包含所有需要用到的件，该文件包含所有需要用到的CSSCSS规则，不包含任何规则，不包含任何HTMLHTML代码，代码，比如比如blue.cssblue.css。创建样式表文件后，需要将其与要进行格式设。创建样式表文件后，需要将其与要进行格式设置的置的HTMLHTML文件进行关联，这种添加样式表的方式是通过文件进行
39、关联，这种添加样式表的方式是通过HTMLHTML中中标签来实现的，标签来实现的， LinkLink标签只在标签只在HTMLHTML页面的页面的部分出部分出现。链接样式表的方法就是在现。链接样式表的方法就是在HTMLHTML文件的文件的部分添加如下部分添加如下所示代码：所示代码： linelink rel=stylesheet line= screen, projection /l输入样式表输入样式表 嵌入样式表简单地说，就是当浏览器在读取嵌入样式表简单地说，就是当浏览器在读取HTML文件时，文件时，将以嵌入的方式复制一份样式表到这个将以嵌入的方式复制一份样式表到这个HTML文件中。创文件中。创
40、建建CSS文件的方法非常简单，只需要将文件的方法非常简单，只需要将元素中定元素中定义样式的代码放在一个记事本文件内，并在保存文件时义样式的代码放在一个记事本文件内，并在保存文件时将扩展名名改为将扩展名名改为.css即可。即可。输入外部样式表方法同链接的方法类似，不同之处在于输入外部样式表方法同链接的方法类似，不同之处在于链接法不能同其他方法结合使用，但输入法则可以。链接法不能同其他方法结合使用，但输入法则可以。l注意，使用注意，使用”importimport”导入外部的样式表文件时，需要在导入外部的样式表文件时，需要在标签内，如：标签内，如：style type= !- My First St
41、ylesheet My First StylesheetStylesheet:The Tool of the Web Design GodsStylesheet:The Tool of the Web Design GodsAmaze your friends!Squash your enemies!Amaze your friends!Squash your enemies!u 样式表的层叠性样式表的层叠性样式表的层叠性是指样式表的继承，样式表的继承规则是外样式表的层叠性是指样式表的继承，样式表的继承规则是外部元素的样式会保留下来部元素的样式会保留下来，继承影响该元素内所包含的其他，继承影响
42、该元素内所包含的其他元素。事实上，所有在页面中嵌套的元素都会继承外层父元元素。事实上，所有在页面中嵌套的元素都会继承外层父元素指定的属性值，有时还会把很多层嵌套的样式进行叠加，素指定的属性值，有时还会把很多层嵌套的样式进行叠加，除非另外更改。除非另外更改。 最后需要注意样式的最后需要注意样式的调用顺序调用顺序：如果在同一个选择器上使用：如果在同一个选择器上使用多个样式表，样式表将进行叠加处理；即如果样式表定义的多个样式表，样式表将进行叠加处理；即如果样式表定义的样式不冲突，则最终的样式由这些样式共同决定；如果遇到样式不冲突，则最终的样式由这些样式共同决定；如果遇到冲突的地方会以依照样式表的优先
43、级顺序调用。冲突的地方会以依照样式表的优先级顺序调用。样式表的样式表的优先级优先级从高到低度为：直接定义元素的从高到低度为：直接定义元素的STYLE属性属性内部样式表内部样式表嵌入外部样式表嵌入外部样式表连接的外部样式表。连接的外部样式表。常用常用样式属性式属性从从CSS的基本语法就可以看出，属性是的基本语法就可以看出，属性是CSS非常重要非常重要的部分。掌握了的部分。掌握了CSS的各种属性是编辑页面样式表的的各种属性是编辑页面样式表的前提条件，因此下面将介绍一些重要前提条件，因此下面将介绍一些重要CSS属性。属性。u 字体属性字体属性u 颜色及背景属性颜色及背景属性u 排版属性排版属性u“容
44、器容器”属性属性u 定位属性定位属性65666768697071CSS单位位7273颜色色值74CSS 颜色色可以用以下方法来规定可以用以下方法来规定 CSS 中的颜色：中的颜色：十六进制色十六进制色RGB 颜色颜色RGBA 颜色颜色HSL 颜色颜色HSLA 颜色颜色预定义预定义/跨浏览器颜色名跨浏览器颜色名75十六进制颜色十六进制颜色所有浏览器都支持十六进制颜色值。所有浏览器都支持十六进制颜色值。十六进制颜色是这样规定的：十六进制颜色是这样规定的：#RRGGBB，其中的，其中的 RR（红色）、（红色）、GG（绿色）、（绿色）、BB（蓝色）十六进制（蓝色）十六进制整数规定了颜色的成分。所有值必
45、须介于整数规定了颜色的成分。所有值必须介于 0 与与 FF 之间。之间。举例说，举例说，#0000ff 值显示为蓝色，这是因为蓝色成分值显示为蓝色，这是因为蓝色成分被设置为最高值（被设置为最高值（ff），而其他成分被设置为），而其他成分被设置为 0。76RGB 颜色颜色所有浏览器都支持所有浏览器都支持 RGB 颜色值。颜色值。RGB 颜色值是这样规定的：颜色值是这样规定的：rgb(red, green, blue)。每个参数每个参数 (red、green 以及以及 blue) 定义颜色的强度，定义颜色的强度，可以是介于可以是介于 0 与与 255 之间的整数，或者是百分比值（之间的整数，或者是
46、百分比值（从从 0% 到到 100%）。）。举例说，举例说，rgb(0,0,255) 值显示为蓝色，这是因为值显示为蓝色，这是因为 blue 参数被设置为最高值（参数被设置为最高值（255），而其他被设置为），而其他被设置为 0。同样地，下面的值定义了相同的颜色：同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和和 rgb(0%,0%,100%)。77RGBA 颜色颜色RGBA 颜色值得到以下浏览器的支持：颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及以及 Opera 10+。RGBA 颜色值是颜色值是 RGB 颜色值的扩展，带有一个颜
47、色值的扩展，带有一个 alpha 通道通道 - 它规定了对象的不透明度。它规定了对象的不透明度。RGBA 颜色值是这样规定的：颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于参数是介于 0.0（完全透明）（完全透明）与与 1.0（完全不透明）的数字。（完全不透明）的数字。78CSS 颜色名色名所有浏览器都支持的颜色名。所有浏览器都支持的颜色名。HTML 和和 CSS 颜色规范中定义了颜色规范中定义了 147 中颜色名中颜色名（17 种标准颜色加种标准颜色加 130 种其他颜色）。下面的表种其他颜色）。下面的表格中列出了所有这些颜色，以及它们
48、的十六进制值。格中列出了所有这些颜色，以及它们的十六进制值。提示：提示：17 种标准色是种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。7980本章小本章小结本章简单介绍了本章简单介绍了HTML网页文档结构以及常用的网页文档结构以及常用的HTML标签。标签。通过本章的学习，应能读懂、编写常见的通过本章的学习，应能读懂、编写常见的HTML网网页和代码。页和代码。详细的详细的HTML知识和其他内容，可访问：知识和其他内容，可访问：http:/ 。81课后后习题(1).用用HTML编写个人简历页面。页面以表格形式体编写个人简历页面。页面以表格形式体现，信息内容包括个人基础信息、近期照片、学习现，信息内容包括个人基础信息、近期照片、学习经历以及兴趣爱好特长等。经历以及兴趣爱好特长等。
