02_层叠样式表cssppt课件

1、层叠样式表CSS姓名: 王洪利微博: weibo/lampwanghongli邮箱: wanghonglilampbrother本章任务本章任务v1. CSS1. CSS简介简介 2. CSS 2. CSS规则的组成规则的组成v3. 3. 在在HTMLHTML文档中放置文档中放置CSSCSS的几种方式的几种方式 4. CSS 4. CSS选择器选择器v5. CSS5. CSS常见的样式属性和值常见的样式属性和值 6. DIV+CSS 6. DIV+CSS对页面布局的优势对页面布局的优势v7.div7.div和和spanspan 8. W3C 8. W3C盒子模型盒子模型v9. 9. 和页面布局

2、有关的和页面布局有关的CSSCSS属性属性10. 10. 盒子区块框的定位盒子区块框的定位v11. 11. 使用盒子模型的浮动布局使用盒子模型的浮动布局12. DIV+CSS12. DIV+CSS的兼容性问题的兼容性问题1. CSS1. CSS简介简介vCSSCSS是用于布局与美化网页的是用于布局与美化网页的. . vCSSCSS是是Cascading Style SheetsCascading Style Sheets的英文缩写的英文缩写, ,即层叠样式表即层叠样式表vCSSCSS语言是一种标记语言语言是一种标记语言, ,因此不需要编译因此不需要编译, ,可以直接由浏览器执可以直接由浏览器执

3、行行( (属于浏览器解释型语言属于浏览器解释型语言). ). vCSSCSS文件是一个文本文件文件是一个文本文件, ,它包含了一些它包含了一些CSSCSS标记标记,CSS,CSS文件必须使文件必须使用用.css.css为文件名后缀为文件名后缀. . vCSSCSS是大小写不敏感的是大小写不敏感的,CSS,CSS与与csscss是一样的是一样的. . vCSSCSS是由是由W3CW3C的的CSSCSS工作组产生和维护的工作组产生和维护的. .提示：可以通过简单的更改提示：可以通过简单的更改CSS文件文件,改变网页的整体表现形式改变网页的整体表现形式,可以减可以减少我们的工作量少我们的工作量,所以

4、她是每一个网页设计人员的必修课所以她是每一个网页设计人员的必修课. 2.CSS2.CSS规则的组成规则的组成v2.1 CSS2.1 CSS语法语法v2.2 2.2 长度单位长度单位v2.3 2.3 颜色单位颜色单位2.1 CSS2.1 CSS语法语法v基本语法：基本语法：vCSSCSS定义分别由：选择符、属性、属性取值组定义分别由：选择符、属性、属性取值组成成格式：格式：selectorproperty:valueselectorproperty:valuev选择符可以是选择符可以是HTMLHTML中的标记名称，具体下节讲到中的标记名称，具体下节讲到。v属性和值之间用冒分开，多个属性之间加分号

5、属性和值之间用冒分开，多个属性之间加分号vCSSCSS是大小写不敏感的是大小写不敏感的, ,在在CSSCSS语法中推荐使用小写语法中推荐使用小写v如：如：bodycolor:redbodycolor:red设置了页面为红色的文设置了页面为红色的文字字v例：例：ptext-align:center;color:red;font-ptext-align:center;color:red;font-family:family:宋体宋体 样式规则样式规则 p color:red; font-family: p color:red; font-family:隶书隶书; font-size:24px; f

6、ont-size:24px; 登鹳雀楼登鹳雀楼 白日依山尽，白日依山尽， 黄河入海流。黄河入海流。 欲穷千里目，欲穷千里目， 更上一层楼。更上一层楼。 选择器选择器用分号隔开用分号隔开本页面中所有的本页面中所有的P标标签都应用了此样式签都应用了此样式所有的段落所有的段落都采用都采用P样样式，保证风式，保证风格统一格统一2.2 2.2 长度单位长度单位v在在csscss样式表中可以使用如下长度单位：样式表中可以使用如下长度单位：v相对长度单位：相对长度单位：vpx px 像素像素PixelPixel）。）。 divfont-size:12px; divfont-size:12px; v% % 百

