第3讲Web程序设计基础-DIV+CSS-8-9解答.ppt

第3讲 基于DIV+CSS的网站构架 XHTML+CSS 任务8：使用CSS层叠样式表 1．CSS的概念 CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”。 W3C：World Wide Web Consortium 万维网联盟 创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。 任务8：使用CSS层叠样式表 1．CSS的概念 CSS ，中文译为层叠样式表，常称为CSS样式表或是样式表，其扩展名为.css。CSS是用于增强或控制页面样式并允许将样式信息与网页内容分离的一种标记语言。 W3C与1996年12月推出CSS1.0（Level1）规范，为HTML4.0添加了样式。1998年5月又发布了新版本CSS2.0（Level2），该版本在兼容旧版本的情况下又扩展了一些其他的内容。CSS负责为网页设计人员提供丰富的样式来设计网页。CSS所提供的网页结构内容与表现形式分离的机制大大简化了网站的管理，提高了开发网站的工作效率。CSS可用于控制任何HTML和XML内容的表现形式。 任务8：使用CSS层叠样式表 在设计页面时采用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单地修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。概括来说，CSS有如下特点： 任务8：使用CSS层叠样式表 （1）丰富的样式定义 CSS允许页面具有更为丰富的文档样式外观以及设置文本属性、背景属性的能力；允许为任何元素创建边框并调整边框与文本之间的距离；允许改变文本的大小写方式、修饰方式（比如加粗、斜体等 ）、文本字符间隔，甚至隐藏文本以及其他页面。 任务8：使用CSS层叠样式表 （2）易于使用和修改 CSS能够将样式定义代码集中于一个样式文件中以实现某种页面效果，这样就不用将样式代码分散到整个页面文件代码中，从而方便管理。另外，还可以将几个CSS文档集中应用于一个页面，也可以将CSS样式表单独应用于某个元素，从而应用到整个页面。如果需要调整页面的样式外观，只需修改CSS样式表的样式定义代码即可。 任务8：使用CSS层叠样式表 （3）可重复使用 不仅可以将多个CSS样式表应用于一个页面，也可以将一个CSS样式表应用于一个网站的所有页面。通过在各个页面引用该CSS样式表，能够保证网站风格及格式的统一。 任务8：使用CSS层叠样式表 （4）层叠 先举一个例子，一个CSS样式表main.css定义了一个网站的10个页面的样式外观，但是由于需求的变化，需要对其中一个页面布局在保持外观的情况下更改，此时就可以应用CSS样式表的层叠特性。再创建一个只适用于该页面的CSS样式表css.css，该样式表中包含修改的那一部分样式定义代码。将样式表css.css和main.css同时应用在该页面，那么css.css样式表中新定义的样式规则将代替main.css样式表的样式规则 。 任务8：使用CSS层叠样式表 （5）页面压缩 一个拥有精美页面的网站往往需要大量或重复的表格和font标记形成各种规格的文字样式，这样做的后果就是会产生大量的标记，从而使页面文件大小增加。将用于描述页面的相似的代码形成块加到CSS样式表中可以大大地减少页面的容积，这样加载页面的时间也会减少。 任务8：使用CSS层叠样式表 2．CSS基础语法 （1）CSS样式规则 CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档中，从而定义这些元素或文档的显示外观。每一条样式规则都由3部分构成：选择符（selector）、属性（properties）和属性的取值（value），基本格式如下： 任务8：使用CSS层叠样式表 selector{property：value} selector选择符可以采用多种形式，选择符区分大小写。如果定义选择符的属性，则属性和属性值为一组，组与组之间有分号（；）隔开。格式如下。 selector{property1：value1；property2：value；…} 任务8：使用CSS层叠样式表 下面就给出一条样式规则： P{color:red} 该样式规则的选择符P是指为段落标记P提供