《信息与网络管理中心办公室CSS所有的选择器类型总结ppt课件》由会员分享，可在线阅读，更多相关《信息与网络管理中心办公室CSS所有的选择器类型总结ppt课件（54页珍藏版）》请在金锄头文库上搜索。
1、CSS一切的选择器类型总结一切的选择器类型总结复合选择器的优先级计算复合选择器的优先级计算p复合复合选择器的器的优先先级比比组成它的成它的单个个选择器的器的优先先级都要高。我都要高。我们知道根本知道根本选择器的器的优先先级是是ID选择器器类选择器器标志志选择器，那么无妨器，那么无妨设ID选择器的器的优先先级是是100，类选择器的器的优先先级是是10，标志志选择器的器的优先先级是是1，那么复合，那么复合选择器器的的优先先级就是就是组成它的各个根本成它的各个根本选择器器优先先级值的和。例如：的和。例如：ph1color:red;/*特殊性特殊性=1*/ppemcolor:blue;/*特殊性特殊性
2、=2*/p.warningcolor:yellow;/*特殊性特殊性=10*/pp.noteem.darkcolor:gray;/*特殊性特殊性=22*/p#maincolor:black;/*特殊性特殊性=100*/复合选择器的优先级例题复合选择器的优先级例题#aaullicolor:red.aa color:blueweb规范常见问题大全之规范常见问题大全之复合选复合选择器择器的优先级的优先级由于由于#aaulli的特殊性的特殊性为102，而，而.aa的特殊性的特殊性为10，所，所以将运用以将运用#aaulli定定义的的规那么，文字那么，文字为红色，假色，假设希希望文字望文字颜色色为蓝色，
3、可提高色，可提高.aa的特殊性，如的特殊性，如#aaulli.aa。p所以综合来说，元素运用所以综合来说，元素运用CSS款式的优先款式的优先级应为级应为p在在ie中中div.red的优先级大于的优先级大于div.red!important 行内行内样式式 id选择器器类选择器器标记选择器器继承承样式式复合复合选择器器复杂选择器称号的分解复杂选择器称号的分解p假假设一个复一个复杂的的选择器称号中既有逗号，也有器称号中既有逗号，也有空格，也有空格，也有.号，和：号，怎号，和：号，怎样将其分解呢？像将其分解呢？像四那么运算中的先乘除，后加减一四那么运算中的先乘除，后加减一样，CSS选择器分解的原那么
4、是：先逗号，接着空格。例器分解的原那么是：先逗号，接着空格。例如：如：p#menua.class:hoverb,.specialb.classp就可先分解就可先分解为：p#menua.class:hoverb，.specialb.classp这样就分解成了两个三就分解成了两个三层包含包含选择器，其中左器，其中左边包含包含选择器的中器的中间是一个定是一个定义了了类名的名的a标志志的的伪类选择器。器。CSS款式的总体设计原那么款式的总体设计原那么p定定义标志志选择器最省事，它不需在元素的器最省事，它不需在元素的html标志里添加志里添加class或或id属性，因此初学者最喜属性，因此初学者最喜欢定
5、定义标志志选择器或由器或由标志志选择器器组成的包含成的包含选择器。器。但有些但有些标志如志如a标志在网志在网页文档的各部分都文档的各部分都出出现得很多，它得很多，它们在各部分的款式在各部分的款式风格往往不一格往往不一样。p例如例如导航条内的航条内的a标志就要求和文档其他地方的志就要求和文档其他地方的a标志款式不同，我志款式不同，我们当然可以将当然可以将导航条内的各航条内的各个个a标志定志定义为一个一个类，但，但这就要将就要将导航条内的航条内的各个各个a标志都添加一个志都添加一个class属性，属性，实践上，可以践上，可以将将导航条内航条内a标志的父志的父标志如志如ul添加一个添加一个id属性属
6、性#menu，然后用包含，然后用包含选择器器#menua就可以就可以选中中导航条内的各个航条内的各个a标志了。志了。CSS款式的总体设计原那么款式的总体设计原那么2p对于几个不同的选择器，假设它们有一些对于几个不同的选择器，假设它们有一些共同的款式声明，就可以先用并集选择器共同的款式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些对它们先集体声明，然后再单独定义某些选择器的特殊款式。选择器的特殊款式。CSS属性的值和单位属性的值和单位CSS属性的值和属性的值和html属性值的比较属性值的比较pfont-size:12pxp值是是对属性的属性的详细描画，而描画，而单位是位是值的根的
7、根底。没有底。没有单位，位，阅读器将不知道一个器将不知道一个边框框是是10厘米厘米还是是10象素。象素。CSS中中较复复杂的的值和和单位有位有颜色取色取值和和长度度单位。位。p留意：留意：HTML的属性的的属性的值普通不要写普通不要写单位，位，这是由于是由于html属性的取属性的取值可用的可用的单位很少，位很少，要么是象素，要么是百分比要么是象素，要么是百分比pCSS长度单位长度单位p为了正确了正确显示网示网页中的元素，中的元素，许多多CSS属性都依属性都依赖于于长度。一切度。一切长度都可以度都可以为正数或者正数或者负数加数加上一个上一个单位来表示，而位来表示，而长度度单位大致可分位大致可分为
8、三三类：绝对单位、相位、相对单位和百分比。位和百分比。p绝对单位位p绝对单位很位很简单，包括英寸，包括英寸in、厘米、厘米cm、毫米、毫米mm、磅、磅pt和和picapc。p由于同一个由于同一个长度在不同的度在不同的显示器或者一示器或者一样显示示器不同的分辨率中器不同的分辨率中显示并不一示并不一样，不会根据，不会根据显示面示面积按比例按比例调整大小。所以整大小。所以绝对单位很少用。位很少用。相对单位相对单位顾名思名思义，相，相对单位的位的长短取决于某个参照物，短取决于某个参照物，如屏幕的分辨率，字体高度等。如屏幕的分辨率，字体高度等。有有3种相种相对长度度单位，元素的字体高度位，元素的字体高度
9、em、字、字母母x的高度的高度ex和象素和象素px。em就是元素原来就是元素原来给定的字体定的字体font-size的的值，假，假设元元素原来素原来给定的定的font-size值是是14px，那么，那么1em就是就是14px。ex是以字体中小写是以字体中小写x字母字母为基准的基准的单位，不位，不同的字体有不同的同的字体有不同的x高度，因此即使高度，因此即使font-size一一样而字体不同的而字体不同的话，1ex的高度也会不同。的高度也会不同。px(像素像素)：象素指：象素指显示器按分辨率分割得到的小点，示器按分辨率分割得到的小点，由于由于显示器由于分辨率或大小不同，象素点的大示器由于分辨率或
10、大小不同，象素点的大小是不同的，所以象素也是相小是不同的，所以象素也是相对单位。目前大多位。目前大多数数设计者都者都倾向于运用象素作向于运用象素作为单位。位。百分比百分比p百分比显得非常简单，也可看成是一个相百分比显得非常简单，也可看成是一个相对量。如：对量。如：ptdfont-size:12px;line-height:160%; /*设定段落的行高为字体高度的设定段落的行高为字体高度的160%*/phrwidth:80%/*线段长度是相线段长度是相对于阅读器窗口的对于阅读器窗口的80%*/颜色的值颜色的值pCSS中定中定义颜色的色的值可运用命名可运用命名颜色、色、RGB颜色和色和16进制制
11、颜色三种方法色三种方法pa.命名命名颜色：色：ppcolor:red;p其中其中“red就是命名就是命名颜色，可以被色，可以被CSS识别的的颜色名大色名大约有有140种。参看种。参看CSS款式表中文手款式表中文手册附册附录。pb.RGB颜色：颜色：p显示器的成像原理是红、绿、蓝三色光的显示器的成像原理是红、绿、蓝三色光的叠加构成各种各样的颜色，因此，经过设定叠加构成各种各样的颜色，因此，经过设定RGB三色的值来描画颜色也是最直接的方法。三色的值来描画颜色也是最直接的方法。格式如下所示：格式如下所示：ptdcolor:rgb(,31,185);ptdcolor:rgb(12%,201,50%);
12、p其值可以取其值可以取0255之间的整数，也可以是之间的整数，也可以是0%100%的百分数，不过的百分数，不过Firefox阅读器不支阅读器不支持百分数值。持百分数值。pc.16进制制颜色色p16进制制颜色的运用最普遍，其原理同色的运用最普遍，其原理同样是是RGB色，不色，不过将将RGB颜色的数色的数值转换成了成了16进制的数字，并用更加制的数字，并用更加简单的方式写出来的方式写出来#RRGGBB，如，如#ffcc33。p其参数取其参数取值范范围为：00FF对应十十进制仍制仍为0255，假，假设每个参数各自在两位上的数每个参数各自在两位上的数值一一样，那么，那么该值也可也可缩写成写成“#RGB
13、的方式。例的方式。例如，如，#ffcc33可以可以缩写写为#fc3。CSS的滤镜属性简介的滤镜属性简介CSS的滤镜的滤镜pCSS滤镜并不是阅读器的插件，也不符合滤镜并不是阅读器的插件，也不符合CSS规范，而是微软公司为加强阅读器功规范，而是微软公司为加强阅读器功能而特意开发的并整合在能而特意开发的并整合在IE阅读器中的一阅读器中的一类功能的集合。由于阅读器中类功能的集合。由于阅读器中IE有着很广有着很广的运用范围，因此的运用范围，因此CSS滤镜也被宽广设计滤镜也被宽广设计者所喜欢。者所喜欢。CSS的滤镜的滤镜p滤镜滤镜(filter)属性是属性是CSS的一个扩展部分，的一个扩展部分，它可以渲染
14、对象元素，创建出艺术效果。它可以渲染对象元素，创建出艺术效果。Dreamweaver的的CSS款式提供了丰富的滤款式提供了丰富的滤镜效果，运用这些滤镜可以创建出文本和镜效果，运用这些滤镜可以创建出文本和图像的图像的3D、阴影和淡入淡出等效果，运、阴影和淡入淡出等效果，运用在页面中，在一定程度上美化了页面。用在页面中，在一定程度上美化了页面。但滤镜属性只被但滤镜属性只被IE6和和IE7支持，由于不符支持，由于不符合合CSS规范，所以规范，所以Firefox和和IE8不支持。不支持。CSS滤镜的用法滤镜的用法pCSS滤镜的的标识符是符是“filter，总体上跟体上跟其它其它CSS语句一句一样，都非
15、常，都非常简单：pfilter:filtername(parameters);palphap.alpha/*类选择器器*/pfilter:alpha(opacity=50);pp滤镜属性可分属性可分为无参无参滤镜和有参和有参滤镜CSS滤镜属性的分类滤镜属性的分类无参无参滤镜Gray：使：使对象象产生灰度生灰度图效果，效果，仅对图像有作用。像有作用。Invert：使：使对象象产生生“底片底片效果。效果。Xray：使：使对象象产生生“X光片光片效果。效果。FlipH：使：使对象象产生程度翻生程度翻转效果。效果。FlipV：使：使对象象产生垂直翻生垂直翻转效果。效果。Light：使：使对象象产生一种
16、模生一种模拟光源的投射效果光源的投射效果有参有参滤镜Alpha：设置置对象的透明度。象的透明度。Blur：使：使对象象产生模糊效生模糊效果。果。Dropshadow：设置置对象的象的阴影效果。阴影效果。Chroma：将：将对象中指定的象中指定的颜色色设置置为透明色。透明色。Glow：在：在对象的象的边缘产生生类似似发光的效果。光的效果。BlendTrans：设置置对象的象的淡入淡出效果。淡入淡出效果。RevealTrans：设置置对象之象之间的切的切换效果效果滤镜的运用滤镜的运用1.使网页变黑白使网页变黑白2.由于由于gray滤镜只能使图像变黑白，要滤镜只能使图像变黑白，要使网页整体变黑白需对
17、使网页整体变黑白需对html标志运用如下滤标志运用如下滤镜代码：镜代码：3.htmlfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);滤镜的运用滤镜的运用p用用Alpha属性制造渐变的属性制造渐变的hr分隔条分隔条phrpfilter:Alpha(opacity=10%,FinishOpacity=100%,Style=1,StartX=0,StartY=0,FinishX=500,FinishY=8);pcolor:#FF0033;滤镜的运用滤镜的运用设置网页之间的切换效果。设置网页之间的切换效果。CSS的盒子模
18、型的盒子模型CSS的盒子模型的盒子模型p盒子模型是盒子模型是CSS的基石之一，它指定元素的基石之一，它指定元素如何如何显示以及在某种程度上如何相互示以及在某种程度上如何相互交互交互p页面上的每个元素都被面上的每个元素都被阅读器看成是一个器看成是一个矩形的盒子，矩形的盒子，这个盒子由元素的内容、填个盒子由元素的内容、填充、充、边框和框和边境境组成。成。p网网页就是由就是由许多个盒子多个盒子经过不同的不同的陈列方列方式上下式上下陈列，并列列，并列陈列，嵌套列，嵌套陈列堆列堆积而成。而成。CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型p每个每个HTML元素都可以看作是一个装了元素都可以看作是一
19、个装了东西的盒子西的盒子p盒子里面的内容到盒子的盒子里面的内容到盒子的边框之框之间的的间隔隔即填充即填充(padding),盒子本身有盒子本身有边框框(border),而盒子而盒子边框外和其它盒子之框外和其它盒子之间，还有有边境境(magin),如下如下图p默默许情况下盒子的情况下盒子的边框是无，背框是无，背风光是透光是透明，所以我明，所以我们在默在默许情况下看不到盒子情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmar
20、gin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算元素盒子大小的计算一个元素实践宽度一个元素实践宽度=左边境左边框左填左边境左边框左填充内容宽度右填充右边框右边境充内容宽度右填充右边框右边境CSS盒子模型计算题盒子模型计算题p假设盒子里面嵌套有盒子，那么两个盒子假设盒子里面嵌套有盒子，那么两个盒子边框之间的间隔等于外面盒子的填充值边框之间的间隔等于外面盒子的填充值里面盒子的边框值里面盒子的边框值#box1background-color:#ddd;margin:15px;padding:5px;#box2color:b
21、lack;background-color:#aaa;margin:20px;padding:10px0px10px10px;width:100px;bodyborder:1pxdotted#FF0000这是里面这是里面的盒子的盒子盒子模型的特性盒子模型的特性p边境境值margin可可为负，填充，填充padding不可不可为负p边框框border默默许值为0，即不，即不显示示p行内元素，如行内元素，如a，定，定义上下上下边境不影响行境不影响行高高对盒子模型的思索对盒子模型的思索p边框是框是实的，我的，我们可以看到可以看到实真真实在的在的边框，而填充和框，而填充和边境都是虚的，我境都是虚的，我们
22、只能看只能看到他到他们对元素的影响元素的影响p盒子模型中只能盒子模型中只能设置两置两类颜色，即色，即边框框颜色和背景色和背景颜色色p盒子模型可盒子模型可设置三置三类间隔，即隔，即边境境间隔隔margin，填充，填充间隔隔padding和和边框框值border属性属性值的的简写方式写方式p方法是按照方法是按照规定的定的顺序，序，给出出2个、个、3个或者个或者4个个属性属性值，它，它们的含的含义将有所区将有所区别，详细含含义如如下：下：p假假设给出出2个属性个属性值，前者表示上下，前者表示上下边框的属性，框的属性，后者表示左右后者表示左右边框的属性；框的属性；p假假设给出出3个属性个属性值，前者表
23、示上，前者表示上边框的属性，框的属性，中中间的数的数值表示左右表示左右边框的属性，后者表示下框的属性，后者表示下边框的属性；框的属性；p假假设给出出4个属性个属性值，依次表示上、右、下、左，依次表示上、右、下、左边框的属性，即框的属性，即顺时针排序。排序。各种元素盒子属性的默许值各种元素盒子属性的默许值p大部分大部分html元素的盒子属性元素的盒子属性(margin,padding)默默许值都都为0；p有少数有少数html元素的元素的(margin,padding)阅读器默器默许值不不为0，例如：，例如：body，p，ul，li，form标志等，因此我志等，因此我们有有时有必要先有必要先设置它
24、置它们的的这些属性些属性为0。pInput元素的元素的边框属性默框属性默许不不为0，我，我们可可以以设置置为0到达美化表到达美化表单中中输入框和按入框和按钮的目的。的目的。用盒子美化表格用盒子美化表格p让表格的外表格的外边框框为2象素象素p首先用首先用间距制造距制造1像素像素边框的表格，然后框的表格，然后用用css为table元素加一个元素加一个1象素象素宽的的borderp制造制造1象素虚象素虚线边框框p首先将表格的首先将表格的边框和框和间距距设为0，然后，然后设置置table的的CSS上上边框和左框和左边框框为1象素虚象素虚线，再，再设置置td的的css下下边框和右框和右边框框为1象象素虚
25、素虚线用盒子美化表单用盒子美化表单p举例举例盒子的定位盒子的定位盒子的三种定位方式盒子的三种定位方式p在规范流下的定位在规范流下的定位p在浮动属性下的定位在浮动属性下的定位p在定位属性下的定位在定位属性下的定位规范流规范流pHTML元素在元素在规范情况下的定位方式范情况下的定位方式p行内元素在同一行内横向行内元素在同一行内横向陈列列p块级元素占元素占满整个一行，在整个一行，在页面中面中竖向向陈列列p元素不会挪元素不会挪动到其它地方去，各元素的盒到其它地方去，各元素的盒子之子之间不会不会发生重叠，生重叠，对于嵌套的元素盒于嵌套的元素盒子也是嵌套的关系子也是嵌套的关系规范流下的盒子陈列分析规范流下
26、的盒子陈列分析*border:2pxdashed#FF0066;padding:10px;margin:2px;网页的网页的banner块级元素块级元素行内元素行内元素1行内行内2行内行内3这是无名块这是无名块这是盒子中的盒子这是盒子中的盒子display属性属性p经过经过display属性可控制元素是以行内元素属性可控制元素是以行内元素显示还是以块级元素显示，或不显示显示还是以块级元素显示，或不显示pdisplay:block|inline|none|list盒子在规范流中的定位原那么盒子在规范流中的定位原那么p实验实验1行内元素之行内元素之间间的程度的程度marginpspan.leftp
27、margin-right:30px;pbackground-color:#a9d6ff;ppspan.rightpmargin-left:40px;pbackground-color:#eeb0b0;p行内元素之间的程度marginspan 2span 1margin-rightmargin-left第第3 3课 深化了解盒子模型深化了解盒子模型p盒子在盒子在规范流中的定位原那么范流中的定位原那么p实验2块级元素之元素之间的的竖直直marginpp块元素元素1p块元元素素2p块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top:30pxmargin-bott
28、om:50pxp盒子在盒子在规范流中的定位原那么范流中的定位原那么p实验3嵌套盒子之嵌套盒子之间的的marginp背景的运用背景的运用CSS的背景属性的背景属性p背景背景background是网是网页中常用的一种表中常用的一种表现方法，无方法，无论是是单纯的背景的背景颜色色还是背景是背景图片，都能片，都能为网网页带来丰来丰富的富的视觉效果，效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud属性，可以属性，可以设置背景置背景颜色和背景色和背景图片，如片，如table、td等，但方式比等，但方式比较单一，一，对背景背景图片的片的设定，定，只支持在只支持在X轴和和Y轴
29、都平都平铺的方式，因此，假好像的方式，因此，假好像时设置了背景置了背景颜色和背景色和背景图片，那么背景片，那么背景颜色将被背景色将被背景图片片挡住，以背景住，以背景图片来片来显示。示。p而而CSS对元素的背景元素的背景设置，那么提供了更多的途径，如置，那么提供了更多的途径，如背景背景图片既可以平片既可以平铺也可以不平也可以不平铺，还可以在可以在X轴平平铺或在或在Y轴平平铺，当背景，当背景图片不平片不平铺时，并不会完全，并不会完全挡住住背景背景颜色，因此可以色，因此可以综合合设置背景置背景颜色和背景色和背景图片到达片到达希望的效果。希望的效果。pCSS的背景属性是的背景属性是backgroud或
30、以或以backgroud开开头各个背景属性的默许值各个背景属性的默许值pbackground-color:transparent透明方式透明方式pbackground-image:nonepbackground-repeat:repeatpbackground-attachment:scrollpbackground-position:0%0%background属性的缩写属性的缩写pbackground属性是一切背景属性的属性是一切背景属性的缩写方写方式，就像式，就像font属性一属性一样，其，其缩写写顺序序为：pbackground:background-color|background-
31、image|background-repeat|background-attachment|background-positionp如如bodybackground:#EFF4FFurl(images/body_bg.jpg)repeat-xfixed;DW中的背景设置面板中的背景设置面板作业作业p本人建一个本人建一个css文件，完成以下款式的定文件，完成以下款式的定义义p1h1：红色，字体大小：红色，字体大小12px，bold。p2#f3:幼圆，程度居中，字符间距：幼圆，程度居中，字符间距：10px，下划线。，下划线。p3.s1:绿色，段落行距：绿色，段落行距：8px，首行缩，首行缩进：进：25px。p在在html中调用这个中调用这个css文件中的这三个款文件中的这三个款式式本次实验义务本次实验义务p用标志选择器将网页中一切文字调整成用标志选择器将网页中一切文字调整成12PX大大小小p用类选择器用类选择器.title将栏目框的标题文字调整成将栏目框的标题文字调整成14PX，红色。，红色。p用伪类选择器将导航条调整为链接的用伪类选择器将导航条调整为链接的hover形状形状文字变色，加下划线文字变色，加下划线p用后代选择器将友谊链接中的链接行距调整为用后代选择器将友谊链接中的链接行距调整为150p用用Li.style1A将常用下载里的链接调整为紫色字将常用下载里的链接调整为紫色字