7、分比百分比 divfont-size:80%; divfont-size:80%; 2.3 2.3 颜色单位颜色单位vCSSCSS中的颜色值：中的颜色值：v#rrggbb (#rrggbb (如：如： #ffcc00) #ffcc00)v#rgb#rgb如：如：#fc0#fc0）vrgb(x,x,x) rgb(x,x,x) 其中其中x x是一个是一个0-2550-255的整数值的整数值, ,如如rgb(255,204,0)rgb(255,204,0)vrgb(x%,x%,x%) rgb(x%,x%,x%) 其中其中x x是一个是一个0-1000-100的整数值的整数值, ,如如rgb(100%

8、,80%,0)rgb(100%,80%,0)3. 3. 在在HTMLHTML文档中放置文档中放置CSSCSS的几种方式的几种方式v3.1 3.1 内联样式表内联样式表v3.2 3.2 内嵌样式表内嵌样式表v3.3 3.3 外部链接样式表外部链接样式表3.1 3.1 内联样式表内联样式表v在在HTMLHTML中使用中使用CSSCSS样式的方式一般有三种：样式的方式一般有三种：v内联引用、内部引用和外部引用。内联引用、内部引用和外部引用。v第一种：内联引用也叫行内引用）第一种：内联引用也叫行内引用）v就是把就是把CSSCSS样式直接作用在样式直接作用在HTMLHTML标签中。标签中。 使用CSS内

9、联引用表现段落. 特点：内联的样式比其他方法更加灵活，但需要和展示的内容混淆在一起，内联样式会失去一些样式表的优点。v第二种：内部引用也叫内嵌式）第二种：内部引用也叫内嵌式）v使用使用stylestyle标签直接把标签直接把CSSCSS文件中的内容加载到文件中的内容加载到HTMLHTML文档内部的文档内部的标签里。标签里。 /* 设置本页面p标签中的文字为以下样式*/ p font-size: 10px; color: #FFFFFF; 文档样式表开始，类型为CSS样式样式规则声明文档样式表结束选择器css注释特点是适合用于一个HTML文档具有独一无二的样式时。v第三种：外部引用第三种：外部引

10、用vCSSCSS外部引用使用了外接的外部引用使用了外接的CSSCSS文件文件, ,一般的浏览器一般的浏览器都带有缓存功能都带有缓存功能, ,所以用户不用每次都下载此所以用户不用每次都下载此CSSCSS文件文件. .v外部引用相对于内部引用和内联引用来说是高效外部引用相对于内部引用和内联引用来说是高效的是节省宽带的的是节省宽带的. .v外部引用是外部引用是W3CW3C推荐使用的推荐使用的v使用使用linklink标签引用标签引用CSSCSS 关系类型css文件名使用使用linklink标签标签应用应用CSSCSS多重样式表的叠加多重样式表的叠加v如果在同一个选择器上使用几个不同的样式表时，这个属

11、如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。的为准。v留意：依照后定义的优先，所以优先级最高的是内联样式留意：依照后定义的优先，所以优先级最高的是内联样式，内部样式表高于导入外部样式表，链入的外部样式表和，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。内部样式表之间是最后定义的优先级高。4. CSS4. CSS选择器选择符）选择器选择符）v4.1 HTML4.1 HTML选择符选择符v4.2 4.2 类选择符类选择符v4.3 ID4.3 ID选

12、择符选择符4.1 HTML4.1 HTML选择符选择符vHTML选择符即是HTML标签，用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择符。v语法：HTML标签名属性：值p text-indent:3em; /*当中的选择符是p*/h1 color:red; /*当中的选择符是h1*/ 4.2 4.2 类选择符类选择符vCSSCSS类选择符类选择符-匹配文档中元素匹配文档中元素E E的的classclass属性的属性值为属性的属性值为classnameclassname的元素的元素 v语法：标记名语法：标记名. .类名类名 属性：值属性：值 或或 . .类名类名 属性：值属

13、性：值 v类选择符名称的定义方式是类选择符名称的定义方式是,.,.符号，英文符号，英文dotdot，后加，后加类名称类名称classname classname v类选择符的定义需要有类选择符的定义需要有. .符号（符号（. .符号标明是类选择符），符号标明是类选择符），但是但是HTMLHTML文档中的标签的文档中的标签的classclass属性名不能出现属性名不能出现. .符号，见符号，见下面示例：下面示例： p.dark-row background:#EAEAEA; /*设置p标签中class属性为dark-row的*/.note font-size:small /*为note的类可以被

