CSS网页设计标准教程第1章 X_HTML与CSS概述.ppt

CSS网页设计标准教程 第1部分 CSS核心原理 第 1 章 (X)?HTML与CSS概述 制作网页的基础是使用HTML（Hyper Text Markup Language），其核心思想是需 要设置什么样式，就使用相应的HTML标记或 者属性。 然而仅仅依靠HTML会遇到很多不可解决 的问题，为此，HTML逐步地发展到了XHTML， 与此同时，CSS也应运而生。 本章简单介绍HTML、XHTML和CSS三者之 间的关系，以及CSS的基础；重点理解使用 CSS的核心原理。 1.1 网页的基础概念 1.2 Web标准 网页相关的技术走入实用阶段仅短短十几年的时间，就发生了很多重要的变化。 其中最重要的一点是“Web标准”这一理念被广泛地接受。 1.2.1 标准的重要性 1.2.2 “Web标准”概述 下面介绍关于网页的标准——“Web标准”。 网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。 由于传统的图书是固定的，不能变化的，因此它不存在“行为”。 在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。 网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。 因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即?(X)?HTML、CSS和JavaScript。 也就是说，(X)?HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。 本书将重点介绍前两者，对于JavaScript仅在少数案例中用到，进行一些简单介绍。 “结构”、“表现”和“行为”的关系，如图1.3所示。 1.3 HTML与XHTML 1.3.1 追根溯源 1.3.2 文档类型的含义与选择 1.3.3 XHTML与HTML的重要区别 1．在XHTML中标记名称必须小写 p这是一个文字段落/p /body 2．在XHTML中属性名称必须小写 img src=image.gif width=200 height=100 border=0/ 3．在XHTML中标记必须严格嵌套 ib这行文字以粗体倾斜显示/b/i 4．在XHTML中标记必须封闭 p text line 1/p p text line 2/p 5．在XHTML中即使是空元素的标记也必须封闭 1.4 (X)?HTML与CSS 1.4.1 CSS标准 1.4.2 传统HTML的缺点 1.4.3 CSS的引入 1.4.4 如何编辑CSS 1.4.5 浏览器与CSS * * 网页的基础概念 1.1 Web标准 1.2 HTML与XHTML 1.3 （X）HTML与CSS 1.4 图1.1 使用浏览器软件显示网页 图1.3 “结构”、“表现”和“行为”的关系 图1.4 仅使用HTML定“结构”的页面效果 图1.5 使用CSS设定样式之后的效果 *