第11章CSS样式表基础.ppt

,HTML/CSS/JavaScript,标准,教程实例版（第,2,版）,第,章,11,本书编委会 编著,实例版,第,11,章,CSS,样式表基础,11.1 CSS,的概述,11.2 CSS,的使用,11.3,插入,CSS,样式表,11.4,编写,CSS,文件,HTML/CSS/JavaScript,标准教程实例版（第,2,版）,11.1 CSS,的概述,11.1.1 CSS,基本概念,11.1.2 CSS,的特性,11.1 CSS,的概述,概述,CSS,的作用,内容和样式的分离，使得网页设计趋于明了、简洁。,弥补,HTML,对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在,HTML,中可控制的标题仅有,7,级，即,h1h7,，而利用,CSS,可以任意设置标题大小。,精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。,提高网页效率，因为多个网页同时应用一个,CSS,样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如图,11-1,中的网页，内容已定，如果,CSS,样式不满意，可以随便修改，丝毫不会对内容有影响，而且这个,CSS,样式，也可以同时用到多个网页内容上。,CSS,还有好多特殊功能，如鼠标指针属性控制鼠标的形状和滤镜属性控制图片的特效等。,11.1.1 CSS,基本概念,CSS,（,Cascading Style Sheet,）即层叠样式表，简称样式表。要理解层叠样式表的概念先要理解样式的概念。样式就是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。层叠，就是指当,HTML,文件引用多个,CSS,文件时，如果,CSS,文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。,11.1.2 CSS,的特性,1,继承性,2,层叠性,11.2 CSS,的使用,11.2.1 CSS,的基本语法,11.2.2 CSS,选择符类型,11.2.3,选择符的优先级,11.2.1 CSS,的基本语法,CSS,基本语法,selector property:value;property:value property:value,11.2.1 CSS,的基本语法,语法说明,语法中,selector,代表选择符，,property,代表属性，,value,代表属性值。,11.2.1 CSS,的基本语法,语法说明,选择符包括多种形式，所有的,HTML,标记都可以作为选择符，如,body,、,p,、,table,等都是选择符。但在利用,CSS,的语法给它们定义属性和值时，其中属性和值要用冒号隔开。,11.2.1 CSS,的基本语法,语法说明,11.2.1 CSS,的基本语法,语法说明,11.2.1 CSS,的基本语法,语法说明,11.2.2 CSS,选择符类型,1,类选择符,用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点（,.,）。,类选择符语法：标记名,.,类名,样式属性,:,取值,;,样式属性,:,取值,;,11.2.2 CSS,选择符类型,2,id,选择符,在,HTML,文档中，需要唯一标识一个元素时，就会赋予它一个,id,标识，以便在对整个文档进行处理时能够很快地找到这个元素。而,id,选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（,.,）改为井号（,#,），而调用时需要把,class,改为,id,。,id,选择符语法：标记名,#,标识名,样式属性,:,取值,;,样式属性,:,取值,;,11.2.2 CSS,选择符类型,3,包含选择符,包含选择符是对某种元素包含关系（如元素,1,里包含元素,2,）定义的样式表。这种方式只对在元素,1,里的元素,2,定义，对单独的元素,1,或元素,2,无定义。,11.2.2 CSS,选择符类型,4,伪类,伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。,应用最为广泛的伪类是链接的,4,个状态,未链接状态（,a:link,）、已访问链接状态（,a:visited,）、鼠标指针悬停在链接上的状态（,a:hover,）以及被激活（在鼠标单击与释放之间发生的事件）的链接状态（,a:active,）。,11.2.3,选择符的优先级,在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。通常我们使用的选择符包括,id,选择符，类选择符，包含选择符和,HTML,标记选择符等。因为,id,选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。,!important,语法主要用来提升样式规则的应用优先级。,11.3,插入,CSS,样式表,11.3.1,链入外部样式表,11.3.2,内部样式表,11.3.3,嵌入样式表,11.3.4,导入外部样式表,11.3.1,链入外部样式表,基本语法：,11.3.1,链入外部样式表,语法说明,rel=,stylesheet,是指在,HTML,文件中使用的是外部样式表。,type=,text/css,指明该文件的类型是样式表文件。,href,中的样式表文件地址，可以为绝对地址或相对地址。,外部样式表文件中不能含有任何,HTML,标签，如,或,等。,CSS,文件要和,HTML,文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照该,HTML,网页所链接的外部样式表来显示其风格。,11.3.1,链入外部样式表,特点,一个外部样式表文件可以应用于多个,HTML,文件。当改变这个样式表文件时，所有网页的样式都随之改变。因此常用在制作大量相同样式的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。,11.3.2,内部样式表,基本语法,11.3.2,内部样式表,语法说明,标记用来说明所要定义的样式。,type=,text/css,说明这是一段,CSS,样式表代码。,标记的加入是为了防止一些不支持,CSS,的浏览器，将,与,之间的,CSS,代码当成普通的字符串显示在网页中。,选择符也就是样式的名称，这里的选择符可以选用,HTML,标记的所有名称。,11.3.2,内部样式表,特点,内部样式表方法就是将所有的样式表信息都列于,HTML,文件的头部，因此这些样式可以在整个,HTML,文件中调用。如果想对网页一次性加入样式表，即可选用该方法。,11.3.3,嵌入样式表,基本语法,11.3.3,嵌入样式表,语法说明,HTML,标记就是页面中标记,HTML,元素的标记，例如,body,、,p,等。,style,参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，,style,参数可以应用于,HTML,文件中的,body,标记，以及除了,basefont,、,param,和,script,之外的任意元素。,11.3.3,嵌入样式表,特点,利用这种方法定义的样式，其效果只能控制某个标记。所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。,11.3.4,导入外部样式表,基本语法,import url,（外部样式表文件地址）；,11.3.4,导入外部样式表,语法说明,Import,语句后面的“；”是不可省略的。,外部样式表文件的文件扩展名必须为,.css,。,样式表地址可以是绝对地址，也可以是相对地址。,11.3.4,导入外部样式表,特点,在使用中，某些浏览器可能会不支持导入外部样式表的,import,声明。所以此方法不经常用到。,11.4,编写,CSS,文件,11.4.1,编写头部的,CSS,11.4.2,编写主体的,CSS,11.4.3,编写外部的,CSS,11.4.1,编写头部的,CSS,实例代码,11.4.1,编写头部的,CSS,在上面代码中的,与,之间插入如下代码。,11.4.1,编写头部的,CSS,网页效果,11.4.2,编写主体的,CSS,实例代码,11.4.2,编写主体的,CSS,网页效果,11.4.3,编写外部的,CSS,1,应用链入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,编写,CSS,文件的代码,11.4.3,编写外部的,CSS,1,应用链入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,建立一个新的,HTML,文件，并链接到上面定义的,CSS,文件上,11.4.3,编写外部的,CSS,1,应用链入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,网页效果,11.4.3,编写外部的,CSS,2,应用导入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,建立如下的,HTML,文件,11.4.3,编写外部的,CSS,2,应用导入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,再建立单独的,CSS,文件,11.4.3,编写外部的,CSS,2,应用导入外部样式表方法在,HTML,文件内调用外部定义的,CSS,文件,网页效果,