CSS所有的选择器类型总结.ppt

1、CSS所有的选择器类型总结,复合选择器的优先级计算,复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是ID选择器类选择器标记选择器，那么不妨设ID选择器的优先级是100，类选择器的优先级是10，标记选择器的优先级是1，那么复合选择器的优先级就是组成它的各个基本选择器优先级值的和。例如： h1color:red; /* 特殊性=1 */ p emcolor:blue; /* 特殊性=2 */ .warningcolor:yellow; /* 特殊性=10 */ p.note em.darkcolor:gray; /* 特殊性=22 */ #maincolor:bl

2、ack; /* 特殊性=100 */,复合选择器的优先级例题, #aa ul li color:red .aa color:blue web标准常见问题大全之复合选择器的优先级 ,由于#aa ul li的特殊性为102，而.aa的特殊性为10，所以将应用#aa ul li定义的规则，文字为红色，如果希望文字颜色为蓝色，可提高.aa的特殊性，如#aa ul li.aa。,所以综合来说，元素应用CSS样式的优先级应为 在ie中div.red的优先级大于div .red,复杂选择器名称的分解,如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减

3、一样，CSS选择器分解的原则是：先逗号，接着空格。例如： #menu a.class :hover b, .special b.class 就可先分解为： （#menu a.class :hover b），（.special b.class） 这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。,CSS样式的总体设计原则,定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的包含选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。 例如

4、导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menu a）就可以选中导航条内的各个a标记了。,CSS样式的总体设计原则2,对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。,CSS属性的值和单位,CSS属性的值和html属性值的比较,font-size:12px 值是对属性的具体描述，而单位是值的基础。没有单位

5、，浏览器将不知道一个边框是10厘米还是10象素。CSS中较复杂的值和单位有颜色取值和长度单位。 注意：HTML的属性的值一般不要写单位，这是因为html属性的取值可用的单位很少，要么是象素，要么是百分比 ,CSS长度单位,为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。 绝对单位 绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会根据显示面积按比例调整大小。所以绝对单位很

6、少用。,相对单位,顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。 有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和象素（px）。 em就是元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。 px(像素)：象素指显示器按分辨率分割得到的小点，因为显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于使用象素作为单位。,

7、百分比,百分比显得非常简单，也可看成是一个相对量。如： tdfont-size:12px; line-height: 160%; /*设定段落的行高为字体高度的160% */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */,颜色的值,CSS中定义颜色的值可使用命名颜色、RGB颜色和16进制颜色三种方法 a. 命名颜色： pcolor: red; 其中“red”就是命名颜色，能够被CSS识别的颜色名大约有140种。（参看CSS样式表中文手册附录）。,b. RGB颜色： 显示器的成像原理是红、绿、蓝三色光的叠加形成各种各样的色彩，因此，通过设定RGB三色的值来描述颜色也

8、是最直接的方法。格式如下所示： td color: rgb(139,31,185); td color: rgb(12%,201,50%); 其值可以取0255之间的整数，也可以是0%100%的百分数，不过Firefox浏览器不支持百分数值。,c. 16进制颜色16进制颜色的使用最普遍，其原理同样是RGB色，不过将RGB颜色的数值转换成了16进制的数字，并用更加简单的方式写出来#RRGGBB，如#ffcc33。 其参数取值范围为：00FF（对应十进制仍为0255），如果每个参数各自在两位上的数值相同，那么该值也可缩写成“#RGB”的方式。例如，#ffcc33可以缩写为#fc3。,CSS的滤镜属

9、性简介,CSS的滤镜,CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器中IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。,CSS的滤镜,滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。但滤镜属性只被IE6和IE7支持，由于不符合CSS标准，所以Firefox和IE8不支持。,CSS滤镜的用法,CSS滤镜的

10、标识符是“filter”，总体上跟其它CSS语句一样，都十分简单： filter:filtername(parameters); alpha .alpha /*类选择器*/filter:alpha(opacity=50); 滤镜属性可分为无参滤镜和有参滤镜,CSS滤镜属性的分类,无参滤镜 Gray：使对象产生灰度图效果，仅对图像有作用。 Invert：使对象产生“底片”效果。 Xray：使对象产生“X光片”效果。 FlipH：使对象产生水平翻转效果。 FlipV：使对象产生垂直翻转效果。 Light：使对象产生一种模拟光源的投射效果,有参滤镜 Alpha：设置对象的透明度。 Blur：使对象产

