网页设计与制作(四)

CSS高级特性

一、CSS复合选择器

1.标签指定选择器
标签指定式选择器又称交集选择器,有两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one。

<html>3
<head>
<meta>
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{color:blue;}
.special{color:green;}
p.special{color:red;}/*标签指定式选择器*/
</style>
<body>
<p>普通段落文本</p>
<p class="special">指定了,special类的段落文本(红色)</p>
<h3 class="special">指定了.special的类的标题(绿色)</h3>
<body>
</html>

2.后代选择器
后代选择器用来选择或元素组的后代,其写法就是把外层标记写下前面,内层标记写下后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代.

<html>
<head>
<meta>
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;}  /*后代选择器*/
strong{color:blue;}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中,使用strong标记定义的文本(红色)。</strong></p>
<strong>嵌套之外由</strong>
</body>
</html>

后代选择器不限于使用两个元素,如果需要加入更多的元素,只需在元素之间加上空格即可。如果《strong》标记中还嵌套一个《em》标记,想要控制这个《em》标记,就可以使用p.strong.em选中它。
3.并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

<html>
<head>
<meta>
<style type="text/css">
h2,h3,p{color:red;font-size:14px;}/*不同标记组成的选择器*/
h3,special,#one{text-decoration:underline;}/*标记、类、id组成的并集选择器*/
</style>
<body>
<h2>二级标题文本</h2>
<h3>三级标题文本加下划线</h3>
<p class="special">段落文本1,加下划线</p>
<p>段落二,普通文本</p>
<p id="one">段落三,加下划线</p>
</body>
</html>

二、CSS层叠性和继承性

CSS是层叠式样式表的简称,层叠性和继承性是其基本特征。
1.层叠性
所谓层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义《p》标记字号大小为12像素,链入式定义《p》标记颜色为红色,那么段落文本将显示为12像素红色,即两种样式产生了叠加。

<html>
<head>
<meta>
<title>CSS层叠性</title>
<style type="text/css">
p{font-size:12px;font-family:"微软雅黑“;}
.special{font-size:16px;}
#one{color:red;}
</style>
<body>
<p class="special" id="one">段落1</p>
<p>段落2</P>
<p>段落3</p>
</body>
</html>

2.继承性
所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号。例如,定义主体body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他标记都嵌套在《body》标记中,是《body》标记的子标记。
如果网页中所有元素都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以使用继承。
**并不是所有的CSS属性都可以继承,**例如,下面的属性就不具有继承性:
1.边框属性
2.外边距属性
3.内边距属性
4.背景属性
5.定位属性
6.布局属性
7.元素宽高属性
标题文本不采用body元素设置的字号,是因为标题标记h1~h6有默认字号样式,这时默认字号覆盖了继承字号。

三、CSS优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这是就会出现优先级的问题。
标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100。这样,id选择器#header就有最大的优先级,因此文本显示为蓝色。
对于有多个基础选择器构成的复合选择器(并集选择器除外),其权重为这些基础选择器权重的叠加。
1.继承样式的权重为0
即在嵌套结构中,不管父元素样式的权重有多大,被子元素继承时,她的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
例如:CSS样式代码:

strong{color:red;}
#header{color:green;}

对应的HTML结构为:

<p id="header" class="blue">
<strong>继承样式不如自己定义</strong>
</p>

2.行内样式优先
应用style属性的元素,其行内样式的权重都非常高,可以理解为远大于100。总之,它拥有比上面提高的选择器都大的优先级。
3.权重相同,CSS遵循就近原则
靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
3.CSS定义了一个!important命令,该命令被赋予最大的优先级。
也就是说不管权重如何以及样式的位置的远近,!important都具有最大的优先级。
!important命令必须位于属性值和分号之间,否则无效,IE6及更低版本的浏览器不支持!important命令。
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页