信息与网络管理中心办公室-CSS所有的选择器类型总结ppt课件

1、CSS一切的选择器类型总结一切的选择器类型总结复合选择器的优先级计算复合选择器的优先级计算p复合选择器的优先级比组成它的单个选择器的复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道根本选择器的优先级优先级都要高。我们知道根本选择器的优先级是是ID选择器选择器类选择器类选择器标志选择器，那么无妨标志选择器，那么无妨设设ID选择器的优先级是选择器的优先级是100，类选择器的优先级，类选择器的优先级是是10，标志选择器的优先级是，标志选择器的优先级是1，那么复合选择，那么复合选择器的优先级就是组成它的各个根本选择器优先器的优先级就是组成它的各个根本选择器优先级值的和。例如：级值的和。例

2、如：ph1color:red;/* 特殊性特殊性=1 */pp emcolor:blue; /* 特殊性特殊性=2 */p.warningcolor:yellow; /* 特殊性特殊性=10 */pp.note em.darkcolor:gray; /* 特殊性特殊性=22 */p#maincolor:black; /* 特殊性特殊性=100 */复合选择器的优先级例题复合选择器的优先级例题 #aa ul li color:red.aa color:blueweb规范常见问题大全之规范常见问题大全之复合选复合选择器择器的优先级的优先级由于由于#aa ul li的特殊性为的特殊性为102，而，而

3、.aa的特殊性为的特殊性为10，所以，所以将运用将运用#aa ul li定义的规那么，文字为红色，假设希望定义的规那么，文字为红色，假设希望文字颜色为蓝色，可提高文字颜色为蓝色，可提高.aa的特殊性，如的特殊性，如#aa ul li.aa。p所以综合来说，元素运用所以综合来说，元素运用CSS款式的优先款式的优先级应为级应为 p在在ie中中div.red的优先级大于的优先级大于div .red!important 行内样式行内样式 id选择选择器器类选择类选择器器标记选择标记选择器器继承样继承样式式复合选择器复合选择器复杂选择器称号的分解复杂选择器称号的分解 p假设一个复杂的选择器称号中既有逗号

4、，也有假设一个复杂的选择器称号中既有逗号，也有空格，也有空格，也有.号，和：号，怎样将其分解呢？像号，和：号，怎样将其分解呢？像四那么运算中的先乘除，后加减一样，四那么运算中的先乘除，后加减一样，CSS选选择器分解的原那么是：先逗号，接着空格。例择器分解的原那么是：先逗号，接着空格。例如：如：p#menu a.class :hover b, .special b.class p就可先分解为：就可先分解为：p#menu a.class :hover b，.special b.classp这样就分解成了两个三层包含选择器，其中左这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了

5、类名的边包含选择器的中间是一个定义了类名的a标志标志的伪类选择器。的伪类选择器。 CSS款式的总体设计原那么款式的总体设计原那么 p定义标志选择器最省事，它不需在元素的定义标志选择器最省事，它不需在元素的html标志里添加标志里添加class或或id属性，因此初学者最喜欢定属性，因此初学者最喜欢定义标志选择器或由标志选择器组成的包含选择义标志选择器或由标志选择器组成的包含选择器。但有些标志如器。但有些标志如a标志在网页文档的各部标志在网页文档的各部分都出现得很多，它们在各部分的款式风格往分都出现得很多，它们在各部分的款式风格往往不一样。往不一样。p例如导航条内的例如导航条内的a标志就要求和文档

6、其他地方的标志就要求和文档其他地方的a标志款式不同，我们当然可以将导航条内的各标志款式不同，我们当然可以将导航条内的各个个a标志定义为一个类，但这就要将导航条内的标志定义为一个类，但这就要将导航条内的各个各个a标志都添加一个标志都添加一个class属性，实践上，可以属性，实践上，可以将导航条内将导航条内a标志的父标志如标志的父标志如ul添加一个添加一个id属性属性#menu，然后用包含选择器，然后用包含选择器#menu a就可以选中导航条内的各个就可以选中导航条内的各个a标志了。标志了。CSS款式的总体设计原那么款式的总体设计原那么2p对于几个不同的选择器，假设它们有一些对于几个不同的选择器，