14、用于任何元素*/ 第一段 第二段 第三段 第四段 类选择类选择符定义符定义类选择类选择符应用符应用4.3 ID4.3 ID选择符选择符vCSS IDCSS ID选择符选择符 - - 匹配文档中元素匹配文档中元素E E的的idid属性的属性值为属性的属性值为idnameidname的元素的元素 v语法：语法：IDID名称名称 属性：值属性：值 vIDID选择符名称的定义方式是，选择符名称的定义方式是，# #符号，英文符号，英文poundpound，后加，后加IDID名称名称idname idname vIDID选择符的定义需要有选择符的定义需要有# #符号（符号（# #符号标明是符号标明是IDI

15、D选择符），选择符），但是但是HTMLHTML文档中的标签的文档中的标签的idid属性名不能出现属性名不能出现# #符号，见下符号，见下面示例面示例 vidid属性的特殊之处在于，一个文档中只能有一个元素使用属性的特殊之处在于，一个文档中只能有一个元素使用一个一个IDID选择符与选择符与classclass属性正好相反），属性正好相反），idid属性可以用属性可以用来单一地标识一个元素来单一地标识一个元素 。#main text-indent:3em; /*ID名称main前加上一个#号*/ 文本缩进3em ID选择选择符定义符定义ID选择符在选择符在HTML中的应用中的应用5. 5. 常见的

16、样式属性和值常见的样式属性和值v5.1 5.1 字体与颜色字体与颜色v5.2 5.2 背景属性背景属性v5.3 5.3 文本属性文本属性v5.4 5.4 边框属性边框属性v5.5 5.5 区块属性区块属性vCSSCSS中的样式属性比较多，经常使用的属性可以分为这么中的样式属性比较多，经常使用的属性可以分为这么几类几类: :字体、文本、背景、位置、边框，以及其他一些样字体、文本、背景、位置、边框，以及其他一些样式属性。每个类中的属性都可以单独使用，如果同一类中式属性。每个类中的属性都可以单独使用，如果同一类中多个属性在一起使用，还可将它们合为一行解决。多个属性在一起使用，还可将它们合为一行解决。

17、v如：如：font:font:|?/? v例：例：pfont:italic bold 12pt/14pt Times,serifpfont:italic bold 12pt/14pt Times,serifv阐明：阐明：p p标签中的字体为斜体加粗，字体大小为标签中的字体为斜体加粗，字体大小为1212点行高点行高为为1414点字体为点字体为TimesTimes，无效时用，无效时用serifserif。5.1 5.1 字体与颜色字体与颜色vCSS中修饰字体的属性属性描述font简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。比如：times、seri

18、ffont-size 设置字体的尺寸.可以使用绝对大小，相对大小、长度和百分比font-style 设置字体风格。normal(标准)、italic(斜体)、oblique倾斜font-weight 设置字体的粗细。body font: 12px Arial,宋体; /* 设置网页文字大小12个像素Arial或宋体字 */ 5.2 5.2 背景属性背景属性vCSS中常用的控制背景的属性属性描述background简写属性，作用是将背景属性设置在一个声明中。 background-color 设置元素的背景颜色。transparent（透明色）background-image 把图像设置为背景。

19、none(无) background-repeat 设置背景图像是否及如何重复。repeat、repeat-x、repeat-y、no-repeatbackground-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll(滚动)或fixed(固定) background-position 背景图像的起始位置。横向(left,center,right),纵向(top,center,bottom),百分比和长度。 v除了使用上表中提供的背景属性，控制HTML元素的背景样式，也可以将其简化使用一行代码解决。通过背景类中的background属性实现，语法格式如下：v ba

20、ckground:|bodybackground:white url(htmlhelp/foo.gif);/*设定body元素的背景颜色和图片*/h1background:#7fffd4; /*设定h1元素的背景颜色*/pbackground:url(./backgrounds/pawn.png) #f0f8ff fixed; /*设定背景图片、颜色和附件固定*/tablebackground:#0c0 url(leaves.jpg) no-repeat bottom right;/*使用全部的背景属性*/5.3 5.3 文本属性文本属性vCSS文本属性主要包括文字修饰、文字排列、文字缩进、行

