第14章 HTML5和CSS高级运用

在不考虑使用JavaScript脚本，而是XHTML代码结构及CSS样式应 用的情况下，应有选择性的使用id属性对元素进行标识，使用时应具备 样式只能使用一次的原则和用于对页面的区域进行标识。
14.2.3 class是什么
Class直译为类、种类。Class是相对于ID的一个属性，如果说ID是 对单独的元素进行标识，那么Class则是对一类的元素进行标识，与ID 是完全相反的，每个Class名称在页面中可以重复使用。 Class是CSS代码重用性最直接的体现，在实际使用中可将大量通用 的样式定义为一个Class名称，在XHTML页面中重复使用Class标识来达 到代码重用的目的。
对HTML 5.0和CSS的掌握将很有利于网页设计和制作，HTML 5.0和 CSS的高级运用向读者讲述了其属性更深层的内容。
14.6.1 问题1——CSS 1、CSS 2和CSS 3分别有哪些特点
CSS 1主要定义了网页的基本属性，如字体、颜色和空白边等。CSS 2 在此基础上添加了一些高级功能，如浮动和定位，以及一些高级选择器， 如子选择器和相邻选择器等。CSS 3开始遵循模块化开发，这将有助于理 清模块化规范之间的不同关系，减少完整文件的大小。以前的规范是一个 完整的模块，太过于庞大，而且比较复杂，所以新的CSS 3规范将其分成 了多个模块。
14.2.1 id是什么
ID是XHTML元素的一个属性，用于标识元素名称， Class对于网页 来说主要功能就是用于对象的样式设置，而ID除了能够定义样式外， 还可以做为服务于网站交互行为的一个特殊标识。无论是Class还是ID， 都是XHTML所有对象支持的一种公共属性，并也是其核心属性。
14.2.2 什么情况下使用id
14.6.2 问题2——什么是CSS选择符
选择符也称为选择器，HTML中的所有标签都是通过不同的CSS选择 符进行控制的。选择符不只是HTML文档中的元素标签，它还可以是类 （class）、ID（元素的唯一标记名称）或是元素的某种状态（如 a:hover）。根据CSS选择符用途可以把选择符分为标签选择器、类选择器、 全局选择器、ID选择器和伪类选择器。
利用CSS布局时，可以通过修改样式表的定义而使页面呈现 完全不同的外观，而当网站拥有实际甚至上百个页面时修改页 面连接的样式表文件就可以修改页面的外观，从而大大地减少 了工作量。本章将讲述有关HTML 5.0的相关知识，以及CSS的 高级运用技巧。
HTML 5.0是近十年Web标准最巨大的飞跃。和以前的版本不同，HTML 5.0并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平 台，在这个平台上视频、音频、图像、动画，以及同电脑的交互标准化。 尽管HTML 5.0的实现还是有很长的路要走，但是HTML 5.0正在改变Web。
14.2.4 什么情况下使用class
某一种样式在一个页面中需要出现多次 如果网页中经常要出现红色或白色的文本，而有不希望每次都给 文本加样式，可使用class标识。
通用和经常能使用的元素
在整个设计，不同页面中常常能用到一些所谓的页面通用元素， 比如页面中多个部分可能都需要一个768*90的广告区，而这个区域并 是总存在的，也有可能同时出现两个，对于这种情况，就可以将这个 区域定义为一个class并编写相应的样式表
制作电子产品购物网站
利用本章与前面学到的知识完成本节课后练习的网页制作。
源文件位置：光盘\ 素材\第14章\14-7.html 视频位置：光盘\ 视频\第14章\14-7.swf
在使用上，div与span标签属性几乎相同，但是在实际的页面应用 上，div与span在使用方式上有很大的差别，如下实例就可以看出div与 span的不同：
HTML代码： <div id="box">div容器1</div> <div id="box">div容器2</div> <span id="span1">span容器1</span>
14.1.1 14.1.2 14.1.3 14.1.4
HTML 5.0标签 HTML 5.0事件属性 HTML 5.0标准属性 使用HTML 5.0实现动感页面效果
在早期的网站布局中使用表格时，常常会使用类样式表对页面中 的一些字体、链接等元素进行控制，在HTML中对对象应用样式表的方 法都是class。而使用了DIV+CCS制作符合web标准的网站， class与id 会频繁地出现在XHTML代码及CSS样式表中。
本章详细介绍了Βιβλιοθήκη TML 5.0的 基本属性与CSS一些属性的缩写 使读者对HTML 5.0的属性进行全 面的了解，将CSS一些属性缩写 可以减少CSS代码的冗余。接下 来通过案例的实际操作来对知识 点的巩固。
14.5.1 设计分析 14.5.2 制作步骤 14.5.3 案例总结
源文件位置：光盘\源文件\第14章\14-5.html 视频位置：光盘\视频\第14章\14-5.swf
<span id="span2">span容器2</span>
CSS代码： #box1,#box2,#span1,#span2 { border:1px solid #00f;
padding:10px;
}
CSS样式表的缩写是指将多个CSS属性集合到一起的编写方式，这 种写法能够缩写大量的代码，并更加方便阅读，本节将向大家分别介 绍各种CSS样式表的简写方法。
14.4.1 14.4.2 14.4.3 14.4.4 14.4.5 14.4.6
font样式简写 color样式简写 background样式简写 margin和padding样式简写 border样式简写 list样式简写
提示：CSS提供的简写形式相当丰富，灵活运用之后能够消除大量多余的 代码，节省大量字节数及开发维护时间。