(Web开发技术)第4章CSS.ppt

第4章　CSS 4.1 CSS 简 介4.1.1 CSS概念　　网页设计用HTML标记来定义页面文档及格式，例如通过h1、p、table、a等标记来表达“标题”、“段落”、“表格”、“链接”之类的信息。由于这些标记不能满足更多的文档样式需求，浏览器(Netscape和IE等)不断推出新的HTML标记和属性到HTML规范之中，致使文档内容要独立于文档表现形式变得越来越困难。为了解决这个问题，万维网联盟(The World Wide Web Consortium，简称W3C)肩负起了HTML标准化的使命，将动态网页(Dynamic HTML，简称DHTML)分为脚本语言(包括JavaScript、VBScript等)、支持动态效果的浏览器和CSS样式表三个部分来实现。 　　样式表(Style Sheet)是专门描述结构文档表现方式的文档，它既可以描述文档如何在屏幕上显示，也可以描述文档的打印效果，甚至声音效果。CSS就是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”，简称样式表。CSS是一种格式化网页的标准方式，它极大地扩展了HTML的功能。CSS具有如下优点：　　(1) 降低网站的维护工作量。CSS可以定义HTML中各类字体、边框、颜色、背景等属性，通过定义外部风格文件(.css)来实现整个网站页面风格的统一，只要更改CSS文件就可以使网站的所有网页显示风格随时更新，从而大大降低了网站的开发和维护工作量。 　　(2) ?CSS文件体积小。CSS不仅能定义各类文字样式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，可减小网页文件的大小，提高网页的浏览访问速度。运用CSS可使HTML文件的源代码更少，从而使文件的下载速度更快。　　(3) ?CSS便于网络信息检索。CSS实现了样式描述和数据描述相分离。由于网页的样式描述并不影响文档中数据的内在结构，因此，网络搜索引擎对文档进行搜索时，不会被种种显示描述标记所影响。　　(4) ?CSS功能强大。CSS具有丰富的表达效果，支持文字和图像的精确定位、三维技术和交互操作等，对文档的表现力远远超过了HTML标记。 4.1.2 CSS声明方法 CSS声明方法主要分为三种：基本声明、集体声明和分项声明。 　1．基本声明　 基本声明格式为：　　标记 {性质名称: 设定值} 　　例如：　　H3 {COLOR: BLUE}　 --即为一组声明 　　2．集体声明　 CSS同时声明数个元素(标记)的一组或数组样式规则，格式为：　　标记A,标记B,标记C,.…　　{性质名称1: 设定值1; 性质名称2: 设定值2; …}　　例如：　　TD,P,DIV 　　{COLOR:BLUE;font-size: 30pt;} 　　3．分项声明　 声明的标记性质不同，则声明方式不会互相抵触。如果对同样一个性质作了重复的声明，则以“后声明”的值为准。分项声明格式为：　　标记A{性质名称1: 设定值1; 性质名称2: 设定值2; 性质名称3: 设定值3; }　　例如：　　TD { COLOR: BLUE; font-size: 30pt}　　TD { font-family: Arial; line-height: 150%} 4.1.3 CSS种类　　Cascading Style Sheet中的Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在显示时被采用。按样式表插入的形式可将CSS分为以下三种：　　内嵌样式(Inline Style)；　　内部样式表(Internal Style Sheet)；　　外部样式表(External Style Sheet)。 　　1．内嵌样式 　　内嵌样式是将STYLE属性直接加在超文本标记内。格式如下：　　标记 STYLE=“性质1: 设定值1; 性质2: 设定值2; ...}　　【例4.1】 内嵌样式举例。　　table width=”60%“ border=”1“　　tr　　TD STYLE=”COLOR:BLUE; font-size:30pt; font-family:Arial; line-height:150%“　　/td/tr　　/table 图4.1 内嵌样式显示效果内嵌样式 　　2．内部样式表 　　内部样式表将样式规则写在STYLE/STYLE标签之中，分为两步：　　(1) 在html文件头(head)加入：STYLE 　　TYPE=“text/cs