7、假设它们有一些共同的款式声明，就可以先用并集选择器共同的款式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些对它们先集体声明，然后再单独定义某些选择器的特殊款式。选择器的特殊款式。CSS属性的值和单位属性的值和单位 CSS属性的值和属性的值和html属性值的比较属性值的比较 pfont-size:12pxp值是对属性的详细描画，而单位是值的根值是对属性的详细描画，而单位是值的根底。没有单位，阅读器将不知道一个边框底。没有单位，阅读器将不知道一个边框是是10厘米还是厘米还是10象素。象素。CSS中较复杂的值中较复杂的值和单位有颜色取值和长度单位。和单位有颜色取值和长度单位。 p留意

8、：留意：HTML的属性的值普通不要写单位，的属性的值普通不要写单位，这是由于这是由于html属性的取值可用的单位很少，属性的取值可用的单位很少，要么是象素，要么是百分比要么是象素，要么是百分比pCSS长度单位长度单位 p为了正确显示网页中的元素，许多为了正确显示网页中的元素，许多CSS属性都属性都依赖于长度。一切长度都可以为正数或者负数依赖于长度。一切长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。三类：绝对单位、相对单位和百分比。p绝对单位绝对单位p绝对单位很简单，包括英寸绝对单位很简单，包括英寸in、

9、厘米、厘米cm、毫米、毫米mm、磅、磅pt和和picapc。p由于同一个长度在不同的显示器或者一样显示由于同一个长度在不同的显示器或者一样显示器不同的分辨率中显示并不一样，不会根据显器不同的分辨率中显示并不一样，不会根据显示面积按比例调整大小。所以绝对单位很少用。示面积按比例调整大小。所以绝对单位很少用。 相对单位相对单位顾名思义，相对单位的长短取决于某个参照物，顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。如屏幕的分辨率，字体高度等。有有3种相对长度单位，元素的字体高度种相对长度单位，元素的字体高度em、字、字母母x的高度的高度ex和象素和象素px。em就是元素原来给

10、定的字体就是元素原来给定的字体font-size的值，假设的值，假设元素原来给定的元素原来给定的font-size值是值是14px，那么，那么1em就是就是14px。ex是以字体中小写是以字体中小写x字母为基准的单位，不字母为基准的单位，不同的字体有不同的同的字体有不同的x高度，因此即使高度，因此即使font-size一样一样而字体不同的话，而字体不同的话，1ex的高度也会不同。的高度也会不同。px(像素像素)：象素指显示器按分辨率分割得到的小点，：象素指显示器按分辨率分割得到的小点，由于显示器由于分辨率或大小不同，象素点的大由于显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相

11、对单位。目前大多小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于运用象素作为单位。数设计者都倾向于运用象素作为单位。百分比百分比p百分比显得非常简单，也可看成是一个相百分比显得非常简单，也可看成是一个相对量。如：对量。如：ptdfont-size:12px; line-height: 160%; /*设定段落的行高为字体高度的设定段落的行高为字体高度的160% */phr width: 80% /* 线段长度是相线段长度是相对于阅读器窗口的对于阅读器窗口的80% */颜色的值颜色的值 pCSS中定义颜色的值可运用命名颜色、中定义颜色的值可运用命名颜色、RGB颜颜色和色和16进制颜色三

12、种方法进制颜色三种方法pa. 命名颜色：命名颜色：ppcolor: red; p其中其中“red就是命名颜色，可以被就是命名颜色，可以被CSS识别的识别的颜色名大约有颜色名大约有140种。参看种。参看CSS款式表中文手款式表中文手册附录。册附录。pb. RGB颜色：颜色：p显示器的成像原理是红、绿、蓝三色光的显示器的成像原理是红、绿、蓝三色光的叠加构成各种各样的颜色，因此，经过设定叠加构成各种各样的颜色，因此，经过设定RGB三色的值来描画颜色也是最直接的方法。三色的值来描画颜色也是最直接的方法。格式如下所示：格式如下所示：ptd color: rgb(,31,185); ptd color:

13、rgb(12%,201,50%); p其值可以取其值可以取0255之间的整数，也可以是之间的整数，也可以是0%100%的百分数，不过的百分数，不过Firefox阅读器不阅读器不支持百分数值。支持百分数值。pc. 16进制颜色进制颜色p 16进制颜色的运用最普遍，其原理同样是进制颜色的运用最普遍，其原理同样是RGB色，不过将色，不过将RGB颜色的数值转换成了颜色的数值转换成了16进进制的数字，并用更加简单的方式写出来制的数字，并用更加简单的方式写出来#RRGGBB，如，如#ffcc33。p其参数取值范围为：其参数取值范围为：00FF对应十进制仍为对应十进制仍为0255，假设每个参数各自在两位上的

14、数值，假设每个参数各自在两位上的数值一样，那么该值也可缩写成一样，那么该值也可缩写成“#RGB的方式。的方式。例如，例如，#ffcc33可以缩写为可以缩写为#fc3。CSS的滤镜属性简介的滤镜属性简介 CSS的滤镜的滤镜pCSS滤镜并不是阅读器的插件，也不符合滤镜并不是阅读器的插件，也不符合CSS规范，而是微软公司为加强阅读器功规范，而是微软公司为加强阅读器功能而特意开发的并整合在能而特意开发的并整合在IE阅读器中的一阅读器中的一类功能的集合。由于阅读器中类功能的集合。由于阅读器中IE有着很广有着很广的运用范围，因此的运用范围，因此CSS滤镜也被宽广设计滤镜也被宽广设计者所喜欢。者所喜欢。CS

15、S的滤镜的滤镜p滤镜滤镜(filter)属性是属性是CSS的一个扩展部分，的一个扩展部分，它可以渲染对象元素，创建出艺术效果。它可以渲染对象元素，创建出艺术效果。Dreamweaver的的CSS款式提供了丰富的滤款式提供了丰富的滤镜效果，运用这些滤镜可以创建出文本和镜效果，运用这些滤镜可以创建出文本和图像的图像的3D、阴影和淡入淡出等效果，运、阴影和淡入淡出等效果，运用在页面中，在一定程度上美化了页面。用在页面中，在一定程度上美化了页面。但滤镜属性只被但滤镜属性只被IE6和和IE7支持，由于不符支持，由于不符合合CSS规范，所以规范，所以Firefox和和IE8不支持。不支持。CSS滤镜的用法

16、滤镜的用法pCSS滤镜的标识符是滤镜的标识符是“filter，总体上跟，总体上跟其它其它CSS语句一样，都非常简单：语句一样，都非常简单：pfilter:filtername(parameters); palphap.alpha /*类选择器类选择器*/pfilter:alpha(opacity=50);pp滤镜属性可分为无参滤镜和有参滤镜滤镜属性可分为无参滤镜和有参滤镜CSS滤镜属性的分类滤镜属性的分类无参滤镜无参滤镜Gray：使对象产生灰度图：使对象产生灰度图效果，仅对图像有作用。效果，仅对图像有作用。Invert：使对象产生：使对象产生“底片底片效果。效果。Xray：使对象产生：使对象产

17、生“X光片光片效果。效果。FlipH：使对象产生程度翻：使对象产生程度翻转效果。转效果。FlipV：使对象产生垂直翻：使对象产生垂直翻转效果。转效果。Light：使对象产生一种模：使对象产生一种模拟光源的投射效果拟光源的投射效果 有参滤镜有参滤镜Alpha：设置对象的透明度。：设置对象的透明度。Blur：使对象产生模糊效：使对象产生模糊效果。果。Dropshadow：设置对象的：设置对象的阴影效果。阴影效果。Chroma：将对象中指定的：将对象中指定的颜色设置为透明色。颜色设置为透明色。Glow：在对象的边缘产生：在对象的边缘产生类似发光的效果。类似发光的效果。BlendTrans：设置对象的

