html+css+javascript 标准实例教程(第二版)11.ppt

《html+css+javascript 标准实例教程(第二版)11.ppt》由会员分享，可在线阅读，更多相关《html+css+javascript 标准实例教程(第二版)11.ppt（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 本书编委会 编著实例版实例版第第11章章 CSS样式表基础样式表基础11.1 CSS的概述的概述11.2 CSS的使用的使用11.3 插入插入CSS样式表样式表11.4 编写编写CSS文件文件HTML/CSS/JavaScript 标准教程实例版（第2版）HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.1 CSS的概述的概述11.1.1 CSS基本概念基本概念11.1.2 CSS的特性的特性HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.1 CSS的概述的概述概述CSS的作用 内容和样式的分离，使得网页设计趋于明了、简洁。弥补HTM

2、L对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在HTML中可控制的标题仅有7级，即h1h7，而利用CSS可以任意设置标题大小。精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。提高网页效率，因为多个网页同时应用一个CSS样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如图11-1中的网页，内容已定，如果CSS样式不满意，可以随便修改，丝毫不会对内容有影响，而且这个CSS样式，也可以同时用到多个网页内容上。CSS还有好多特殊功能，如鼠标指针属性控制鼠标的形状和滤镜属性控制图片的特效等。HTML/CSS/JavaScript 标准教程实例版（第2

3、版）第章1111.1.1 CSS基本概念基本概念CSS（Cascading Style Sheet）即层叠样式表，简称样式表。要理解层叠样式表的概念先要理解样式的概念。样式就是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。层叠，就是指当HTML文件引用多个CSS文件时，如果CSS文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.1.2 CSS的特性的特性1继承性继承性2层叠性层叠性HTML/C

4、SS/JavaScript 标准教程实例版（第2版）第章1111.2 CSS的使用的使用11.2.1 CSS的基本语法的基本语法11.2.2 CSS选择符类型选择符类型11.2.3 选择符的优先级选择符的优先级HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法CSS基本语法selector property:value;property:value property:value HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法语法说明 语法中selector代表选择符，

5、property代表属性，value代表属性值。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法语法说明选择符包括多种形式，所有的HTML标记都可以作为选择符，如body、p、table等都是选择符。但在利用CSS的语法给它们定义属性和值时，其中属性和值要用冒号隔开。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法语法说明HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法语法说明HTML/CSS/JavaS

6、cript 标准教程实例版（第2版）第章1111.2.1 CSS的基本语法的基本语法语法说明HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.2 CSS选择符类型选择符类型1类选择符类选择符用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点（.）。类选择符语法：标记名.类名样式属性:取值;样式属性:取值;HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.2 CSS选择符类型选择符类型2id选择符选择符在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便在对整个文档进行

7、处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id。id选择符语法：标记名#标识名样式属性:取值;样式属性:取值;HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.2 CSS选择符类型选择符类型3包含选择符包含选择符包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.2 CSS

8、选择符类型选择符类型4伪类伪类伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。应用最为广泛的伪类是链接的4个状态未链接状态（a:link）、已访问链接状态（a:visited）、鼠标指针悬停在链接上的状态（a:hover）以及被激活（在鼠标单击与释放之间发生的事件）的链接状态（a:active）。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.2.3 选择符的优先级选择符的优先级在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。通

9、常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。因为id选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。!important语法主要用来提升样式规则的应用优先级。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3 插入插入CSS样式表样式表11.3.1 链入外部样式表链入外部样式表11.3.2 内部样式表内部样式表11.3.3 嵌入样式表嵌入样式表11.3.4 导入外部样式表导入外部样式表HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.1 链入外部样式表链入外部样式表基本语法：基本语法：H

10、TML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.1 链入外部样式表链入外部样式表语法说明语法说明 rel=stylesheet是指在HTML文件中使用的是外部样式表。type=text/css指明该文件的类型是样式表文件。href中的样式表文件地址，可以为绝对地址或相对地址。外部样式表文件中不能含有任何HTML标签，如或等。CSS文件要和HTML文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表来显示其风格。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.1 链入外部样式表链入外部样式

11、表特点特点一个外部样式表文件可以应用于多个HTML文件。当改变这个样式表文件时，所有网页的样式都随之改变。因此常用在制作大量相同样式的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.2 内部样式表内部样式表基本语法基本语法HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.2 内部样式表内部样式表语法说明语法说明 标记用来说明所要定义的样式。type=text/css说明这是一段C

12、SS样式表代码。标记的加入是为了防止一些不支持CSS的浏览器，将与之间的CSS代码当成普通的字符串显示在网页中。选择符也就是样式的名称，这里的选择符可以选用HTML标记的所有名称。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.2 内部样式表内部样式表特点内部样式表方法就是将所有的样式表信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，即可选用该方法。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.3 嵌入样式表嵌入样式表基本语法基本语法HTML/CSS/JavaScript

13、 标准教程实例版（第2版）第章1111.3.3 嵌入样式表嵌入样式表语法说明语法说明 HTML标记就是页面中标记HTML元素的标记，例如body、p等。style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的任意元素。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.3 嵌入样式表嵌入样式表特点利用这种方法定义的样式，其效果只能控制某个标记。所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。HTML/CSS/JavaScr

14、ipt 标准教程实例版（第2版）第章1111.3.4 导入外部样式表导入外部样式表基本语法基本语法import url（外部样式表文件地址）；HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.4 导入外部样式表导入外部样式表语法说明语法说明 Import语句后面的“；”是不可省略的。外部样式表文件的文件扩展名必须为.css。样式表地址可以是绝对地址，也可以是相对地址。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.3.4 导入外部样式表导入外部样式表特点在使用中，某些浏览器可能会不支持导入外部样式表的import声明。所以此方法不经

15、常用到。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4 编写编写CSS文件文件11.4.1 编写头部的CSS11.4.2 编写主体的CSS11.4.3 编写外部的CSSHTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.1 编写头部的编写头部的CSS实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.1 编写头部的编写头部的CSS在上面代码中的在上面代码中的与与之间之间插入如下代码。插入如下代码。HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.1 编写

16、头部的编写头部的CSS网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.2 编写主体的编写主体的CSS实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.2 编写主体的编写主体的CSS网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.3 编写外部的编写外部的CSS1应用链入外部样式表方法在应用链入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件编写CSS文件的代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.

17、4.3 编写外部的编写外部的CSS1应用链入外部样式表方法在应用链入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件建立一个新的HTML文件，并链接到上面定义的CSS文件上HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.3 编写外部的编写外部的CSS1应用链入外部样式表方法在应用链入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.3 编写外部的编写外部的CSS2应用导入外部样式表方法在应用导入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件建立如下的HTML文件HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.3 编写外部的编写外部的CSS2应用导入外部样式表方法在应用导入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件再建立单独的CSS文件HTML/CSS/JavaScript 标准教程实例版（第2版）第章1111.4.3 编写外部的编写外部的CSS2应用导入外部样式表方法在应用导入外部样式表方法在HTML文件内调用外部定义的文件内调用外部定义的CSS文件文件网页效果