网页设计与制作（四）

最新推荐文章于 2023-12-31 18:22:18 发布

吴晓玉

最新推荐文章于 2023-12-31 18:22:18 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_45728258/article/details/103538320

版权

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命令。
在这里插入图片描述