4css样式（精品）

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,4,单元 层叠样式单,CSS,管理科学与工程学院,学习要点：,1,了解,CSS,的特点。,2,掌握,CSS,中各种选择符的定义及使用方法。,3,掌握,CSS,样式常用的属性例如字体属性、颜色和背景属性、文本属性、边框属性等。,4,掌握在,HTML,中使用,CSS,的几种方式。,5,了解,CSS,中各种滤镜的定义及显示效果。,3.2,层叠样式单,CSS,3.2.1 CSS,的特点,3.2.2 CSS,的定义,3.2.3 CSS,中的选择符,3.2.4 CSS,的使用方式,3.2.5,用,CSS,控制,Web,页元素的显示外观,3.2.6 CSS,应用实例,3.2,层叠样式单,CSS,初步了解,CSS,CSS,（,Cascading Style Sheets,，,层叠样式单）是,W3C,协会为弥补,HTML,在显示属性设定上的不足而制定的一套扩展样式标准。早在,1996,年,W3C,便提出了一个定义,CSS,的草案，很快这个草案就成为一个被广泛采纳的标准。到,1998,年，,W3C,在原有草案的基础上进行了扩展，建立了,CSS2,规范，它不仅包括了原有的表现形式标准，还有许多增强功能。,CSS,重新定义了,HTML,中原来的文字显示样式，并增加了一些新概,念，如：类、层等，还可以处理文字重叠、定位等，它提供了更丰富的,样式。同时,CSS,可集中进行样式管理。允许将样式定义单独存储于样式,文件中，把显示的内容和样式定义分离，便于多个,HTML,文件共享。一,个,HTML,文件也可以应用多个,CSS,样式文件。,CSS,是一种制作网页的新技术，现在已经成为网页设计必不可少的工具之一。,可惜的是，到目前为止，还没有任何一个浏览器能完全遵从,CSS2,标准，也就是,CSS2,定义的某些标记在某些浏览器上可能不起任何作用。,3.2.1 CSS,的特点,使用,CSS,可以很方便地管理显示格式方面的工作，首先它能够为网页上的元素精确地定位，让网页设计者自由控制文字、图片在网页上按要求显示。其次它能够实现把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在使用传统,HTML,语言设计的网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式控制指向某个,CSS,样式表文件。,使用,CSS,带来两个方面的好处：,（,1,）简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。,（,2,）只要修改保存着网站格式的,CSS,样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。,3.2.2 CSS,的定义,CSS,是一种格式化网页的标准方法，它就颜色、字体、间隔、定位以及边距等格式提供了几十种属性，这些属性可通过,style,应用于在,HTML,标记中。,一个样式表是由许多样式规则组成的，用来控制网页元素的显示方式，其规则的形式为：选择符,属性,1,：值,1,；属性,2,：值,2,；,规则由选择符以及紧跟其后的一系列“属性：值”对组成，所有“属性：值”对用“”包括，各“属性：值”对之间用分号“,;”,分隔。选择符是指要引用样式的对象，可以是一个或多个,HTML,标记（各标记之间用逗号分开），也可以是类选择符（如,.text,）、,id,选择符或上下文选择符。样式定义中还可以加入注释来说明代码的意思，注释有利于自己或别人以后编辑和更改代码时理解代码的含义。,CSS,定义范例,3.2.3 CSS,中的选择符,CSS,中有六种选择符，分别是,HTML,标记、具有上下文关系的,HTML,标记、用户自定义类选择符、用户定义的,ID,选择符、虚类、虚元素。分别说明如下：,3.2.3.1 HTML,标记类选择符,直接用,HTML,标记或,HTML,元素名称作为,CSS,选择符，例如：,td,input,select,body,font-family:Verdana;font-size:12px;,form,body,margin:0;padding:0;,select,body,textarea,background:#fff;font-size:12px;,select,font-size:13px;,textarea,width:540px;border:1px solid#718da6;,img,border:none,a,text-decoration:underline;cursor:pointer;,h1,color:#ff0000,3.2.3.2,具有上下文关系的,HTML,标记类选择符,如果我们定义了这样的样式规则,body color:blue,，,则网页中所有的文字都以蓝色显示，除非另外指定样式或格式来更改这一设定，这是因为,body,标记包含了所有其他的标记符和内容。如果我们要为位于某个元素内的元素设置特定的样式规则，则应将选择符指定为具有上下文关系的,HTML,标记，例如，如果只想使位于,H1,标记符的,B,标记符具有特定的属性，应使用的格式为：,h1 b color:blue,这表示只有位于,h1,标记内的,B,元素具有蓝色属性，其他任何,B,元素保持原有颜色。,具有上下文关系的,HTML,标记类选择符 范例,3.2.3.3,用户定义的类选择符,使用类选择符能够把相同的标记分类定义成不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。假如你想要两个不同的段落，一段落向右对齐，一个段落居中，你可以先定义两个类：,p.right text-align:right,p.center text-align:center,如果要用在不同的段落里，只要在,HTML,标记里加入前面定义的类：,这个段落向右对齐的,这个段落是居中排列的,用户定义的类选择符的一般格式是：,selector.classname,property:value;,CSS,类选择符示例,3.2.3.4,ID,选择符,用户定义的,ID,选择符的一般格式是：,#,IDname,property:value;,其中,Idname,为某个标记,ID,属性值。,ID,选择符的用途及概念和类选择符相似，不同之处在于同一个,ID,选择符样式只能在,HTML,文件内被应用一次，而类选择符样式则可以多次被应用，也就是说，如果有些较特别的标记需要应用较为特殊的样式，则建议使用,ID,选择符。在定义,ID,选择符的时候用“,#”,号开头而不是“,.”,号。,CSS ID,选择符示例,3.2.3.5,虚类,虚类可以看做是一种特殊的类选择符，是能被支持,CSS,的浏览器自动所识别的特殊选择符。虚类主要针对超链接,A,标记符，可以为超链接定义不同状态下的不同样式效果。,虚类的形式如下,:,选择符,:,虚类,property:value;,定义虚类的方法和常规类很相似，但有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名。虚类中最常见的是,a,虚类，,a,虚类可以指定超链接标记,a,以不同的方式显示链接，表示链接处在,4,种不同的状态下：,link,、,visited,、,active,、,hover,。,CSS,虚类范例,CSS,虚类和类选择符组合使用 范例,3.2.3.6,虚元素,在,CSS,中有两个特殊的选择符，用于,P,、,div,、,span,等块级元素的首字母,和首行效果，它们是：,first-letter,和,first-line,。,有些浏览器不支持这两个虚,元素。格式为：,选择符,:first-letter property:value;,选择符,:first-line property:value;,选择符,.,类,:first-letter property:value;,选择符,.,类,:first-line property:value;,CSS,虚元素范例,3.2.4 CSS,的使用方式,为网页添加样式表的方法有四种：链入外部样式表、导入外部样式表、联入样式表和内联样式。其中联入样式表和内联样式是将,CSS,的功能组合于,HTML,文件之内，而链接及导入外部样式表则是将,CSS,功能以个别文件的方式独立于,HTML,文件之外，然后再通过链接或导入的方式将,HTML,文件和,CSS,文件链接在一起。,3.2.4.1,链入外部样式表,链入外部样式表是把样式表保存为一个,CSS,文件，在,HTML,的头信息标识符,里添加,标记链接到这个,CSS,文件即可使用。,链入外部样式表示例,外部样式表不能含有任何像,或,这样的,HTML,标记，仅仅由样式规则或声明组成，并且只能以,.CSS,为扩展名。,标记放置在,HTML,文档头部，属性主要有,rel,，,href,，,type,，,media,。,一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。同时，大多数浏览器会保存外部样式表在缓冲区，从而浏览时也减少了重复下载代码，避免了在展示网页时的延迟。,3.2.4.2,导入外部样式表,导入外部样式表是指在,HTML,文件头部的,标记之间，利用,CSS,的,import,声明引入外部样式表。,导入外部样式表示例,import“,mystyle.css,”,表示导入,mystyle.css,样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。因为除了导入外部样式外，还可添加本页面的其他样式。,注意：,import,声明必须放在样式表的开始部分，其他的,CSS,规则应仍然包括在,Style,元素中。,3.2.4.3,联入样式表,利用,标记将样式表联入,HTML,文件的头部。前面的例子大都采用这种方法,联入样式表示例,style,元素放在文档的,head,部分。必须的,type,属性用于指出样式类别，通常取值为,text/,css,。,有些低版本的浏览器不能识别,style,标记，这意味着低版本的浏览器会忽略,style,标记里的内容，直接以源代码的方式在网页上显示我们设置的样式表。,为了避免这样的情况发生，我们用加,HTML,注释的方式（,）隐藏内容而不让它显示，像上述例子那样。联入样式表的作用范围是本,HTML,文件。,3.2.4.4,内联样式,内联样式是混合在,HTML,标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式，是连接样式和,HTML,标记的最简单的方法。内联样式的使用是直接在,HTML,标记里加入,style,参数。而,style,参数的内容就是,CSS,的属性和值。,内联样式表示例,Style,属性是随,CSS,扩展出来的。它可以应用于除了,basefont,、,param,和,script,的任意,body,元素,(,包括,body,本身,),。,内联样式会向标记中添加更多属性及内容，因此对于网页设计者来说很难维护，更难阅读。而且由于它只对局部起作用，因此必须对所有需要的标签都作设置，这样就失去了,CSS,在控制页面布局方面的优势。所以，内联样式主要用于样式仅适用于单个页面的的情况，应尽量减少使用内联样式，而采用其他样式。,3.2.4.5,多重样式表的叠加,如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准,。,多重样式表的叠加示例,字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义优先的原则。依照后定义优先的原则，