(X)HTML与CSS概述.ppt

网页制作综合技术教程,第3部分 CSS样式设计,第8章 (X)HTML与CSS概述,通过前面的学习，我们已经理解了 HTML的核心原理。 实际上使用HTML非常简单，其核心思 想就是需要设置什么样式，就使用相应的 HTML标记或者属性。,在前文中，初步地分析了由于历史原因 和HTML自身的局限性，所带来的一些问题。 为了解决这些问题，HTML逐步地发展 到了XHTML，而XHTML也更加便于和CSS 相配合。,本章将着重介绍HTML、XHTML和CSS 三者之间的关系，重点是理解使用CSS的核 心目的。,8.1 HTML与XHTML,8.1.1 追根溯源 从HTML到XHTML，大致经历了以下版 本。, HTML 2.0：1995年11月发布。 HTML 3.2：1996年1月14日发布。 HTML 7.0：1997年12月18日发布。, HTML 7.01（微小改进）：1999年 12月24日发布。 XHTML 1.0：2000年1月发布，后又 经过修订于2002年8月1日重新发布。 XHTML 1.1：2001年5月31日发布。 XHTML 2.0：正在制订中。,8.1.2 DOCTYPE的含义与选择,8.1.3 XHTML与HTML的重要区别,1在XHTML中标记名称必须小写 2在XHTML中属性名称必须小写 3在XHTML中标记必须严格嵌套 4在XHTML中标记必须封闭 5在XHTML中即使是空元素的标 记也必须封闭,6在XHTML中属性值用双引号括 起来 7在XHTML中属性值必须使用完 整形式,8.2 (X)HTML与CSS,8.2.1 CSS标准,8.2.2 传统HTML的缺点,其实传统HTML的缺陷远不止上例中所 反映的这一个方面，相比CSS为基础的页面 设计方法，其所体现出的劣势主要有以下几 点。,（1）维护困难。 为了修改某个特殊标记（如上例中的 标记）的格式，需要花费很多的时间， 尤其对于整个网站而言，后期修改和维护的 成本很高。,（2）标记不足。 HTML本身的标记很少，很多标记都是 为网页内容服务的，而对于美工样式的标 记，如文字间距、段落缩进等标记在HTML 中很难找到。,（3）网页过“胖”。 由于没有统一对各种风格样式进行控 制，因此HTML的页面往往体积过大，占用 网络带宽。,（4）定位困难。 在整体布局页面时，HTML对于各个模 块的位置调整显得捉襟见肘，过多的其他标 记同样也导致页面的复杂和后期维护的困难。,8.2.3 CSS的引入 8.2.4 如何编辑CSS,图8.4 Dreamweaver的代码模式,图8.5 Dreamweaver语法提示,图8.6 调色板,8.2.5 浏览器与CSS,图8.7 IE浏览器和Firefox浏览器的标志,图8.8 IE与Firefox的效果区别,8.3 构造CSS规则,在具体使用CSS之前，请看一个生活中 的例子，通常我们描述一个人可以为这个人 列一张表：,张飞 身高：185cm； 体重：105kg； 性别：男； 性格：暴躁； 民族：汉族； ,2级标题 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 ,h2 font-family: 宋体; font-size:15px; color: red; text-decoration: underline; ,CSS的思想就是首先指定对什么“对象” 进行设置，然后指定对该对象的哪个方面的 “属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本 部分组成的“对象”、“属性”和“值”。,8.4 基本CSS选择器,在CSS的3个组成部分中，“对象”是很 重要的，它指定了对哪些网页元素进行设 置，因此，它有一个专门的名称选择器 （selector）。,8.4.1 标记选择器,图8.9 CSS标记选择器,8.4.2 类别选择器,图8.10 类别选择器,8.4.3 ID选择器,图8