21、高，以及文字大小写等。属性描述text-decoration 向文本添加修饰。underline(下划线),overline(上划线),line-through(删除线),blink(闪烁)默认使用无text-align 对齐元素中的文本。left,right,center或justify text-indent 缩进元素中文本的首行。可以为一个长度或百分比line-height 设置行高。 color设置文本颜色 5.4 5.4 边框属性边框属性v每个内容或元素外面都可以有一个边框. v边框分上边框(top),下边框(bottom),左边框(left),右边框(right). v每种边框有颜

22、色(color),款式(style),宽度(width)三种属性. v如果上下左右的边框表现不一样,可以分别定义上下左右边框,如果一样可以统一使用border属性定义.属性描述border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中

23、。 border-left简写属性，用于把左边框的所有属性设置到一个声明中。 border-right简写属性，用于把右边框的所有属性设置到一个声明中。 border-top 简写属性，用于把上边框的所有属性设置到一个声明中。 属性描述border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。bo

24、rder-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。border-top-color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。border-style的取值的取值 ：none: 无样式无样式 hidden: 除了同表格的边框发生冲突的时候除了同表格的边框发生冲突的时候,其它同其它同none dotted: 点划线、点划线、dashed: 虚线、虚线、solid: 实线实线 、do

25、uble: 双线双线 、groove: 槽状槽状 ridge: 脊状脊状,和和groove相反、相反、inset: 凹陷、凹陷、outset:凸出凸出,和和inset相反。相反。6. DIV+CSS6. DIV+CSS对页面布局的优势对页面布局的优势v采用DIV+CSS模式的网站具有以下优势：v表现和内容相分离v代码简洁，提高页面浏览速度v易于维护和改版v提高搜索引擎对网页的索引效率7.“7.“无意义的无意义的HTMLHTML元素元素divdiv和和spanspanvHTML只是赋予内容的手段，大部分HTML标签都有其意义例如，标签p创建段落，h1标签创建标题等等的，然而div和span标签似

26、乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用v它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而divdivision元素是块级的简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div

27、便于建立不同集成的类。vdiv的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。8. W3C8. W3C盒子模型盒子模型v每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度width和高度height），盒子里面的内容到盒子的边框之间的距离即填充padding），盒子本身有边框border），而盒子边框外和其他盒子之间，还有边界margin）。声明盒子模型的CSS属性属性描述margin是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比或者auto，百

28、分比值参考上级元素的宽度，允许使用负边界值。还可以使用margin-top/margin-right/margin-bottom/margin-leftpadding用于设置区域的内边距属性，是边框和元素内容之间的间隔距离。可以使用：padding-top/padding-right/padding-bottom/padding-left border边框属性用于设置一个元素边框风格、边框风格、边框颜色、可以一起设置4边的边框，也可对上边框、有边框、下边框和右边框进行单独设置，详见上一次的课件内容。width层的宽度，可以为一个长度或“auto”值，不允许使用负值height层的高度，可以为一

29、个长度或“auto”值，不允许使用负值 盒子模型 #box /* ID为box的盒子模型 */ width:200px; /* 盒子的宽度为200px */ height:200px; /* 盒子的高度为200px */ border:5px solid #ccc; /* 盒子边框实线各边宽5px */ padding:10px; /* 盒子的4个内填充为10px */ margin:20px; /* 盒子的4个外边距为10px */ 内容区 9. 9. 和页面布局有关的和页面布局有关的CSSCSS属性属性属 性描 述top层距离顶点纵坐标的距离left层距离顶点横坐标的距离text-alig

30、n横向排列，可以使用left(左对齐)、right(右对齐)和center局中line-height指定行高，内容都是在行的中间，所以可以使用这个属性设置内容垂直居中。这个属性接受一个控制文本基线之间的间隔值，可以是数字，表示字体大小乘以该数所得。也可以使用百分比属 性描 述padding用于设置区块的内边距属性，是边框和元素内容之间的间隔距离。与margin属性相返，但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写float设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的

31、周围，可以使用左漂浮left值，右漂浮right值clear清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值1010、使用盒子模型的浮动布局、使用盒子模型的浮动布局 虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。10.1 设置浮动10.2 10.2 行框和清理行框和清理在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上