《1.简介CSS技术.pptVIP

了解CSS基本概念 了解CSS基本语法 了解CSS常用属性描述方法 DHTML（Dynamic HTML，动态HTML）开发技术，主要包括CSS（Cascading Style Sheets，层叠样式表）、脚本语言、HTML4.0及其以上版本和支持动态效果的浏览器。 CSS中文译为层叠样式表，它是对WEB页面显示效果进行控制的一套标准。 样式就是页面显示的文字、图片等元素的格式、风格。 层叠样式也就是指当页面同一元素在显示时受到多种样式控制时，将按照一定的层次顺序处理。 可以使用任何的文本编辑软件来编写CSS文件，编写好的文件以扩展名“.css”保存。 CSS扩充了HTML标记的属性设定，使得页面显示效果更加丰富，表现效果更加灵活，更具有动态性。 使用CSS可以将页面样式定义和HTML文件分离，使得页面开发及维护工作更易进行。 可以定义一个CSS文件，而让所有显示样式相同的页面文件都调用这个CSS文件， 也可以在一个页面文件中调用多个CSS样式表。 将网页的内容结构和格式控制分开。 可以精确控制页面的所有元素。 页面显示效果更加丰富。 支持多种浏览器。 CSS定义的基本语法格式为： 选择符{规则列表} 选择符是指要使用该样式的对象（我们将在3.2.3节详细介绍），它可以是一个或多个HTML标记、ClASS选择符或ID选择符，如果为多个则使用逗号“,”进行分隔。 规则列表是由一个或多个属性定义语句组成的样式规则，各语句间使用分号“;”进行分隔。 属性定义语句的语法格式为：“属性名：属性值”。 如：h3{font-family:隶书;color:blue} h2,h3{font-family:宋体;color:red } myfont{font-size:20pt} #myfont{font-size:20pt} 在页面文件中对CSS的定义有以下几种方式： （1）直接在页面文件中使用HTML标记的style属性。 这种方式可以直接在HTML标记中定义该标记的显示样式，并且该样式定义只能用于这个标记。其语法格式为： 标记名 style=“样式属性名1：属性值1； 样式属性名2：属性值2；…… 如： p style= font-family:宋体; color:red; font-size:10pt 程序代码见程序清单3-1，运行结果。 （2）在页面文件中定义内部样式表 。 这种方式通过style标记来定义样式，其语法格式为： style type= text/css !-- 选择符1, 选择符2, ……{样式属性名1：属性值1； 样式属性名2：属性值2；……} …… -- /style 其中使用了HTML注释标记!--……--，是为了当有浏览器不支持CSS语句时，遇到该语句段就会忽略该段内容。 程序代码见程序清单3-2，运行结果。 （3）在页面文件中嵌入外部样式表 。 为了让多个页面文件可以共享CSS样式定义，我们可以将CSS语句段编写为单独的一个CSS文件，然后将它嵌入到页面文件中。其语法格式为： style type= text/css !-- @import url(外部CSS样式表文件名); -- /style 其中外部CSS样式表文件名是以“.css”为扩展名的CSS文件，如果该文件和当前页面文件处于同一目录，则直接给出文件名，否则给出其相对路径。 程序代码见程序清单3-3，样式表文件代码， 运行结果。 （4）链接外部样式表 。 这种方式和嵌入外部样式表的方式相似，也要访问外部样式表，但是嵌入外部样式表时是将样式文件直接加载到import语句处，而链接外部样式表是直接向样式文件索取样式。其语法格式为： link type= text/css rel=stylesheet href=外部CSS样式表文件名 程序代码见程序清单3-4，运行结果。 CSS的注释语句是位于“/*”和“*/”标记之间的语句内容。 程序代码见程序清单3-2 。 CSS选择符主要有HTML标记、CLASS选择符和ID选择符三种。 由于HTML标记在使用中常常有嵌套情况出现，那么对于控制同一页面内容的嵌套标记，究竟哪一个样式起作用？ 先看一个例子。程序代码见程序清单3-5，运行结果 （1）直接在页面文件中使用HTML标记的style属性定义的样式优先级最高； （2）其他的样式定义按照在页面文件中出现的顺序，越后出现的优先级越高； （3）ID选择符的优先级高于CLASS选择符 （4）没有被定义样式控制的内容将使用浏览器的默认样