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

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