1、CSS的层叠性,CSS的层叠性,CSS具有两个特性：层叠性和继承性。 层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是： 1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：,CSS的层叠性未冲突, p /* 标记选择器 */ color:blue; font-size:18px; .special /* 类别选择器 */ font-weight: bold; /* 粗体 */ #underline text-decoration: underline; /* 有下划线 */标记选择器1标记选择器2 受到
2、标记、类两种选择器作用 受到标记、类和id三种选择器作用,CSS的层叠性发生冲突,2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为： 行内样式 ID样式 类别样式 标记样式。总的原则是：越特殊的样式，优先级越高。如：,选择器的优先级, p /* 标记选择器 */ color:blue; font-style: italic; .green /* 类选择器 */ color:green; .purple color:purple; #red /* ID选择器 */ color:red; , 这是第1行文本 这
3、是第2行文本 这是第3行文本 这是第4行文本 这是第5行文本 ,!important的用途,可以通过!important强制改变选择器的优先级，则优先级为!important 行内样式 ID样式 类别样式 标记样式另外，如果在同一个选择器中定义了两条相冲突的规则，则以后一条为准。如果为某一条添加了!important，那么IE6总是以后一条为准，不认!important 。而Firefox/IE7以定义了!important的为准 #box color:red!important; /*Firefox执行这一条*/color:blue; /*IE6执行这一条*/,CSS的继承性,CSS的继承性
4、,CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：, body text-align: center; p font-size: 24px; text-decoration: underline; em color: #FF0000; .right text-align: right; , 电子商务教研室 电子商务教研室,继承关系树型图(DOM),继承性习题, Web标准教室欢迎来到Web标准教室，这里为您提供丰富学习内容。 在这里，你可以学习到
5、：HTMLCSS CSS初级 CSS中级CSS高级Javascript你还可以学习到：Flash Dreamweaver Photoshop如果您有任何问题，欢迎联系我们, h1color:blue; /* 蓝色 */text-decoration:underline; /* 下划线 */ em color:red; /* 红色 */ li li color:green; font-weight:bold; ,要善于利用CSS继承性,CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复
6、杂的情况下。 例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12像素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。,并不是所有的CSS属性都具有继承性,需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。 具有继承性的属性：color, font-类，text-indent, text-align, text-decoration, line
7、-height, letter-spacing, border-collapse等 无继承性的属性：text-decoration:none, 所有背景属性，所有盒子属性,布局属性等,选择器的组合,选择器的组合,每个选择器都有它的作用范围，前面介绍了三种基本的选择器，它们的作用范围都是一个单独的集合， 如标记选择器的作用范围是具有该标记的所有元素的集合，类选择器的作用范围是自定义的某一类元素的集合，有时我们希望对几种选择器的作用范围取交集、并集、子集后对选中的元素再定义样式，这时就要用到复合选择器了，它是通过对几种基本选择器的组合，实现更强、更方便的选择功能。,复合选择器,复合选择器就是两个或
8、多个基本选择器，通过不同方式组合而成的选择器。主要有: 交集选择器 并集选择器 后代选择器,1 交集选择器,交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。例如：h1.class；p#intro。这两个选择器之间不能有空格。,交集选择器的作用范围,交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的类别或id的元素。它的作用范围如图所示：,h1 h1.class,.class,交集选择器举例,例如由于所有的表单控件都是input标记，如果设置input标记选择器的样式，那么
9、所有的表单控件都会受影响，如果只希望某个表单控件（如提交按钮）受影响，则可用交集选择器input.red input.red color: #FF0000;对于上例IE7、Firefox还支持属性选择器 可不创建red类，直接写inputtype=submit,2 并集选择器,所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“,”隔开。如果某些选择器定义的样式完全相同，或者部分相同，这时便可以利用并集选择器同时声明风格完全相同或部分相同的样式。如h2,.class其选择范围如图所示：,h2,.class,h2,.class,并集选择器举例, h1,h2,h3,p font-size
10、: 12px; color: purple; h2.special, .special, #one text-decoration: underline;示例文字h1 示例文字h2 示例文字h3 示例文字h4 示例文字p1,通配选择符,如果要对网页中所有的元素进行集体声明可使用通配选择符 * * /* 全局声明 */color:purple; /* 文字颜色 */font-size:15px; /* 字体大小 */ h2.special, .special, #one /* 集体声明 */text-decoration:underline; /* 下划线 */ 见示例,3 后代选择器,在CSS
11、选择器中，还可以通过嵌套的方式，对特殊位置的html元素进行控制，例如当与之间包含元素时，就可以使用包含选择器选中出现在a元素中的b元素。包含选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。其选择范围如图所示：,a,a b, a font-size: 16px; color: red; a b color: mediumpurple; 这是b标记中的文字 这是a标记中的b标记,后代选择器,和其他所有CSS选择器一样，后代选择器定义的具有继承性的样式同样也能被其子元素继承。例如在上例中，b元素内又包含了span元素，那么span元素也将显示为淡紫色。这说明子元素（span
12、）继承了父元素（a b）的颜色样式,后代选择器举例,后代选择器的使用非常广泛，实际上不仅标记选择器可以用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且后代选择器还能够进行多层嵌套。例如： .special b color : red #menu li padding : 0 6px ; td.top .ban1 strong font-size : 16px ; #menu a:hover b 经验：选择器的嵌套在CSS的编写中可以大大减少对class或id的声明。因此在构建页面html框架时通常只给外层标记（父标记）定义class或id，内层标记（子标记）能通过嵌套表示的则利用这种
13、方式，而不需要再定义新的class或id。,4. 复合选择器的优先级,复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是“ID选择器 类选择器 标记选择器”，所以不妨设ID选择器的优先级权重是100，类选择器的优先级权重是10，标记选择器的优先级权重是1，那么复合选择器的优先级就是组成它的各个选择器权重值的和。 h1color:red; /* 权重=1 */ p emcolor:blue; /* 权重=2 */ .warningcolor:yellow; /* 权重=10 */ p.note em.darkcolor:gray; /* 权重=22 */ #mai
14、ncolor:black; /* 权重=100 */ 当权重值一样时，会采用“层叠原则”，一般后定义的会被应用,复合选择器优先级计算 例题, #aa ul li color:red .aa color:blue web标准常见问题大全之复合选择器的优先级,CSS样式的优先级 总图,复杂选择器名称的分解,如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如： #menu a.class :hover b, .special b.class 就可先分解为： （#menu
15、a.class :hover b），（.special b.class） 这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。,CSS样式的总体设计原则,定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的包含选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。 例如导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以
16、将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menu a）就可以选中导航条内的各个a标记了。,CSS样式的总体设计原则2,对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。,CSS属性的值和单位,CSS属性的值和html属性值的比较,值是对属性的具体描述，而单位是值的基础。没有单位，浏览器将不知道一个边框是10厘米还是10象素。CSS中较复杂的值和单位有颜色取值和长度单位。 注意：HTML的属性的值一般不要写单位，这是因为html属性的取值可用的单位很少，要么是象素，要么是百分
17、比,颜色的值,CSS中定义颜色的值可使用命名颜色、RGB颜色和16进制颜色三种方法 a. 命名颜色： pcolor: red; 其中“red”就是命名颜色，能够被CSS识别的颜色名大约有140种。（参看CSS样式表中文手册附录）。,b. RGB颜色： 显示器的成像原理是红、绿、蓝三色光的叠加形成各种各样的色彩，因此，通过设定RGB三色的值来描述颜色也是最直接的方法。格式如下所示： td color: rgb(139,31,185); td color: rgb(12%,201,50%); 其值可以取0255之间的整数，也可以是0%100%的百分数，不过Firefox浏览器不支持百分数值。,c.
18、 16进制颜色16进制颜色的使用最普遍，其原理同样是RGB色，不过将RGB颜色的数值转换成了16进制的数字，并用更加简单的方式写出来#RRGGBB，如#ffcc33。 其参数取值范围为：00FF（对应十进制仍为0255），如果每个参数各自在两位上的数值相同，那么该值也可缩写成“#RGB”的方式。例如，#ffcc33可以缩写为#fc3。,CSS长度单位,为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。 绝对单位 绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pi
19、ca（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会按显示器的比例去显示。所以绝对单位很少用。,相对单位,顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。 有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和象素（px）。 em就是元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。 象素px：象素指显示器按分辨率分割得到的小点
20、，因为显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于使用象素作为单位。,百分比,百分比显得非常简单，也可看成是一个相对量。如： tdfont-size:12px; line-height: 160%; /*设定段落的行高为字体高度的160% */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */,本次实验任务,用标记选择器将网页中所有文字调整成12PX大小 用类选择器 .title将栏目框的标题文字调整成14PX，红色。 用后代选择器将友情链接中的链接行距调整为150 用Li.style1 A将常用下载里的链接调整为紫
21、色字,CSS的滤镜属性简介,CSS的滤镜,CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器中IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。,CSS的滤镜,滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。但滤镜属性只被IE支持，由于不符合CSS标准，所以Firefox不支持。 注意：滤镜中的透明和阴影效果
22、，在很多非IE浏览器中有一些私有属性，也能实现IE中的滤镜效果 div.transp opacity: 0.6; /* Firefox, */filter: “alpha(opacity=60)“; /* IE 8 支持*/ filter: alpha(opacity=60); /* IE 6-7支持 */,CSS滤镜的用法,CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单： filter:filtername(parameters); alpha .alpha /*类选择器*/filter:alpha(opacity=50); 滤镜属性可分为无参滤镜和有参滤镜,C
23、SS滤镜属性的分类,无参滤镜 Gray：使对象产生灰度图效果，仅对图像有作用。 Invert：使对象产生“底片”效果。 Xray：使对象产生“X光片”效果。 FlipH：使对象产生水平翻转效果。 FlipV：使对象产生垂直翻转效果。 Light：使对象产生一种模拟光源的投射效果,有参滤镜 Alpha：设置对象的透明度。 Blur：使对象产生模糊效果。 Dropshadow：设置对象的阴影效果。 Chroma：将对象中指定的颜色设置为透明色。 Glow：在对象的边缘产生类似发光的效果。 BlendTrans：设置对象的淡入淡出效果。 RevealTrans：设置对象之间的切换效果,滤镜的应用,使网页变黑白 由于gray滤镜只能使图像变黑白，要使网页整体变黑白需对html标记使用如下滤镜代码： html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); ,滤镜的应用,用Alpha属性制作渐变的hr分隔条hr filter: Alpha(opacity=10%, FinishOpacity=100%, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=8);color: #FF0033; ,滤镜的应用,设置网页之间的切换效果。,