11、生模糊效果。 Dropshadow：设置对象的阴影效果。 Chroma：将对象中指定的颜色设置为透明色。 Glow：在对象的边缘产生类似发光的效果。 BlendTrans：设置对象的淡入淡出效果。 RevealTrans：设置对象之间的切换效果,滤镜的应用,使网页变黑白 由于gray滤镜只能使图像变黑白，要使网页整体变黑白需对html标记使用如下滤镜代码： html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); ,滤镜的应用,用Alpha属性制作渐变的hr分隔条hr filter: Alpha(opacity

12、=10%, FinishOpacity=100%, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=8);color: #FF0033; ,滤镜的应用,设置网页之间的切换效果。,CSS的盒子模型,CSS的盒子模型,盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。,CSS的盒子模型,CSS的盒子模型,每个HTML元素都可以看作是一个装了东西的

13、盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子,元素盒子大小的计算,一个元素实际宽度=左边界左边框左填充内容宽度右填充右边框右边界,CSS盒子模型计算题,如果盒子里面嵌套有盒子，那么两个盒子边框之间的距离等于外面盒子的填充值里面盒子的边框值, #box1 background-color: #ddd;margin:15px;padding:5px; #box2 color: black;background-c

14、olor: #aaa;margin: 20px;padding: 10px 0px 10px 10px;width:100px;,bodyborder:1px dotted #FF0000这是里面的盒子 ,盒子模型的特性,边界值margin可为负，填充padding不可为负 边框border默认值为0，即不显示 行内元素，如a，定义上下边界不影响行高,对盒子模型的思考,边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响 盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值bord

15、er,属性值的简写形式,方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。,各种元素盒子属性的默认值,大部分html元素的盒子属性(margin, padding)默认值都为0； 有少数html元素的(margin, padding)浏览器默认值不为0，例如：body，p，ul，li，form标记等，因此我们有时有必要先设置

16、它们的这些属性为0。 Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。,用盒子美化表格,让表格的外边框为2象素 首先用间距制作1像素边框的表格，然后用css为table元素加一个1象素宽的border制作1象素虚线边框 首先将表格的边框和间距设为0，然后设置table的CSS上边框和左边框为1象素虚线，再设置td的css下边框和右边框为1象素虚线,用盒子美化表单,举例,盒子的定位,盒子的三种定位形式,在标准流下的定位 在浮动属性下的定位 在定位属性下的定位,标准流,HTML元素在标准状况下的定位方式 行内元素在同一行内横向排列 块级元素占满整个一行，在页面

17、中竖向排列 元素不会移动到其它地方去，各元素的盒子之间不会发生重叠，对于嵌套的元素盒子也是嵌套的关系,标准流下的盒子排列分析, * border: 2px dashed #FF0066; padding: 10px; margin: 2px; 网页的banner（块级元素） 行内元素1行内2 行内3 这是无名块这是盒子中的盒子,display属性,通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示 display:block | inline | none | list,盒子在标准流中的定位原则,实验1行内元素之间的水平margin span.leftmargin-r

18、ight:30px;background-color:#a9d6ff; span.rightmargin-left:40px;background-color:#eeb0b0; ,行内元素之间的水平margin,第3课 深入理解盒子模型,盒子在标准流中的定位原则 实验2块级元素之间的竖直margin 块元素1块元素2 ,块元素1,块元素2,块元素1,块元素2,margin-bottom:50px,margin-top:30px,margin-bottom:50px,盒子在标准流中的定位原则 实验3嵌套盒子之间的margin,背景的应用,CSS的背景属性,背景（background）是网页中常用

19、的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。 而CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。 CSS的背景属性是backgroud或以

20、backgroud开头,各个背景属性的默认值,background-color: transparent 透明模式 background-image: none background-repeat: repeat background-attachment: scroll background-position: 0% 0%,background属性的缩写,background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为： background: background-color | background-image | background-repeat | backgr

21、ound-attachment | background-position 如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;,DW中的背景设置面板,作业,自己建一个css文件，完成下列样式的定义 （1）h1：红色，字体大小12px，bold。 （2）#f3: 幼圆，水平居中，字符间距：10px，下划线。 （3）.s1:绿色，段落行距：8px，首行缩进：25px。 在html中调用这个css文件中的这三个样式,本次实验任务,用标记选择器将网页中所有文字调整成12PX大小 用类选择器 .title将栏目框的标题文字调整成14PX，红色。 用伪类选择器将导航条调整为链接的hover状态文字变色，加下划线 用后代选择器将友情链接中的链接行距调整为150 用Li.style1 A将常用下载里的链接调整为紫色字,