1 / 67

CSS 的层叠性

CSS 的层叠性. CSS 的层叠性. CSS 具有两个特性：层叠性和继承性。 层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠， CSS 怎样处理？ CSS 的处理原则是： 1 ）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：. CSS 的层叠性－未冲突. <style type="text/css"> p { /* 标记选择器 * / color:blue; font-size:18px;} .special { /* 类别选择器 * /

xander
Download Presentation

CSS 的层叠性

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS的层叠性

  2. CSS的层叠性 • CSS具有两个特性：层叠性和继承性。 • 层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是： • 1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：

  3. CSS的层叠性－未冲突 <style type="text/css"> p{ /* 标记选择器 */ color:blue; font-size:18px;} .special{ /* 类别选择器 */ font-weight: bold; } /* 粗体 */ #underline{ text-decoration: underline; } /* 有下划线 */ </style> <p>标记选择器1</p><p>标记选择器2</p> <p class="special">受到标记、类两种选择器作用</p> <p id="underline" class="special">受到标记、类和id三种选择器作用</p>

  4. CSS的层叠性－发生冲突 • 2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为： • 行内样式> ID样式> 类别样式> 标记样式。总的原则是：越特殊的样式，优先级越高。如：

  5. 选择器的优先级 <style type="text/css"> p{ /* 标记选择器 */ color:blue; font-style: italic; } .green{ /* 类选择器 */ color:green; } .purple{ color:purple; } #red{ /* ID选择器 */ color:red;} </style> <body> <p>这是第1行文本</p> <p class="green">这是第2行文本</p> <p class="green" id="red">这是第3行文本</p> <p id="red" style="color:orange;">这是第4行文本</p> <p class="purple green">这是第5行文本</p> </body>

  6. !important的用途 可以通过!important强制改变选择器的优先级，则优先级为!important >行内样式 > ID样式 > 类别样式 > 标记样式 另外，如果在同一个选择器中定义了两条相冲突的规则，则以后一条为准。如果为某一条添加了!important，那么IE6总是以后一条为准，不认!important。而Firefox/IE7以定义了!important的为准 #box { color:red!important; /*Firefox执行这一条*/ color:blue;/*IE6执行这一条*/}

  7. CSS的继承性

  8. CSS的继承性 • CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：

  9. <style type="text/css"> body { text-align: center;} p { font-size: 24px; text-decoration: underline;} em { color: #FF0000;} .right{ text-align: right;} </style> <body> <p><em>电子商务</em>教研室</p> <p class="right"><em>电子商务</em>教研室</p></body>

  10. 继承关系树型图(DOM)

  11. 继承性习题 <style> h1{ color:blue; /* 蓝色 */ text-decoration:underline; /* 下划线 */ } em{ color:red; /* 红色 */} li li{ color:green; font-weight:bold;} </style> <h1><em>Web标准</em>教室</h1><p>欢迎来到Web标准教室，这里为您提供丰富学习内容。</p> <ul><li>在这里，你可以学习到： <ul><li>HTML</li> <li>CSS <ul><li>CSS初级</li> <li>CSS中级</li> <li>CSS高级</li></ul></li> <li>Javascript</li></ul> </li><li>你还可以学习到：<ol> <li>Flash</li> <li>Dreamweaver</li> <li>Photoshop</li></ol> </li></ul> <p>如果您有任何问题，欢迎联系我们</p>

  12. 要善于利用CSS继承性 • CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。 • 例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12像素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。

  13. 并不是所有的CSS属性都具有继承性 • 需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。 • 具有继承性的属性：color, font-类，text-indent, text-align, text-decoration, line-height, letter-spacing, border-collapse等 • 无继承性的属性：text-decoration:none, 所有背景属性，所有盒子属性,布局属性等

  14. 选择器的组合

  15. 选择器的组合 • 每个选择器都有它的作用范围，前面介绍了三种基本的选择器，它们的作用范围都是一个单独的集合， • 如标记选择器的作用范围是具有该标记的所有元素的集合，类选择器的作用范围是自定义的某一类元素的集合，有时我们希望对几种选择器的作用范围取交集、并集、子集后对选中的元素再定义样式，这时就要用到复合选择器了，它是通过对几种基本选择器的组合，实现更强、更方便的选择功能。

  16. 复合选择器 • 复合选择器就是两个或多个基本选择器，通过不同方式组合而成的选择器。主要有: • 交集选择器 • 并集选择器 • 后代选择器

  17. 声明 声明 类别名 h1.class1 { color: green; font-size: 20px; } 标记名 属性 值 属性 值 1 交集选择器 • 交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。例如：h1.class；p#intro。这两个选择器之间不能有空格。

  18. 交集选择器的作用范围 • 交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的类别或id的元素。它的作用范围如图所示： h1 h1.class .class

  19. 交集选择器举例 • 例如由于所有的表单控件都是input标记，如果设置input标记选择器的样式，那么所有的表单控件都会受影响，如果只希望某个表单控件（如提交按钮）受影响，则可用交集选择器input.red{ ……} input.red { color: #FF0000;} <input type="submit" name="Submit" class="red" value="提交" /> • 对于上例IE7、Firefox还支持属性选择器 可不创建red类，直接写input[type=‘submit’]

  20. 2 并集选择器 • 所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“,”隔开。如果某些选择器定义的样式完全相同，或者部分相同，这时便可以利用并集选择器同时声明风格完全相同或部分相同的样式。如h2,.class{…}其选择范围如图所示： h2 .class h2,.class

  21. 并集选择器举例 <style type="text/css"> h1,h2,h3,p { font-size: 12px; color: purple; } h2.special, .special, #one { text-decoration: underline;} </style> <body> <h1>示例文字h1</h1> <h2 class="special">示例文字h2</h2> <h3>示例文字h3</h3> <h4 id="one">示例文字h4</h4> <p class="special">示例文字p1</p>

  22. 通配选择符 • 如果要对网页中所有的元素进行集体声明可使用通配选择符 * *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */} CSS\11.htm

  23. 3 后代选择器 • 在CSS选择器中，还可以通过嵌套的方式，对特殊位置的html元素进行控制，例如当<a>与</a>之间包含<b>……</b>元素时，就可以使用包含选择器选中出现在a元素中的b元素。包含选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。其选择范围如图所示： a a b

  24. <style type="text/css"> a { font-size: 16px; color: red; } a b { color: mediumpurple; } </style> <body> <b>这是b标记中的文字</b><br /> <a href="#">这是<b>a标记中的b<span>标记</span></b></a>

  25. 后代选择器 • 和其他所有CSS选择器一样，后代选择器定义的具有继承性的样式同样也能被其子元素继承。例如在上例中，b元素内又包含了span元素，那么span元素也将显示为淡紫色。这说明子元素（span）继承了父元素（a b）的颜色样式

  26. 后代选择器举例 • 后代选择器的使用非常广泛，实际上不仅标记选择器可以用这种方式组合，类选择器和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，内层标记（子标记）能通过嵌套表示的则利用这种方式，而不需要再定义新的class或id。

  27. 4. 复合选择器的优先级 • 复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是“ID选择器 > 类选择器 > 标记选择器”，所以不妨设ID选择器的优先级权重是100，类选择器的优先级权重是10，标记选择器的优先级权重是1，那么复合选择器的优先级就是组成它的各个选择器权重值的和。 • h1{color:red;} /* 权重=1 */ • p em{color:blue;} /* 权重=2 */ • .warning{color:yellow;} /* 权重=10 */ • p.note em.dark{color:gray;} /* 权重=22 */ • #main{color:black;} /* 权重=100 */ • 当权重值一样时，会采用“层叠原则”，一般后定义的会被应用

  28. 复合选择器优先级计算 例题 <style type="text/css"> #aa ul li { color:red } .aa { color:blue } </style> <div id="aa"> <ul> <li class="aa"> web标准常见问题大全之<em class="aa">复合选择器</em>的优先级 </li> </ul></div>

  29. !important样式 高 行内样式 id选择器 复合选择器 优先级 类选择器 标记选择器 浏览器对标记预定义的样式 低 继承的样式 CSS样式的优先级 总图

  30. 复杂选择器名称的分解 • 如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如： #menu a.class :hover b, .special b.class { … } 就可先分解为： （#menu a.class :hover b），（.special b.class） • 这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。

  31. CSS样式的总体设计原则 • 定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的包含选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。 • 例如导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menu a）就可以选中导航条内的各个a标记了。

  32. CSS样式的总体设计原则2 • 对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。

  33. CSS 2.1新增加的选择器简介

  34. CSS 2.1新增加的选择器简介 • CSS 2.1标准在1.0的基础上增加了一些新的选择器，这些选择器不能被IE6浏览器支持，但是其他浏览器如IE 7、Firefox3、Safari 4等均对它们提供支持，考虑到目前越来越多的电脑安装了IE 7等新型浏览器，预计IE 6将在一两年内被淘汰，因此我们有必要知道这些新选择器，它们能给CSS设计带来方便，而且对我们以后学习jQuery的选择器是很有帮助的

  35. 1. 子选择器 • 子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（>） body>p { color: green; } <body> <p>这一段文字是绿色</p> <div><p>这一段文字不是绿色</p></div> <p>这一段文字是绿色</p> </body>

  36. 子选择器 • 使用子选择器招数（Hack）对IE 5-6/Win 隐藏透明的背景PNG图象。 • html>body {   background-image:(bg.png)} • p>b{ color:red }

  37. 2 相邻选择器 • 相邻（adjacent-sibling）选择器的定义符号是加号（+），相邻选择器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素） h2+p { color: red; } <h2>下面哪些文字是红色的呢</h2> <p>这一段文字是红色</p> <p>这一段文字不是红色</p> <h2>下面有文字是红色的吗</h2> <div><p>这一段文字不是红色</p></div> <p>这一段文字不是红色</p> <h2>下面哪些文字是红色的呢</h2> 这一段文字不是红色 <p>这一段文字是红色</p> <p>这一段文字不是的</p>

  38. 3 属性选择器 • （1）匹配属性 • a[name] {color:purple; } • img[border] {border-color:gray;} • [special] {color:red;} （2）匹配属性和值 input[type="submit"] {background:purple; } （3）匹配单个属性值 h2[class~="two"] { color: red;} <h2 class="one two three">文字是红色</h2>

  39. 4 新增加的伪类选择器 • （1）:focus • 用于定义元素获得焦点时的样式 • （2）:first-child • :first-child伪类选择器用于匹配它的父元素的第一个子元素，也就是说这个元素是它父元素的第一个儿子，而不管它的父元素是哪个。 p:first-child{ font-weight: bold; } <body> <p>这一段文字是粗体</p> <!--第1行，被选中--> <h2>下面哪些文字是粗体的呢</h2> <p>这一段文字不是粗体</p>……

  40. 5. 伪对象选择器 • （1）:first-letter • :first-letter用于选中元素内容的首字符。例如： • p:first-letter{ font-size: 2em; float: left;} • 它可以选中段落p中的第一个字母或中文字符。 • （2）:first-line • :first-line用于选中元素中的首行文本。例如： • p:first-line{ font-weight: bold; letter-spacing: 0.3em;}

  41. 5. 伪对象选择器 • （3）:before和:after p:before, p:after{content: "--"; color:red;} <body> <p>看这一段文字的左右</p> <p>这一段文字左右</p></body>

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

  43. 4.2 应用CSS修饰文本和超链接

  44. CSS文本修饰 • CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改文本颜色的color属性和行高line-height属性。 • DW中这些属性的设置是放在CSS规则定义面板的“类型”和“区块”中的。其中“text-indent”表示首行缩进，在每段开头空两格通常是用text-indent: 2em;来实现，text-decoration: none;表示去掉下划线，line-height: 150%;表示调整为1.5 倍行间距。letter-spacing用于设置字符间的水平间距。

  45. CSS文本修饰举例 h1 { font-size: 16px; text-align: center; letter-spacing: 0.3em;} p { font-size: 12px; line-height: 160%; text-indent: 2em;} .source { color: #999999; text-align: right;} <h1>失败的权利</h1> <p class="source">2006年5月11日　美国《侨报》</p> <p>自从儿子进了足球队，……，不亲身经历是无法体会的。</p> <p>他们队有个传统，……几乎是战无不胜的。</p> <p> 在我看来，……孩子们是当之无愧的。</p> <p>接受孩子的失败，就给了他成功的机会。</p>

  46. CSS动态超链接 • 在默认的浏览器浏览方式下，超链接为统一的蓝色并且有下划线，被单击过的超链接则为紫色并也有下划线。 • 动态超链接是通过CSS伪类选择器实现的，因为伪类可以描述超链接在不同状态下的样式，所以我们通过定义a标记的各种伪类具有不同的属性风格，就能制作出千变万化的动态超链接。具体来说，a标记有四种伪类，用来描述链接的4种状态

  47. <style type="text/css"> a {font-size: 14px; text-decoration: none; } a:link {color: #666666;} a:visited {color: #996600; } a:hover { color: #ECBD00; text-decoration: underline;} a:active { color: #FF3399;} </style> <body> <a href="#">普通链接</a><a href="#">鼠标悬停时链接</a><a href="#">点击过链接</a> </body>

  48. 需要注意三点 • 一、链接伪类选择器的书写应遵循LVHA的顺序，即CSS代码中四个选择器出现的顺序应为a:link→ a:visited→ a:hover→ a:active，若违反这种顺序鼠标停留和激活样式就不起作用了。 • 二、各种a的伪类选择器将继承a标记选择器定义的样式。 • 三、a:link选择器只能选中具有href属性的a标记，而a选择器能选中所有a标记，包括用a标记作为锚点。

  49. CSS属性的值和单位

More Related