18、：设置对象的淡入淡出效果。淡入淡出效果。RevealTrans：设置对象之：设置对象之间的切换效果间的切换效果 滤镜的运用滤镜的运用p使网页变黑白使网页变黑白p由于由于gray滤镜只能使图像变黑白，要使网滤镜只能使图像变黑白，要使网页整体变黑白需对页整体变黑白需对html标志运用如下滤镜标志运用如下滤镜代码：代码：phtml filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 滤镜的运用滤镜的运用p用用Alpha属性制造渐变的属性制造渐变的hr分隔条分隔条phr pfilter: Alpha(opacity=10%

19、, FinishOpacity=100%, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=8);pcolor: #FF0033; 滤镜的运用滤镜的运用设置网页之间的切换效果。设置网页之间的切换效果。 CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型p盒子模型是盒子模型是CSS的基石之一，它指定元素的基石之一，它指定元素如何显示以及在某种程度上如何相互如何显示以及在某种程度上如何相互交互交互p页面上的每个元素都被阅读器看成是一个页面上的每个元素都被阅读器看成是一个矩形的盒子，这个盒子由元素的内容、填矩形的盒子，这个盒子由元素的内容、填充、

20、边框和边境组成。充、边框和边境组成。p网页就是由许多个盒子经过不同的陈列方网页就是由许多个盒子经过不同的陈列方式上下陈列，并列陈列，嵌套陈列堆式上下陈列，并列陈列，嵌套陈列堆积而成。积而成。 CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型p每个每个HTML元素都可以看作是一个装了东元素都可以看作是一个装了东西的盒子西的盒子p盒子里面的内容到盒子的边框之间的间隔盒子里面的内容到盒子的边框之间的间隔即填充即填充(padding),盒子本身有边框盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边境而盒子边框外和其它盒子之间，还有边境(magin),如下图如下图p默许情况下盒子的

21、边框是无，背风光是透默许情况下盒子的边框是无，背风光是透明，所以我们在默许情况下看不到盒子明，所以我们在默许情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算元素盒子大小的计算一个元素实践宽度一个元素实践宽度=左边境左边框左填左边境左边框左填充内容宽度右填充右边框右边境充内容宽度右填充右边框右边

22、境CSS盒子模型计算题盒子模型计算题p假设盒子里面嵌套有盒子，那么两个盒子假设盒子里面嵌套有盒子，那么两个盒子边框之间的间隔等于外面盒子的填充值边框之间的间隔等于外面盒子的填充值里面盒子的边框值里面盒子的边框值#box1 background-color: #ddd;margin:15px;padding:5px; #box2 color: black;background-color: #aaa;margin: 20px;padding: 10px 0px 10px 10px;width:100px;bodyborder:1px dotted #FF0000这是里面这是里面的盒子的盒子盒子模

23、型的特性盒子模型的特性p边境值边境值margin可为负，填充可为负，填充padding不可不可为负为负p边框边框border默许值为默许值为0，即不显示，即不显示p行内元素，如行内元素，如a，定义上下边境不影响行，定义上下边境不影响行高高对盒子模型的思索对盒子模型的思索p边框是实的，我们可以看到实真实在的边边框是实的，我们可以看到实真实在的边框，而填充和边境都是虚的，我们只能看框，而填充和边境都是虚的，我们只能看到他们对元素的影响到他们对元素的影响p盒子模型中只能设置两类颜色，即边框颜盒子模型中只能设置两类颜色，即边框颜色和背景颜色色和背景颜色p盒子模型可设置三类间隔，即边境间隔盒子模型可设置

24、三类间隔，即边境间隔margin，填充间隔，填充间隔padding和边框值和边框值border属性值的简写方式属性值的简写方式 p方法是按照规定的顺序，给出方法是按照规定的顺序，给出2个、个、3个或者个或者4个个属性值，它们的含义将有所区别，详细含义如属性值，它们的含义将有所区别，详细含义如下：下：p假设给出假设给出2个属性值，前者表示上下边框的属性，个属性值，前者表示上下边框的属性，后者表示左右边框的属性；后者表示左右边框的属性；p假设给出假设给出3个属性值，前者表示上边框的属性，个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下中间的数值表示左右边框的属性，后者表示下

