《简介CSS技术》PPT课件

《《简介CSS技术》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章CSS技术教学目的了解CSS基本概念了解CSS基本语法了解CSS常用属性描述方法教学内容3.1CSS简介3.1.1什么是CSS3.1.2CSS的作用3.1.3CSS的特点3.2CSS基本语法3.2.1CSS的基本格式3.2.2CSS注释语句3.2.3CSS选择符3.2.4样式表的层叠顺序3.3CSS基本属性3.3.1CSS背景属性3.3.2CSS文本属性3.3.3CSS字体属性3.3.4CSS边界属性3.3.5CSS边框属性3.3.6CSS边距属性3.3.7CSS列表属性3.3.8CSS定位属性3.1CSS简介DHTML（DynamicHTML，动态HTML）开发技术，主要包括CS

2、S（CascadingStyleSheets，层叠样式表）、脚本语言、HTML4.0及其以上版本和支持动态效果的浏览器。3.1.1什么是CSSCSS中文译为层叠样式表，它是对WEB页面显示效果进行控制的一套标准。样式就是页面显示的文字、图片等元素的格式、风格。层叠样式也就是指当页面同一元素在显示时受到多种样式控制时，将按照一定的层次顺序处理。可以使用任何的文本编辑软件来编写CSS文件，编写好的文件以扩展名“.css”保存。3.1.2CSS的作用CSS扩充了HTML标记的属性设定，使得页面显示效果更加丰富，表现效果更加灵活，更具有动态性。使用CSS可以将页面样式定义和HTML文件分离，使得

3、页面开发及维护工作更易进行。可以定义一个CSS文件，而让所有显示样式相同的页面文件都调用这个CSS文件，也可以在一个页面文件中调用多个CSS样式表。3.1.3CSS的特点将网页的内容结构和格式控制分开。可以精确控制页面的所有元素。页面显示效果更加丰富。支持多种浏览器。3.2CSS的基本语法CSS定义的基本语法格式为：选择符{规则列表}选择符是指要使用该样式的对象（我们将在3.2.3节详细介绍），它可以是一个或多个HTML标记、ClASS选择符或ID选择符，如果为多个则使用逗号“,”进行分隔。规则列表是由一个或多个属性定义语句组成的样式规则，各语句间使用分号“;”进行分隔。属性定义语句的语

4、法格式为：“属性名：属性值”。如：h3{font-family:隶书;color:blue}h2,h3{font-family:宋体;color:red}myfont{font-size:20pt}#myfont{font-size:20pt}3.2.1CSS基本格式在页面文件中对CSS的定义有以下几种方式：（1）直接在页面文件中使用HTML标记的style属性。这种方式可以直接在HTML标记中定义该标记的显示样式，并且该样式定义只能用于这个标记。其语法格式为：<标记名style=“样式属性名1：属性值1；样式属性名2：属性值2；……">如：

5、;color:red;font-size:10pt">程序代码见程序清单3-1，运行结果。3.2.1CSS基本格式（2）在页面文件中定义内部样式表。这种方式通过其中使用了HTML注释标记，是为了当有浏览器不支持CSS语句时，遇到该语句段就会忽略该段内容。程序代码见程序清单3-2，运行结果。3.2.1CSS基本格式（3）在页面文件中嵌入外部样式表。为了让多个页面文件可以共享

6、CSS样式定义，我们可以将CSS语句段编写为单独的一个CSS文件，然后将它嵌入到页面文件中。其语法格式为：其中"外部CSS样式表文件名"是以“.css”为扩展名的CSS文件，如果该文件和当前页面文件处于同一目录，则直接给出文件名，否则给出其相对路径。程序代码见程序清单3-3，样式表文件代码，运行结果。3.2.1CSS基本格式（4）链接外部样式表。这种方式和嵌入外部样式表的方式相似，也要访问外部样式表，但是嵌入外部样式表时是将样式文件直接加载到import语句处，而

7、链接外部样式表是直接向样式文件索取样式。其语法格式为：程序代码见程序清单3-4，运行结果。3.2.2CSS注释语句CSS的注释语句是位于“/*”和“*/”标记之间的语句内容。程序代码见程序清单3-2。3.2.3CSS选择符CSS选择符主要有HTML标记、CLASS选择符和ID选择符三种。表3-1CSS选字符的定义和使用选择符语法