网页设计与开发.ppt

网页设计与开发,吕智强 ,网页和网站,网站是有独立域名、独立存放空间的内容集合（即对外发布），这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。 网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页。例如一个程序，尽管有很多页面，功能也齐全，但没有独立域名和空间，没对外发布，但都不能叫网站。,一、概述,网页表现形式,静态网页,通常是以.htm、.html、.shtml等为后缀的，它的特点是不会“变” 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难 静态网页的交互性较差，功能简单，无法实现更多的功能,网页表现形式,动态网页,通常是以.php、.aspx、.jsp等为后缀的，它的特点是会“变” 以数据库技术为基础，大大降低网站维护的工作量 可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;,什么是万维网,万维网的核心部分由统一资源定位器（URL）、超文本传输协议（HTTP）以及超文本标记语言（HTML）三个标准构成。 1统一资源定位器 统一资源定位器，又叫URL（Uniform Resource Locator）。是专为标识Internet网上资源位置而设的一种编址方式，通常所说的网页地址指的即是URL。 2超文本传输协议 HTTP是超文本转移协议，是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。 3超文本标记语言 HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。,工作原理,当进入万维网上一个网页，或者其他网络资源的时候，通常你要首先在浏览器上键入想访问网页的统一资源定位器（URL），或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。 接下来的步骤是为所要访问的网页，向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。 网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了浏览器中所看到的“网页”。,开发工具的选择,HTML的编辑工具是比较多的，读者既可以选择最常用的基于文本的HTML编辑器（Windows自带的记事本），也可以选择一套功能强大，可取代记事本编辑器的EditPlus，还可以选择所见即所得的Dreamweaver等。,网页制作的相关技术,1HTML HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 通过定义标记标签使浏览器解析页面并进行显示。一个HTML文件的后缀名是htm或者是html。 2CSS CSS意思就是叠层样式表（Cascading Style Sheets），使用CSS的优点在于将格式从功能中分离出来。它定义了HTML元素的显示，是一种对web文档添加样式的简单机制。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。,网页制作的相关技术,3JavaScript JavaScript是由 Netscape公司开发的一种脚本语言（script language），称为描述性语言， 具有面向对象的能力，可以非常自由地嵌入到HTML/XHTML 文件中，从而更便捷地开发出可交互的Web网页。 JavaScript是目前最为流行的客户端脚本语言，大大地增强了网页的交互性。JavaScript语法构成与C、C+、Java类似，都包括if语句、while循环、分支选择以及运算等结构，但也仅是在语法上的相似。,网页元素单位,相对长度单位 px：像素是相对于显示器屏幕分辨率而言 em：相对于当前对象内文本的字体尺寸 绝对长度单位 cm：厘米 mm：毫米 in：英寸,HTML文档结构,HTML（Hyper Text Markup Language）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。一个HTML4.01的文档结构包括以下几部分： DOCTYPE声明定义文档类型。 HTML头元素信息。 HTML正文信息（body标签内信息）。,二、初识HTML,声明定义文档类型,在HTML4.01中提供了三种DTD文档： 严格型HTML4.01DTD文档不包括那些不被推荐的元素和属性，并且不能在带有frameset的页面中出现。 过渡型HTML4.01DTD文档包含所有严密型DTD文档中所允许的内容，还可以使用那些不被推荐的元素以及属性。 框架型HTML4.01 DTD文档包含过渡型以及框架。 ,HTML头元素信息,HTML文档的head元素中包含了meta元素，meta元素用来指定有关这个文档的相关信息。 例如： 用httpequiv、content、charset描述页面的内容。 meta元素的属性有两种：http-equiv和name 。,什么是标签大多数HTML文档的标签都是由开始标签和结束标签进行界定（开始标签和结束标签成对出现），结束标签是以斜线开头（/），例如中为结束标签。每一个标签都是由尖括号（）包围。 有单向标签和双向标签 单向标签：br、hr、img等,三、标签,标签的属性,标签可以拥有属性，属性可以为页面中的HTML元素提供附加信息。属性被放置在标签的后面，但在最终括号（）的前面，即属性应该添加在HTML元素里的起始标签中。 例如：,标签的嵌套,HTML标签经常使用嵌套的方式，所谓的嵌套是指一个HTML标签包含另外一个标签的情况。 例如： 标题 显示的内容 ,HTML基本标签,HTML基本标签包括:标题标签h1、段落标签p、换行标签br、水平分割标签hr、部分标签div、注释标签、字体标签font。 部分标签最早在HTML3.2标准中定义，可以将文档分割成独立的、不同的部分。在标签中定义的文本内容，实际上与没有在标签中定义的没有什么区别，但要是引入了align属性，标签就变的十分有用了（用来设置段落或标题的对齐方式）。 和其他编程语言一样，HTML也提供了代码注释的方式（，作为一个程序员应该养成对代码注释的习惯，这样可以保持清晰的思路。浏览器不显示注释的部分。,文字格式化,常见的文字格式化标签如下表。,字体设置,在HTML中，字体标签（font）通过其属性来设置文本字体、字体大小和字体颜色。字体标签的属性如下表。,color,color,color,color,无序列表,所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。 当创建一个无序列表时，主要使用用HTML的标签和标签来标记。其中标签标识一个无序列表的开始；标签标识一个无序列表项。 基本语法结构为： 项目名称 项目名称 项目名称 项目名称 ,四、列表,有序列表,有序列表与前面介绍的无序列表正好相反，所谓有序列表就是列表项的前导符号是有序的符号标识的列表。有序的符号标识包括：阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。 基本语法结构为： 项目名称 项目名称 项目名称 标签的type属性用来定义一个有序列表的前导字符，如果省略了type属性，浏览器会默认显示为“1”前导字符。 type取值为 1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字）,图片的使用,HTML和XHTML的一个重要特性就是可以在文本中加入图片，既可以把图片作为文档的内在对象加入，又可以通过超级链接的方式加入，同时还可以将图片作为背景加入到文档中。在文档中合理地使用图片会使浏览器显示的网页更活泼、引人入胜。,五、图片,在页面中插入图片,在HTML中，用标签在网页中添加图片。图片是以嵌入的方式添加到网页中的。网页开发者可以通过多种方式获取网页设计中用到的图片，可以将现有的图片扫描到计算机内、从Internet上的Web站点获取以及通过制图软件自己动手制作。如果是“引用”的图片，一定要得到图片版权拥有者的同意才可使用。 在页面中插入图片的语法： ,替换文本说明,有时，由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键，用户不能在浏览器中看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息 。 例如： ,调整图片大小,在HTML中，通过img标签的属性width和height来调整图片大小，其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置width和height属性，浏览器就要等到图片下载完毕才显示网页，因此延缓了其它页面元素的显示。 例如：,设置背景图片,背景属性将背景设置为图片。属性值为图片的URL。如果图片尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。 例如： ,添加背景颜色,使用body标签的bgcolor属性可以给HTML页面指明背景颜色。其值可以是16进制数、RGB值或者是颜色的名称。 例如： ,HTML使用标签来建立一个链接，通常标签又称为锚。一个超级链接可以指向任意一个Web上的资源（一个HTML页面，一张图片，一段声音文件，一部电影等）。 创建超级链接的基本语法格式： 这是要链接的站点(文字、图片) 在和标签之间的文本文字，用户可以单击该文字来实现网页的浏览访问。,六、超级链接,同一页面内的书签链接,当网页的页面较长，且该页面是由几个部分组成时，不得不拖动浏览器的滑动条查看信息，这样既麻烦又费时。HTML恰好提供了跳转功能，能够非常方便、快捷地实现从网页当前的部分跳转到同一网页的另一部分。 建立书签语法： 链接内容 创建书签链接语法： 链接标题,不同页面间的书签链接,书签链接还可以在不同页面间进行链接。当单击书签链接标题，页面会根据链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。 建立书签语法： 链接内容 创建书签链接语法： 链接标题,超级链接路径,超级链接标签的属性“href”定义了当前链接所指的目标地址，也就是超级链接路径。在HTML中，主要提供了2种路径：绝对路径和相对路径。,绝对路径,绝对路径就是主页上的文件或目录在硬盘上真正的路径（URL和物理路径）。例如，C:xyzindex.html代表了index.html文件的物理绝对路径；,相对路径,相对路径就是相对与某个基准目录的路径。相对路径适合于创建网站内部链接。它是以当前文件所在的路径为起点，进行相对文件的查找。 1同一级目录的文件链接 假设1.html路径是：c:Inetpubwwwrootsites admin1.html 假设2.html路径是：c:Inetpubwwwrootsites admin2.html 1.html文件和2.html文件在同一个文件夹， 1.html文件链接到2.html文件，可以在1.html中写成：同级目录文件链接 2上级目录的文件链接 假设1.html路径是：c:Inetpubwwwrootsites 1.html 假设2.html路径是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上一级目录的文件，2.html文件链接到1.html文件，可以在2.html中写成：1.html,相对路径,假设1.html路径是：c:Inetpubwwwroot1.html 假设2.html路径是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上两级目录中的文件，2.html文件链接到1.html文件，可以在2.html中写成： 1.html 假设1.html路径是：c:Inetpubwwwrootsitesadmin1.html 假设2.html路径是：c:Inetpubwwwrootsites reg2.html 1.html文件和2.html分别在c:Inetpubwwwrootsites目录下的admin和reg两个文件夹内，1.html文件链接到2.html文件，可以在1.html中写成： 2.html,相对路径,3下级目录的文件链接 假设1.html路径是：c:Inetpubwwwrootsites 1.html 假设2.html路径是：c:Inetpubwwwrootsites admin2.html 2.html文件是1.html文件的下一级目录的文件，1.html文件链接到2.html文件，可以在1.html中写成： 2.html 假设1.html路径是：c:Inetpubwwwrootsites 1.html 假设2.html路径是：c:Inetpubwwwrootsites adminuser2.html 2.html文件是1.html文件的下两级目录的文件，1.html文件链接到2.html文件，可以在1.html中写成： 2.html,七、表格,主要内容： 表格的构成 设置表格背景 设置表格表头 设置表格大小 设置表格数据对齐方式 cellspancing与cellpadding属性 横跨行和列 添加表格高级标签 使用表格进行网页布局,7.1 表格简介,表格在网站开发中应用广泛，几乎多有的HTML页面或多或少地采用了表格。表格可以灵活地控制页面的排版，使整个页面层次清晰。学好网页制作，熟练掌握表格的各种属性是很有必要的。,表格标记,基本标签 : table定义一个表格 tr定义表格中的行 td定义表格中的数据 基本语法： ,表格边框,可以使用table标签的border属性为表格添加边框并设置表格边框宽度，表格的边框按照数据单元将表格分割成单元格，边框的宽度以像素为单位。 可以通过bordercolor属性为边框添加颜色，其颜色值可以是rgb(x,x,x)、16进制颜色值或代表颜色值的颜色名称。,表格表头,表头是指表格的第一行或第一列对该列或该行的表格内容进行说明。表头的文字样式为居中、加粗显示，通过标签实现。 基本语法： ,7.2 表格背景,表格可以添加背景颜色和背景图片，使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差。否则，将不容易分辩表格中的文本数据。,设置表格背景,可以使用bgcolor属性设置表格的背景颜色，其值可以是rgb(x,x,x)、#xxxxxx或颜色名（colorname）。 例如： 或 ,设置表格单元背景,可以通过bgcolor属性和background属性为表格中的单元格添加背景颜色或背景图片。,7.3 表格大小,设置表格大小： 如果需要表格在网页中占用适当的空间，可以通过width和height属性指定像素值来设置表格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小。方法如下： 设置单元格大小： width属性和height属性不但可以设置表格的大小，还可以设置表格单元格的大小，为表格单元设置width属性或height，将影响整行或整列单元的大小。例如： 汽车名称 价格范围 级别 ,7.4 对齐方式,表格的对齐方式包括： 行数据水平对齐 单元格数据水平对齐 行数据垂直对齐 单元格数据垂直对齐 align属性和valign属性混合使用,设置表格对齐方式,使用align属性设置表格在网页中的对齐方式，在默认的情况下表格的对齐方式为左对齐。 设置方法为： 这里 align的值为left、center、right。将表格的对齐方式设置成右对齐，则表格的右边框自动地向浏览器右边框对齐。,设置表格数据对齐方式,1行数据水平对齐 使用align可以设置表格中数据的水平对齐方式，如果在标签中使用align属性，将影响整行数据单元的水平对齐方式。align属性的值可以是left、center、right，它的默认值为left。 2单元格数据水平对齐 如果在某个标签中使用align属性，那么align属性将影响一个表格单元数据水平对齐方式。 3行数据垂直对齐 如果在标签中使用valign属性，那么valign属性将影响整行数据单元的垂直对齐方式，这里的valign值可以是top、middle、bottom、baseline。它的默认值是middle。,设置表格数据对齐方式,4单元格数据垂直对齐 如果在某个标签中使用valign属性，那么valign只影响当前表格单元数据垂直对齐方式。 5align属性和valign属性混合使用 align属性和valign属性除了上述用法外，有时在格式化表格单元数据时需要align属性和valign属性混合使用。,7.5 表格单元格的边距,改变表格单元格间距离和单元格内的数据填充距离可以通过table标签的cellspancing与cellpadding属性实现。 cellspancing属性用来添加表格单元格之间的间距（以像素为单位或表格宽度百分比）。 cellpadding属性用来添加表格单元格内数据填充间距（以像素为单位或表格宽度百分比）。,7.6 横跨行和列,横跨列是指一个表格单元格横跨多列；横跨行是指一个表格单元格横跨多个行。表格横跨行和列属性，有时横跨行和列又称为合并单元格。 表格横跨行和列属性： colspan=“”指明该单元格应有多少列的跨度，在th和td标签中使用。 rowspan=“”指明该单元格应有多少行的跨度，在th和td标签中使用。,7.7 表格的高级标签,使用表格的高级标签可以为表格中相似的区域添加边界，在表格标题上添加行或文本格式信息，定义表格的脚标等。 表格的高级标签如下： thead定义表格的标题区域。 tbody定义表格的主题区域。 tfoot定义表格的脚标区域。 colgroup定义表格的列组。 col为表格中的一个或多个列定义属性值。只能在表格或colgroup里使用这个元素。,7.8 使用表格进行网页布局,使用个非HTML时一常普遍的应用就是用HTML表格功能给网页进行布局。下图就是利用HTML表格对网页进行布局的效果，此布局定义了两个表格，上下各一个表格，将这两个表格的border值设置为0。如果将border值设置为1，则很容易看出此页面的表格布局。,八、表单,主要内容： 创建单行文本框 创建口令文本框 创建提交与复位按钮 创建单选按钮与复选按钮 创建多行文本框 创建下拉框 上传文件 处理表单 定义域集合 使用Tab键与快捷键,8.1 单行文本框,一个表单是一块可以含有表单元素的区域，可以使用标签在网页中创建表单。 例如： ,8.2 口令文本框,在进行网上注册的时候，用户使用的是提交用户名和口令的表单。口令文本框隐藏了当前要填写的内容，使信息更加保密。 例如： ,8.3 提交与复位按钮,使用提交按钮（submit）可以将填写在文本框中的内容发送到服务器，复位按钮（Reset）使表单文本框的内容返回初始值。 例如： ,8.4 单选按钮与复选框按钮,单选按钮允许用户从选择列表中选择一个单项的输入字段类型。当type=“radio”是表示该输入是一个单选按钮。 复选按钮允许用户从选择列表中选择一个或多个选项的输入字段类型。当type=“checkbox ”是表示该输入是一个复选按钮。,8.5 多行文本框,多行文本框是在表单中应用比较广泛的文本输入区域。多行文本框主要用于得到用户的评论和一些反馈信息，用户可以在里面书写文字，字数没有限制。默认的字体是固定的。可以通过标签创建多行文本。 textarea标签的属性： Cols指定文本区域的列数。 Row指定文本区域的行数。 Disabled第一次加载的时候文字区域不可用。 Readonly将文本区域的内容设置为不可修改（可选属性）。 Name：指定文本区域的名称（可选属性）。,8.6 下拉框,如果一个列表选项过长，可以考虑使用下拉框。下拉框可以使用户选择其中的一个选项，在选择列表中仅有一个是可选项，单击右边下拉按钮便可进行选项的选择。下拉框通过select标签、option标签来定义。 其属性如下表 。,8.7 处理表单,通常情况下，用户通过submit按钮来提交表单，收集的信息发送到Web服务器上。这一过程通过HTML文档中action属性指定所收集的信息发送到哪里。如何处理信息，可以通过form标签的特殊属性实现。 处理表单的通用语法模式： ,8.8 定义域集合,在设计网页时，如果表单中包含多个控件，可以通过标签将相关主题的控件或标签组合在一起（定义域集合），这样使网页中的表单分布更合理、结构更清晰，从而增加了网页的易读性；同时也有利于tab键在元素之间的移动。 在定义表单的域集合时，往往要用标签为fieldset设置标题，还可以使用align属性设置标题的对齐方式。 用户信息 姓名： 年龄： 性别： 籍贯： ,8.9 使用Tab键与快捷键,1. 使用Tab键 浏览者可以通过使用Tab键在表单的各个组件之间移动。默认情况下，Tab键的移动顺序为顺序移动。可以通过tabindex属性来实现。 例如： 姓名： 年龄： 性别： 籍贯： 2. 快捷键 可以通过accesskey属性给HTML中的元素指定一个快捷方式，指定方法如下： ,九、多媒体,主要内容： 会滚动的文字 音乐 创建视频,9.1 会滚动的文字,滚动文字可以增加文字的动态效果，引起浏览者的注意，丰富页面的内容。,创建滚动文字标签,使文字在网页中动态地滚动好像只是flash的专利，其实则不然，可以通过HTML的同样能够达到文字在网页中移动的效果。但是只适用于Internet Explorer，并不是标准标签，这里并不推荐使用这个扩展标签。 例如： 这是会滚动的文字！,设置滚动文字的属性,滚动文字的属性用来控制文字的移动方向、滚动方式、文字滚动速度以及移动文字的外观等多个属性。常见的属性有direction、scrollamount、align、bgcolor等。 1设置文字滚动的方向 可以通过direction属性来设置文字滚动的方向，该属性有left、right属性值，left为默认属性值，在不设置direction属性时文字的滚动顺序为从右向左移动。 2设置滚动文字速度 与属性用来控制滚动文字的速度。scrollamount属性用来设置滚动过程中文字每次移动的像素数，当scrollamount取值较小时，文字滚动的较慢；反之文字滚动较快。scrolldelay属性用来设置文字移动的延迟，以毫秒为单位。值越小，文字滚动的越快（文字滚动速度与计算机的处理能力有关）。,设置滚动文字的属性,3设置滚动文字字幕区域 使用height和width属性设置滚动文字字幕区域大小，在默认情况下，滚动文字字幕区域为整个IE浏览器屏幕。这两个属性值可以取绝对的像素数，也可以取相对的百分比。,9.2 背景音乐,为网页添加背景音乐的方法一般有三种，第一种是通过普通的标签来添加，一种是通过标签来添加, 还有一种直接建立声音的链接 。,嵌入背景音乐,1. 标签 Internet Explorer自带了一个内置音频解码器，支持特殊的标签，该标签可以把声音文件集成到文档中，在后台作为背景音乐播放。 基本语法： 2. 标签 embed可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。 基本语法： 3. 建立声音的链接 在设计网页的时候可以创建一个背景音乐的链接，单击网页上的链接后，就会播出背景音乐。当建立声音链接时，提倡使用万维网上的音频格式。建立声音的链接方法如下： 点击播放音乐春风 ,9.3 创建视频,在网页中创建视频与创建音频的方法基本相同，可以通过创建一个视频的链接实现视频在网页中的加载。当浏览者选中视频连接时，浏览器将播放该视频。如果浏览器不能播放该视频格式，则会自动打开本地计算机上已安装支持该格式的视频播放器软件。如果本地计算机上没有安装所需的视频播放软件，则浏览器会提示浏览者是否要保存该视频文件到本地的计算机上。,创建内部视频,1使用标签创建视频 所谓内部视频就是视频文件可以直接在网页中播放。可以通过标签创建内部视频。创建方法如下： 2使用标签创建视频 一些网页设计者利用标签的dynsrc属性在网页内部添加视频文件。dynsrc属性用来指定视频文件所在位置。 例如：,11 CSS语法基础,CSS意思就是叠层样式表（Cascading Style Sheets），使用CSS的优点在于将格式从功能中分离出来。它定义了HTML元素的显示，是一种对web文档添加样式的简单机制。 主要内容： CSS定义 CSS语法 CSS类型 伪类与为元素,11.1 理解CSS,1基本语法 CSS规则由选择器（selector）、属性（property）和值（value）三部分组成。 基本格式如下： selector property : value 2组合 为了提高效率，可以将相同属性和值赋给多个选择器，并用逗号将选择器分开。例如： h1,h2,h3,h4,h5,h6 color: blue ,11.1 理解CSS,3选择器类 选择器类可以将同一类型的HTML元素定义出不同的样式。例如： p.right text-align: right p.center text-align: center 居右显示。 居中显示。 4ID选择器 可以使用id选择器来定义HTML标签的样式。id选择器可用“#”来定义。例如： p# idone text-align: center; color:blue或# idone text-align: center; color:blue,11.1 理解CSS,5关联选择器 可以为嵌入的其它标签定义样式，格式为： h3 em color:blue 指定了嵌套在标签中的标签所包含的内容字体颜色为蓝色。具有这样形式的选择器称为关联选择器（contextual selector），两个标签之间用空格分隔（h3和em之间用空格隔开）。类似的还有： h3 b color:blue h2 em b color:blue,11.2 CSS类型,CSS按其位置不同主要分为以下三种类型： 行内样式表（Inline Style Sheet） 内部样式表（Intenal Style Sheet） 外部样式表（Extenal Style Sheet）,行内样式表,行内样式是定义在HTML标签里，只对所在的标签有效。使用行内样式就失去了样式表的优势，将内容和形式相混淆了，一般这类方法在个别元素需要改变样式时使用。 ,内部样式表,内部样式表是使用标签在head区域内定义样式，内部样式表只对所在的网页有效，缺点是不利于多个网页的维护。 例如： p.parghtext-align:center hr.linecolor:blue 内部样式表 ,外部样式表,外部样式表可以集中控制和管理多个网页的格式和布局，省去了对这些网页的每个标签都要分别进行格式化的麻烦。与内部样式表不同，外部样式表作为单独的文件存储。如果对外部样式表进行修改，结果将影响到引用该样式表的所有网页。 引用方法：,多重样式表,样式表的优先级依次是行内样式表（Inline Style Sheet），内部样式表（Intenal Style Sheet）外部样式表（Extenal Style Sheet），浏览器缺省（Browser Default）。 如果一些属性被相同的选择器设置成不同的样式，值就会被更为具体的样式所继承，也就是按照样式表的优先级进行继承。,11.3 伪类与伪元素,伪类是一种特殊的类选择器，用来指定一个或者与其相关的选择符的状态。 伪类由四部分组成：选择器（selector）、伪类（pseudo-class）、属性（property）、值（value）。其语法结构如下： 选择器:伪类 属性: 值 selector:pseudo-class property: value 此外，CSS类还可以和伪类混合使用。格式如下： 选择器.类:伪类 属性: 值，例如：a.two:link color: #ff0000 selector.class:pseudo-class property: value,11.3 伪类与伪元素,伪元素的语法规则与伪类语法规则类似，伪元素用于为一个选择器添加特殊效果。 其语法结构如下： 选择器:伪元素 属性: 值 selector:pseudo-element property: value 伪元素同样可以与CSS类混合使用，其结构如下： 选择器. 类: 伪元素 属性: 值 selector.class:pseudo-element property: value,