网页设计与开发第8章CSS概述.ppt

Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo 本章要求： 第8章 CSS概述 什么是CSS CSS的发展史 CSS模块化 CSS新特性 主流浏览器对CSS的支持 CSS的实际应用 主要内容 1. CSS发展概述 2. CSS模块化简介 3. 主流浏览器对CSS的支持 4. 一个简单的CSS示例 5. 综合实例——用CSS 控制登录页面样式 第8章 CSS概述 20世纪90年代初，HTML语言诞生，各种形式的样式表也开始出现。各种不同的浏览器结合自身的显示特性，开发了不同的样式语言，以便于读者自己调整网页的显示效果。注意。此时的样式语言仅供读者使用，而非供设计师使用。 早期的HTML语言只含有很少量的显示属性，用来设置网页和字体的效果。随着HTML的发展，为了满足网页设计师的要求，HTML不断添加了很多用于显示的标签和属性。由于HTML的显示属性和标签比较丰富，其他的用来定义样式的语言就越来越没有意义了。 下面从总体上看一下CSS的发展历史。 CSS1 1996年12月，CSS1（Cascading Style Sheets，level 1）正式推出。在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。 CSS2 1998年5月，CSS2（Cascading Style Sheets，level 2）正式推出。在这个版本中开始使用样式表结构。 CSS2.1 2004年2月，CSS2.1（Cascading Style Sheets，level 2 revision 1）正式推出。它在CSS2的基础上；略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性。 现在所使用的CSS基本上是在1998年推出的CSS2的基础上发展而来的。10年前在Internet刚开始普及的时候，就能够使用样式表来对网页进行视觉效果的统一编辑，确实是一件可喜的事情。但是在这10年间CSS可以说是基本上没有什么很大的变化，一直到2010年终于推出了一个全新的版本——CSS3。 8.1 CSS发展概述 CSS1主要定义了网页的基本属性，如字体、颜色、空白边等。CSS2在此基础上添加了一些高级功能，如浮动和定位；以及一些高级的选择器，如子选择器、相邻选择器和通用选择器等。 CSS遵循模块化开发，这将有助于理清模块化规范之间的不同关系，减少完整文件的大小。以前的规范是一个完整的模块，实在是太庞大，而且比较复杂，所以新的CSS版本规范将其分为了多个模块。 CSS模块化能够帮助我们，根据需要决定哪些CSS功能被支持。此外，该规范的模块化特性使得每个独立的模块能根据需要进行更新，从而便于整体规范的及时修订，这样更容易开发出新的技术特性。 8.2 CSS模块化简介 在CSS中，并没有采用总体结构，而是采用了分工协作的模块化结构，这些模块如表8-1所示。 表8-1 CSS中的模块 模块名称 功能描述 basic box model 定义各种与盒相关的样式 Line 定义各种与直线相关的样式 Lists 定义各种与列表相关的样式 Hyperlink Presentation 定义各种与超链接相关的样式。譬如锚的显示方式、激活时的视觉效果等 Presentation Levels 定义页面中元素的不同的样式级别 Speech 定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性 Background and border 定义各种与背景和边框相关的样式 Text 定义各种与文字相关的样式 Color 定义各种与颜色相关的样式 Font 定义各种与字体相关的样式 Paged Media 定义各种页眉、页脚、页数等页面元数据的样式 Cascading and inheritance 定义怎样对属性进行赋值 Value and Units 将页面上各种各样的值与单位进行统一定义，以供其他模块使用 Image Values 定义对image元素的赋值方式 2 D Transforms 在页面中实现2维空间上的变形效果 3 D Transforms 在页面中实现3维空间上的变形效果 Transitions 在页面中实现平滑过渡的视觉效果 Animations 在页面中实现动画 CSSOM View 查看管理页面或页面的视觉效果，处理元素的位置信息 Syntax 定义CSS样式表的基本结构、样式表中的一些语法细节、浏览器对于样式表的分析规则 Generated and Replaced Content 定义怎样在元素中插入内容 Marquee 定义当一些元素的内容太大，超出了指定的元素尺寸时，是否以及怎