第3章层叠样式表基础.ppt

天津师范大学管理学院 李天侠,总,74,页,第,*,页,标题,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,层叠样式表基础,天津师范大学管理学院,2010.1,修正版,第,3,章,内容,3.1,层叠样式表概述,3.2 CSS,定义格式和使用形式,3.3,样式表中的样式定义类型,3.4,多层样式表的层叠与继承,3.5 CSS,的常用属性,3.6,层叠样式盒模型,总,74,页,第,2,页,天津师范大学管理学院 李天侠,学习目标,了解层叠样式表。,掌握内部、外部层叠样式表的使用方法。,掌握样式类、,ID,类的定义和使用。,了解层叠和继承的特点。,了解,CSS,基本属性的使用方法。,总,74,页,第,3,页,天津师范大学管理学院 李天侠,3.1,层叠样式表概述,层叠样式表,CSS,（,Cascading Style Sheets,）是一种标记性语言。,用途：增强和控制网页样式。即控制网页内容的表现形式。,意义：简化,XHTML,页面标记，使表现和结构分离。深层的意义是易于维护和改版。,总,74,页,第,4,页,天津师范大学管理学院 李天侠,什么是样式,?,样式就是格式，文字大小、颜色，图片位置设置等，就是显示内容的样式。,什么是层叠？,可以对一个对象同时设置多个样式，按层次顺序处理。,总,74,页,第,5,页,天津师范大学管理学院 李天侠,CSS,版本,1996,年，推出,CSS1,版本（,Cascading Style Sheets Level 1,），,1997,年推出,CSS2,。,（详细了解,www.w3.org/TR/REC-CSS2,）,总,74,页,第,6,页,天津师范大学管理学院 李天侠,3.2 CSS,定义格式和使用形式,3.2.1 CSS,定义格式,3.2.2 CSS,的使用形式,总,74,页,第,7,页,天津师范大学管理学院 李天侠,3.2.1 CSS,定义格式,CSS,构成：,一系列的样式,CS,集合。,CS,构成：,选择符,(selector),属性,(property),值,(value),总,74,页,第,8,页,天津师范大学管理学院 李天侠,CS,定义格式：,选择符,属性,1:,属性值,1;,属性,2:,属性值,2;,说明,选择符：指定样式将要作用的对象，,选择符分类：,XHTML,的标记符,类名,用,ID,标志的特殊对象,选择符标识对大小写敏感，一般使用小写标识。,总,74,页,第,9,页,天津师范大学管理学院 李天侠,应用技巧：,如果多个定义的对象有共同的样式声明，可以采取分组定义的方法。,例，,h1,h2,h2,h3,h5,h6 color:green;,总,74,页,第,10,页,天津师范大学管理学院 李天侠,3.2.2 CSS,的使用形式,内部样式表,在,head,中的,标记内进行定义。,外部样式表,定义在一个样式文件中。,内嵌样式,在具体的标记中通过属性,style,进行定义。,总,74,页,第,11,页,天津师范大学管理学院 李天侠,代码中出现的内部样式表和外部样式表,大学城,.,总,74,页,第,12,页,天津师范大学管理学院 李天侠,1.,内嵌样式,内嵌样式又称为行内样式（,Inline styles,）。,在,XHTML,标记中，使用,style,属性定义。,定义格式：,特点：作用范围只限于该标记中的修饰内容。,总,74,页,第,13,页,天津师范大学管理学院 李天侠,例,1,，在,chap0301.html,文件中，使用内嵌样式。,例,1,，内嵌样式,这是使用,CSS,的内嵌样式。,这是使用,CSS,的内嵌样式。,总,74,页,第,14,页,天津师范大学管理学院 李天侠,2.,内部样式表,内部样式表定义在当前网页的,标记之间。,定义格式：,总,74,页,第,15,页,天津师范大学管理学院 李天侠,type,属性：指定以,CSS/JavaScript,的语法定义。,“,text/,css,”,：使用,CSS,定义,“,text/,javascript,”,：使用,JavaScript,定义,“,/*/”,是在,CSS,中使用的注释语句。,防止不支持,STYLE,元素的浏览器会将其中的样式定义当作文本显示出来。,总,74,页,第,16,页,天津师范大学管理学院 李天侠,例,2,，在,chap0302.html,文件中，定义网页中段落标记,p,的样式为文字居中显示、字体是黑体、字体大小是,15pt,、颜色是红色，然后引用该样式显示信息。,总,74,页,第,17,页,天津师范大学管理学院 李天侠,3.,外部样式表,外部样式表：样式表文件中的内容。,样式表文件的内容结构：,选择符,1,属性,1:,属性值,1;,属性,2:,属性值,2;.,选择符,2,属性,1:,属性值,1;,属性,2:,属性值,2;.,./*,注释*,/,选择符,n,属性,1:,属性值,1;,属性,2:,属性值,2;.,文件的扩展名一般为,.,css,。,内部样式表转换为外部样式表的方法：将定义在,style,标记之间的样式表，单独存放到一个文本文件中。,总,74,页,第,18,页,天津师范大学管理学院 李天侠,一个外部样式表文件建立后，可以应用在多个页面中。,如果改变了外部样式表，则引用该外部样式表的页面的样式也将改变。,应用外部样式表，可以方便改版、维护和管理页面。,总,74,页,第,19,页,天津师范大学管理学院 李天侠,外部样式表文件样例,下面是,csstest.css,文件的内容：,/*,csstest.css,*/,pfont,-family:,黑体,;font-size:15pt;color:green,h3.t01font-family:,黑体,;font-size:20pt;color:red,h3.t02font-family:,黑体,;font-size:15pt;color:blue,.class01font-family:,黑体,;font-size:11pt;color:green,（该样式将在后面的例中引用）,总,74,页,第,20,页,天津师范大学管理学院 李天侠,引用外部样式表的方法,链入外部样式表,导入外部样式表,总,74,页,第,21,页,天津师范大学管理学院 李天侠,链入外部样式表,当浏览器读取到,XHTML,文档的样式表链接标记时，将向所链接的外部样式表索取样式。,链接使用,link,标记，该标记必须放到页面的,head,标记区内。,总,74,页,第,22,页,天津师范大学管理学院 李天侠,链入外部样式表格式：,rel,=“,stylesheet,”,表示在网页中使用外部样式表，,type=“text/,css,”,定义了文件的类型是样式表文本，,href,指定,CSS,文件的,URL,。,总,74,页,第,23,页,天津师范大学管理学院 李天侠,例,3,，在,chap0303.html,文件中，链入外部样式表文件,csstest.css,。,例,3,，外部样式表,-,链接引用,总,74,页,第,24,页,天津师范大学管理学院 李天侠,链接外部样式表,-t01,样式,链接外部样式表,-t02,样式,使用样式类,class01,显示文本内容的原样,这是引用样式,P,后的段落显示结果,总,74,页,第,25,页,天津师范大学管理学院 李天侠,导入外部样式表,当浏览器在读取,HTML/XHTML,文件时，复制一份外部样式表内容到内部样式表中。,导入外部样式表的格式：,import,url,(,外部样式表的文件名,.,css,);,声明要放在,标记中。,每个声明导入一个外部样式表。,可以同时导入多个外部样式表。,总,74,页,第,26,页,天津师范大学管理学院 李天侠,例,4,，在,chap0304.html,文件中，导入,csstest.css,。,例,4,，外部样式表,-,导入引用,总,74,页,第,27,页,天津师范大学管理学院 李天侠,链接外部样式表,-t01,样式,链接外部样式表,-t02,样式,使用样式类,class01,显示文本内容的原样,使用样式类,class02,显示文本内容的原样,这是引用样式,P,后的段落显示结果,总,74,页,第,28,页,天津师范大学管理学院 李天侠,问题,如何获取网站上的,CSS,文件？,总,74,页,第,29,页,天津师范大学管理学院 李天侠,3.3,样式表中的样式定义类型,3.3.1 HTML/XHTML,标记样式,3.3.2,样式类,3.3.3,用,ID,标志定义,3.3.4,通配选择符,3.3.5,伪类,总,74,页,第,30,页,天津师范大学管理学院 李天侠,3.3.1 HTML/XHTML,标记样式,选择符是,XHTML,的标记符的定义格式：,选择符,1,，,，选择符,n,属性,1:,属性值,1;,属性,2:,属性值,2;,当多个标记有相同的样式时，可以同时定义。,总,74,页,第,31,页,天津师范大学管理学院 李天侠,例,5,，在,chap0305.html,文件中，定义超级链接标记,a,的样式为显示热字不带下划线。,例,5,，超级链接,a,标记样式定义,atext-decoration:none,;,热字,总,74,页,第,32,页,天津师范大学管理学院 李天侠,3.3.2,样式类,样式类分类,独立样式类,相对样式类,总,74,页,第,33,页,天津师范大学管理学院 李天侠,1.,独立样式类的定义和引用方法,定义格式：,.,类名,属性,1:,属性值,1;,属性,2:,属性值,2;.,特点：任意标记都可以引用独立样式类，这是最常用的一种方法。,引用方法：,显示内容,总,74,页,第,34,页,天津师范大学管理学院 李天侠,例,6,，在,chap0306.html,文件中，定义一个控制背景显示的独立样式类并引用。,总,74,页,第,35,页,天津师范大学管理学院 李天侠,2.,相对样式类的定义和引用方法,指相对某个标记定义的类。,定义格式：,标记符,.,类名,属性,1:,属性值,1;,属性,2:,属性值,2;.,特点：相同标记，可分类定义为不同的样式。,引用：与独立样式类的引用方法一样。,显示内容,总,74,页,第,36,页,天津师范大学管理学院 李天侠,例,7,，在,chap0307.html,文件中，定义标题标记,H1,的相关样式类,H01,和,H02,并引用。,总,74,页,第,37,页,天津师范大学管理学院 李天侠,3.3.3,用,ID,标志定义,ID,符定义分类：,独立,ID,定义样式方式,相对,ID,定义样式方式。,总,74,页,第,38,页,天津师范大学管理学院 李天侠,1.,独立,ID,定义样式与引用方法,定义格式：,#ID,名,属性,1:,属性值,1;,属性,2:,属性值,2;.,“,ID,名”是由网页设计者定义的。,引用方法：,在指定的,XHTML,标记中，使用,id,属性。,引用格式：,显示内容,总,74,页,第,39,页,天津师范大学管理学院 李天侠,例,8,，在,chap0308.html,文件中，定义独立,ID,定义样式并引用。,总,74,页,第,40,页,天津师范大学管理学院 李天侠,2.,相对,ID,定义样式与引用方法,定义格式：,XHTML,标记,#ID,名,属性,1:,属性值,1;,属性,2:,属性值,2;.,引用方法：和独立,ID,样式的引用方法一样,引用格式：,显示内容,总,74,页,第,41,页,天津师范大学管理学院 李天侠,例,9,，在,chap0309.html,文件中，定义相对,ID,样式并引用。,总,74,页,第,42,页,天津师范大学管理学院 李天侠,ID,类与,Class,类的区别,定义形式不同,引用形式不同,使用不同,ID,是页面中唯一的，就像,IP,地址一样。而,Class,可以在不同的网页中重复定义。,作用不同,定义,ID,的作用是，定义元素的表现，方便使用,JavaScript,等脚本。（因为在网页中的页面元素使用行为时，要求该元素在页面中有唯一的,ID,标识。）,定义,Class,的主要作用是确定页面的表现形式。,通常，为了页面有更好的扩展性，在页面内容中大的布局区域和可能设置动作的地方使用,ID,，在页面内容等部分使用,Class,。,总,74,页,第,43,页,天津师范大学管理学院 李天侠,3.3.4,通配选择符,通配选择符是“*”，适配所有元素。,定义举例：,*font-size:28pt;,font-family:,黑体,;,color:#FF0000,总,74,页,第,44,页,天津师范大学管理学院 李天侠,例,10,，在,chap0310.html,文件中，定义通配选择符，自动适配所有的标记。,例,10,，定义通用选择符并引用,*background-,color:#FFCCFF,;,font-size:28pt;,font-family:,黑体,;,color:#FF0000,BODY,：通用选择符“*”控制的显示。,段落：显示的文本。,总,74,页,第,45,页,天津师范大学管理学院 李天侠,3.3.5,伪类,伪类也是一种选择符，在页面中定义超出结构所能标识的样式。,定义格式：,选择符,:,伪类标识,属性,:,属性值,;,伪类的标识名是,CSS,中指定的，数目有限，具体查阅相关文献资料。,总,74,页,第,46,页,天津师范大学管理学院 李天侠,最常出现在,a,标记上的伪类。,（,1,）,link,语法：,a:link,属性名,:,属性值,;,设置,a,对象在未被访问前的样式表属性。,（,2,）,visited,语法：,a:visited,属性名,:,属性值,;,设置,a,对象在其链接地址已被访问过时的样式表属性。,（,3,）,hover,语法：,a:hover,属性名,:,属性值,;,设置,a,对象上鼠标悬停时的样式表属性。,（,4,）,active,语法：,a:active,属性名,:,属性值,;,设置,a,对象在被用户激活（即鼠标点击与释放之间发生）时的样式表属性。,总,74,页,第,47,页,天津师范大学管理学院 李天侠,例,11,，在,chap0311.html,文件中，定义,a,的伪类并观察效果。,a:link,text-decoration:none;color:#3f3f3f;,a:visitedtext-decoration:none,;,a:hoverfont-size:32px;color:#CC0000;,a:active,color:#009900;,总,74,页,第,48,页,天津师范大学管理学院 李天侠,3.4,多层样式表的层叠与继承,如果在网页设计中进行了多种样式设置，就会出现叠加现象。,一般地，所有样式将根据下面的规则，重新层叠在一个新的虚拟样式表中（数字序号值大的优先级高）。,1,浏览器缺省设置,2,外部样式表,3,内部样式表（位于,标签内部）,4,内联样式（在,XHTML,元素内部）,总,74,页,第,49,页,天津师范大学管理学院 李天侠,样式表的层叠性就是继承性。,继承规则：,外部的元素样式会保留下来继承给这个元素所包含的其他元素。,所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。,遇到冲突的地方会以最后定义的为准。,总,74,页,第,50,页,天津师范大学管理学院 李天侠,例,12,，在,chap0312.html,中，进行多重样式表的层叠定义。,例,12,，多样式叠加问题,总,74,页,第,51,页,天津师范大学管理学院 李天侠,链接内部样式表,-t01,样式,链接外部样式表,-t02,样式,总,74,页,第,52,页,天津师范大学管理学院 李天侠,3.5 CSS,的常用属性,属性是,CSS,中最重要的部分，也是最复杂的部分。,常用的属性有颜色属性、字体属性、文本属性、背景属性、定位属性、尺寸属性、布局属性、边距属性、边框属性、补白属性、列表项属性、表格属性等。,某些属性只有部分浏览器支持。,属性的知识和应用是,CSS,应用的主体部分。,总,74,页,第,53,页,天津师范大学管理学院 李天侠,3.5.1,颜色属性,3.5.2,字体属性,3.5.3,文本属性,总,74,页,第,54,页,天津师范大学管理学院 李天侠,3.5.1,颜色属性,格式：,color:,颜色代码,三种设置色彩的方法：,十六进制数,rgb,函数（整数或百分数）,色彩名称,总,74,页,第,55,页,天津师范大学管理学院 李天侠,1.,用十六进制数表示色彩值,格式：,#RRGGBB,Red,、,Green,、,Blue,的取值范围是：,00,FF,，参数必须是两位数。,常见的红色、黑色、白色的设置值分别为：,#ff0000,、,#000000,、,#,ffffff,。,例，“,div color:#ff0000 ”,。,总,74,页,第,56,页,天津师范大学管理学院 李天侠,2.,用,rgb,函数表示色彩值,格式：,rgb(R,G,B,),R,、,G,、,B,可取正整数值或百分数值。,正整数值的取值范围为：,0,255,；百分数值的取值范围为色彩强度的百分比：,0.0%,100.0%,。,例，,div color:rgb(12%,200,50%),。,总,74,页,第,57,页,天津师范大学管理学院 李天侠,3.,用色彩名称表示色彩值,CSS,只提供了,16,种色彩名称，,例，,div color:red,。,总,74,页,第,58,页,天津师范大学管理学院 李天侠,3.5.2,字体属性,字体属性（,Font Properties,）包括,字体字形,字体字号,字体风格,字重,文字变形,文字修饰,字体（,Font,）（它是前面的综合设置属性。）,这里仅介绍前三个属性。,总,74,页,第,59,页,天津师范大学管理学院 李天侠,1.,字体字形,字体字形属性名,font-family,，控制显示的字体。,不同的操作系统，其字体名是不同的。,对于,Windows,系统，其字体字形名与,Word,中的“字体”列表中所列出的字体名称一致。,总,74,页,第,60,页,天津师范大学管理学院 李天侠,格式：,font-family:,字形名称表,字体字形名按优先顺序排列，逗号隔开。名称中包含空格，使用引号括起。,优先顺序含义：用户端若果没有第,1,种，就按顺序选择下一种字体字形，直至取系统默认值。,例，,h2 font-family:,华文新魏,楷体,_GB2312,总,74,页,第,61,页,天津师范大学管理学院 李天侠,2.,字号,字号属性名：,font-size,，控制字的大小。,格式：,font-size:,绝对尺寸,|,相对尺寸,|,百分数,|,数值,绝对尺寸根据对象字体进行调节。可选,xx-small|x-small|small|medium|large|x-large|xx-large,，普通字体为,medium,。,相对尺寸是相对于父对象中字体尺寸进行相对调节，取值,smaller,和,larger,。,总,74,页,第,62,页,天津师范大学管理学院 李天侠,百分数取值是基于父对象中字体的尺寸。,每一个可以使用百分比值单位所指定的属性，同时也自定义了这个百分比值的参照值。,多数情况下，这个参照值是该元素本身的字体尺寸。,注意：不是所有属性都支持百分比单位。,例：,p font-size:200%,总,74,页,第,63,页,天津师范大学管理学院 李天侠,数值取值是具体的整数，其单位列表如下：,例，,h3 font-size:20px,单位,描述,em,相对当前对象内字符大写“,M,”,的宽度,ex,相对当前对象内字符大写“,x,”,的高度,px,像素,pt,磅（,pound,）或,point,点，,72pt,的长度为,1in,（,衡量印刷字体大小的单位,约等于七十二分之一英寸,point,）,in,英寸,cm,厘米,mm,毫米,总,74,页,第,64,页,天津师范大学管理学院 李天侠,3.,字体风格,格式：,font-style:italic|oblique|normal,参数：,italic,为斜体。对于没有斜体变量的特殊字体，将应用,oblique,。,normal,为正常的字体，声明此值将取消之前设置。,总,74,页,第,65,页,天津师范大学管理学院 李天侠,3.5.3,文本属性,文本属性（,Text Properties,）包括,字间距,行高,文字对齐,文字缩行,字母间距,总,74,页,第,66,页,天津师范大学管理学院 李天侠,1.,文字对齐,设置对象中文本的水平对齐方式。只用于整块的内容，如,、,、,和,等。,格式：,text-align:left|right|center|justify,left,为左对齐，,right,为右对齐，,center,为居中，,justify,为两端对齐。,例如，“,div text-align:center”,。,总,74,页,第,67,页,天津师范大学管理学院 李天侠,2,文字缩行,设置对象中的文本段落的缩进。该属性只应用于整块的内容。,格式：,text-indent:,值,text-indent,的值为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。,例如：,p text-indent:2em,/*,本段第,1,行起始位置缩进,2,个字符*,/,div text-indent:-5px;,div text-indent:30%;,总,74,页,第,68,页,天津师范大学管理学院 李天侠,例,13,，在,chap0313.html,文件中引用颜色、字体、文本属性。,总,74,页,第,69,页,天津师范大学管理学院 李天侠,3.6,层叠样式盒模型,在,CSS,中，所有文档元素（包括块元素和内联元素）都将生成一个矩形框，这就是样式表规定的,BOX,容器。,每个整块对象或替代对象都包含在样式表生成的,BOX,容器中，它存储了一个对象的所有可以操作的样式。,总,74,页,第,70,页,天津师范大学管理学院 李天侠,BOX,容器由边界、边框、补白、宽度和高度组成。,CSS,盒模型,(Box Model),的各部分之间的关系如图所示。,总,74,页,第,71,页,天津师范大学管理学院 李天侠,元素盒的最内部分是实际显示内容，直接包围实际显示内容的是内边距，又称补白（,Padding,）。内边距呈现了元素的背景（,Background,）。,内边距的边缘是边框（,Border,）。,边框以外是外边距（,Margin,），外边距默认是透明的，不会遮挡其后的任何元素。,CSS,盒模型,(Box Model),规定了元素和处理元素内容、内边距、边框和外边距的方式。,总,74,页,第,72,页,天津师范大学管理学院 李天侠,参考文献,陈刚编著，,CSS,标准网页布局开发指南，清华大学出版社，北京，,2007.6,刘瑞新等编著，网页设计与制作教程，机械工业出版社，北京，,2006.2,总,74,页,第,73,页,天津师范大学管理学院 李天侠,资源网站,,/,李天侠,