25、边框的属性；边框的属性；p假设给出假设给出4个属性值，依次表示上、右、下、左个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。边框的属性，即顺时针排序。各种元素盒子属性的默许值各种元素盒子属性的默许值p大部分大部分html元素的盒子属性元素的盒子属性(margin, padding)默许值都为默许值都为0；p有少数有少数html元素的元素的(margin, padding)阅读阅读器默许值不为器默许值不为0，例如：，例如：body，p，ul，li，form标志等，因此我们有时有必要先设置标志等，因此我们有时有必要先设置它们的这些属性为它们的这些属性为0。pInput元素的边框属性默许不

26、为元素的边框属性默许不为0，我们可，我们可以设置为以设置为0到达美化表单中输入框和按钮到达美化表单中输入框和按钮的目的。的目的。用盒子美化表格用盒子美化表格p让表格的外边框为让表格的外边框为2象素象素p首先用间距制造首先用间距制造1像素边框的表格，然后像素边框的表格，然后用用css为为table元素加一个元素加一个1象素宽的象素宽的borderp制造制造1象素虚线边框象素虚线边框p首先将表格的边框和间距设为首先将表格的边框和间距设为0，然后设，然后设置置table的的CSS上边框和左边框为上边框和左边框为1象素虚象素虚线，再设置线，再设置td的的css下边框和右边框为下边框和右边框为1象象素虚

27、线素虚线用盒子美化表单用盒子美化表单p举例举例盒子的定位盒子的定位盒子的三种定位方式盒子的三种定位方式p在规范流下的定位在规范流下的定位p在浮动属性下的定位在浮动属性下的定位p在定位属性下的定位在定位属性下的定位规范流规范流pHTML元素在规范情况下的定位方式元素在规范情况下的定位方式p行内元素在同一行内横向陈列行内元素在同一行内横向陈列p块级元素占满整个一行，在页面中竖向陈块级元素占满整个一行，在页面中竖向陈列列p元素不会挪动到其它地方去，各元素的盒元素不会挪动到其它地方去，各元素的盒子之间不会发生重叠，对于嵌套的元素盒子之间不会发生重叠，对于嵌套的元素盒子也是嵌套的关系子也是嵌套的关系规范

28、流下的盒子陈列分析规范流下的盒子陈列分析* border: 2px dashed #FF0066;padding: 10px;margin: 2px;网页的网页的banner块级元素块级元素行内元素行内元素1行内行内2行内行内3这是无名块这是无名块这是盒子中的盒子这是盒子中的盒子display属性属性p经过经过display属性可控制元素是以行内元素属性可控制元素是以行内元素显示还是以块级元素显示，或不显示显示还是以块级元素显示，或不显示pdisplay:block | inline | none | list盒子在规范流中的定位原那么盒子在规范流中的定位原那么p实验实验1行内元素之间的程度行

29、内元素之间的程度margin pspan.leftpmargin-right:30px;pbackground-color:#a9d6ff;ppspan.rightpmargin-left:40px;pbackground-color:#eeb0b0;p行内元素之间的程度marginspan 2span 1margin-rightmargin-leftp盒子在规范流中的定位原那么盒子在规范流中的定位原那么p实验实验2块级元素之间的竖直块级元素之间的竖直margin pp块块元素元素1p块元块元素素2p块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top:30

30、pxmargin-bottom:50pxp盒子在规范流中的定位原那么盒子在规范流中的定位原那么p实验实验3嵌套盒子之间的嵌套盒子之间的margin p背景的运用背景的运用CSS的背景属性的背景属性p 背景背景background是网页中常用的一种表现方法，无是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，富的视觉效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud属性，可以设置背景颜色和背景图片，如属性，可以设置背景颜色和背景图片，如table、td等，但方式比较单一，对背景图片的设定，等，但方式比较单一，对背景图片的设定，只支持在只支持在X轴和轴和Y轴都平铺的方式，因此，假好像时设轴都平铺的方式，因此，假好像时设置了背景颜色和背景图片，那么背景颜色将被背景图片置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。挡住，以背景图片来显示。p 而而CSS对元素的背景设置，那么提供了更多的途径，如对元素的背景设置，那么提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在背景图片既可以平铺也可以不平铺，还可以在X轴平铺轴平铺或在或在Y轴平铺，当背景图片不平铺时，并不会完全挡住轴平铺，当背景图片不