第8章(X)HTML与CSS概述.ppt

1、网页制作综合技术教程网页制作综合技术教程第第3 3部分部分 CSSCSS样式设计样式设计 HTML HTML与与XHTMLXHTML8.18.1(X)HTML(X)HTML与与CSSCSS8.28.2构造构造CSSCSS规则规则8.38.3基本基本CSSCSS选择器选择器8.48.4在在HTMLHTML中使用中使用CSSCSS的方法的方法8.58.5 通过前面的学习，我们已经理解了通过前面的学习，我们已经理解了HTML的核心原理。的核心原理。 实际上使用实际上使用HTML非常简单，其核心思非常简单，其核心思想就是需要设置什么样式，就使用相应的想就是需要设置什么样式，就使用相应的HTML标记或者

2、属性。标记或者属性。 在前文中，初步地分析了由于历史原因在前文中，初步地分析了由于历史原因和和HTML自身的局限性，所带来的一些问题。自身的局限性，所带来的一些问题。 为了解决这些问题，为了解决这些问题，HTML逐步地发展逐步地发展到了到了XHTML，而，而XHTML也更加便于和也更加便于和CSS相配合。相配合。 本章将着重介绍本章将着重介绍HTML、XHTML和和CSS三者之间的关系，重点是理解使用三者之间的关系，重点是理解使用CSS的核的核心目的。心目的。 8.1 HTML8.1 HTML与与XHTMLXHTML 8.1.1 8.1.1 追根溯源追根溯源 从从HTML到到XHTML，大致经

3、历了以下版，大致经历了以下版本。本。 HTML 2.0HTML 2.0：19951995年年1111月发布。月发布。 HTML 3.2HTML 3.2：19961996年年1 1月月1414日发布。日发布。 HTML 7.0HTML 7.0：19971997年年1212月月1818日发布。日发布。 HTML 7.01HTML 7.01（微小改进）：（微小改进）：19991999年年1212月月2424日发布。日发布。 XHTML 1.0XHTML 1.0：20002000年年1 1月发布，后又月发布，后又经过修订于经过修订于20022002年年8 8月月1 1日重新发布。日重新发布。 XHTM

4、L 1.1XHTML 1.1：20012001年年5 5月月3131日发布。日发布。 XHTML 2.0XHTML 2.0：正在制订中。：正在制订中。8.1.2 DOCTYPE8.1.2 DOCTYPE的含义与选择的含义与选择8.1.3 XHTML8.1.3 XHTML与与HTMLHTML的重要区别的重要区别 1 1在在XHTMLXHTML中标记名称必须小写中标记名称必须小写 2 2在在XHTMLXHTML中属性名称必须小写中属性名称必须小写3 3在在XHTMLXHTML中标记必须严格嵌套中标记必须严格嵌套4 4在在XHTMLXHTML中标记必须封闭中标记必须封闭5 5在在XHTMLXHTML

5、中即使是空元素的标中即使是空元素的标记也必须封闭记也必须封闭 6 6在在XHTMLXHTML中属性值用双引号括中属性值用双引号括起来起来7 7在在XHTMLXHTML中属性值必须使用完中属性值必须使用完整形式整形式8.2 (X)HTML8.2 (X)HTML与与CSSCSS8.2.1 CSS8.2.1 CSS标准标准8.2.2 8.2.2 传统传统HTMLHTML的缺点的缺点其实传统其实传统HTML的缺陷远不止上例中所的缺陷远不止上例中所反映的这一个方面，相比反映的这一个方面，相比CSS为基础的页面为基础的页面设计方法，其所体现出的劣势主要有以下几设计方法，其所体现出的劣势主要有以下几点。点。

6、（1 1）维护困难。）维护困难。为了修改某个特殊标记（如上例中的为了修改某个特殊标记（如上例中的标记）的格式，需要花费很多的时间，标记）的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的尤其对于整个网站而言，后期修改和维护的成本很高。成本很高。 （2）标记不足。）标记不足。HTML本身的标记很少，很多标记都是本身的标记很少，很多标记都是为网页内容服务的，而对于美工样式的标为网页内容服务的，而对于美工样式的标记，如文字间距、段落缩进等标记在记，如文字间距、段落缩进等标记在HTML中很难找到。中很难找到。 （3）网页过）网页过“胖胖”。由于没有统一对各种风格样式进行控由于没有统一对

7、各种风格样式进行控制，因此制，因此HTML的页面往往体积过大，占用的页面往往体积过大，占用网络带宽。网络带宽。 （4）定位困难。）定位困难。在整体布局页面时，在整体布局页面时，HTML对于各个模对于各个模块的位置调整显得捉襟见肘，过多的其他标块的位置调整显得捉襟见肘，过多的其他标记同样也导致页面的复杂和后期维护的困难。记同样也导致页面的复杂和后期维护的困难。 8.2.3 CSS8.2.3 CSS的引入的引入8.2.4 8.2.4 如何编辑如何编辑CSSCSS 图图8.4 Dreamweaver的代码模式的代码模式 图图8.5 Dreamweaver语法提示语法提示 图图8.6 调色板调色板8.

8、2.5 8.2.5 浏览器与浏览器与CSSCSS图图8.7 IE浏览器和浏览器和Firefox浏览器的标志浏览器的标志 图图8.8 IE与与Firefox的效果区别的效果区别8.3 8.3 构造构造CSSCSS规则规则在具体使用在具体使用CSS之前，请看一个生活中之前，请看一个生活中的例子，通常我们描述一个人可以为这个人的例子，通常我们描述一个人可以为这个人列一张表：列一张表： 张飞张飞 身高：身高：185cm； 体重：体重：105kg； 性别：男；性别：男； 性格：暴躁；性格：暴躁； 民族：汉族；民族：汉族； 2 2级标题级标题 字体：宋体；字体：宋体； 大小：大小：1515像素；像素； 颜

9、色：红色；颜色：红色； 装饰：下划线装饰：下划线 h2h2 font-family: font-family: 宋体宋体; ; font-size:15px;font-size:15px; color: red;color: red; text-decoration: underline; text-decoration: underline; CSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行设置，然后指定对该对象的哪个方面的进行设置，然后指定对该对象的哪个方面的“属性属性”进行设置，最后给出该设置的进行设置，最后给出该设置的“值值”。因此，概括来说，因此，概括来说，CS

10、S就是由就是由3个基本个基本部分组成的部分组成的“对象对象”、“属性属性”和和“值值”。8.4 8.4 基本基本CSSCSS选择器选择器在在CSS的的3个组成部分中，个组成部分中，“对象对象”是是很很重要的，它指定了对哪些网页元素进行设重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称置，因此，它有一个专门的名称选择器选择器（selector）。）。8.4.1 8.4.1 标记选择器标记选择器图图8.9 CSS标记选择器标记选择器h1 color: red; font-size: 25px; 选择器 属性 值 声明 声明 值 属性 8.4.2 8.4.2 类别选择器类别选择器.c

11、lass color: green; font-size: 20px; 类别选择器 属性 值 属性 值 声明 声明 类别名称 图图8.10 类别选择器类别选择器8.4.3 ID8.4.3 ID选择器选择器#id color: yellow; font-size: 30px; ID 选择器 属性 值 属性 值 声明 声明 图图8.14 ID选择器选择器8.5 8.5 在在HTMLHTML中使用中使用CSSCSS的方法的方法8.5.1 8.5.1 行内式行内式8.5.2 8.5.2 内嵌式内嵌式8.5.3 8.5.3 链接式链接式8.5.4 8.5.4 导入式导入式8.5.5 8.5.5 各种方式的优先级问题各种方式的优先级问题