前端开发_HTML5_CSS部分(四)

本文主要是介绍前端开发_HTML5_CSS部分(四)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、CSS相关的特性

1、引入

在上一次课中，我们讲解了如何使用选择器的使用，能够通过选择器给不同的标签添加不同的样式信息。接下来，我们讲解以下CSS中存在的一些样式的特性，这些特性将更好的解决我们理解如何给标签准确的添加相关的样式内容。

2、CSS样式特性

我们将主要讲解三个有关CSS的特性:继承性、叠加性和优先选择性。

3、内容详解

(1)、继承性

①：继承性概述:所谓的继承性就是指:如果存在元素的嵌套关系，那么嵌套的元素都会继承其外层所指定的样式。样式不冲突的情况下，会出现多个样式叠加在该标签的效果。

②：继承性的代码演示和效果

<style type="text/css">body{font-size: 28px;font-family: "宋体";}.imp{color: #FF0000;}
</style><body><p>生与死</p><p class="imp">骑者，且赶路</p>
</body>

(2)、叠加性

①：叠加性概述:所谓的叠加性就是指,对同一个标签元素，如果定义了多个不同的样式，那么它将会同时作用于这一个标签，如果说这一些样式是不相互冲突的，那么就把所有的样式应用到该标签上，如果说样式是相互冲突的，这一个时候就按照优先选择性给标签添加样式。

②：叠加性的代码演示和效果(样式不冲突情况，冲突情况在优先选择性中演示)

<style type="text/css">p{font-size: 28px;font-family: "宋体";}.imp{color: red;}#author{color: green;}</style><p>生与死</p>
<p class="imp">骑者，且赶路</p>
<p id="author">威廉·巴特勒·叶芝</p>

(3)、优先选择性

①：优先选择性概述:所谓的优先选择性就是指,对同一个标签元素，如果定义了多个不同的样式，那么如果说有相同的样式，那么它会按照所选用的选择器做出选择，其选择的先后顺序如下:

行内样式 > ID样式 > 类样式 > 标签样式行内样式 > 内嵌样式 > 外部样式

②：优先选择性的代码演示和效果

<style type="text/css">p{font-size: 28px;font-family: "宋体";}.imp{color: red;}#author{color: green;}</style><body><p style="font-size: 18px;">生与死</p><p class="imp" style="color: blue;">骑者，且赶路</p><p id="author">威廉·巴特勒·叶芝</p>
</body>