CSS基础 | (4)CSS样式的层叠与继承

最新推荐文章于 2024-04-13 19:55:38 发布

CoreJT

最新推荐文章于 2024-04-13 19:55:38 发布

阅读量463

点赞数 1

分类专栏： CSS基础文章标签： css基础 css样式层叠 css样式继承

本文链接：https://blog.csdn.net/sdu_hao/article/details/83273131

版权

CSS基础专栏收录该内容

4 篇文章 4 订阅

订阅专栏

一、样式冲突的解决之道

网页上一个元素的样式可能来自很多地方，有浏览器默认的样式，也有用户为这个标签定义的样式，还有标签上应用的类样式等。当有来自多个不同地方的样式作用到同一个元素上时，必须有一套机制来解决这种样式上的冲突。

对于同一个元素，将不同的样式，层层叠加上去，这就是层叠样式表CSS名称的由来
网页元素是通过标签来包装的，因此主要通过对标签样式的设置来达到控制元素显示的目的
标签样式主要来自两个地方：一是浏览器默认样式(不同浏览器略有差别)；二是用户自定义样式，既可以直接设置在标签上，也可以作为类样式，共不同标签调用
样式层叠问题是通过样式声明的位置以及涉及的对象来设置样式不同的优先级来解决的。例如类样式的优先级明显高于标签样式

二、标签样式：直接修改默认样式

关于自定义标签样式，首先会想到，将包装元素的标签样式重新定义。如果标签样式修改了，那么标签里的元素样式自然也被修改了。

通过以下这个简单的例子进行演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>学习内容：</h2>
  <ol>
    <li>html</li>
    <li>css</li>
    <li>js</li>
  </ol>
</body>
</html>

利用上一节课的内容，打开浏览器开发者工具，查看h2标签的样式：

红框内的即为浏览器为h2标签设置的默认样式。

现在我们在本地css文件中手动设置h2标签的样式：

css代码：

h2 {
  color:red;
  font-size: 3em;
}

可以发现浏览器中出现了我们设置的样式(红框中),而且被覆盖的默认样式被划掉了(篮框):

总结：自定义标签样式是最直观的方法，但不推荐这样做，推荐用类样式替代标签样式。

三、类样式定义

如果要将页面上某些元素，设置成统一的外观，就要用到类样式了。

类样式与标签样式的关联：他们最终都要作用到具体的元素上来改变元素外观。

类样式与标签样式的区别：标签样式直接修改默认样式；而类样式仅仅作为标签中class属性的值存在，因此类样式可以作用到更多的标签上，甚至其他页面都可以引用，所以更加通用，类样式优先级要大于标签样式。

所谓类样式，就是根据元素用途来为它定制样式，至于应用到什么标签上并不重要。

现有一段html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h2>联合（行业）区块链</h2>
<p>行业区块链（ConsortiumBlockChains)：由某个群体内部指定多个预选的节点为记账人，每个块的生成由所有的预选节点共同决定（预选节点参与共识过程），
其他接入节点可以参与交易，但不过问记账过程(本质上还是托管记账，只是变成分布式记账，预选节点的多少，如何决定每个块的记账者成为该区块链的主要风险点），
其他任何人可以通过该区块链开放的API进行限定查询。</p>

<p>私有区块链</p>
<div>私有区块链（privateBlockChains)：仅仅使用区块链的总账技术进行记账，可以是一个公司，也可以是个人，独享该区块链的写入权限，
本链与其他的分布式存储方案没有太大区别。(Dec2015)保守的巨头（传统金融）都是想实验尝试私有区块链，而公链的应用例如bitcoin已经工业化，
私链的应用产品还在摸索当中。</div>
</body>
</html>

网页显示效果：

我们现在想把所有标题设置为一个样式，所有文本设置为一个样式。但是观察源码你会发现，标题一个被h2标签包装，另一个被p标签包装；而文本一个被p标签包装，另一个被div标签包装。所以直接用标签样式，会很不方便。

此时我们可以用类样式，我们可以设置一个标题类，用于设置所有标题的样式；再设置一个文本类，用于设置所有文本的样式。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="headline">联合（行业）区块链</h2>
<p class="content">行业区块链（ConsortiumBlockChains)：由某个群体内部指定多个预选的节点为记账人，每个块的生成由所有的预选节点共同决定（预选节点参与共识过程），
其他接入节点可以参与交易，但不过问记账过程(本质上还是托管记账，只是变成分布式记账，预选节点的多少，如何决定每个块的记账者成为该区块链的主要风险点），
其他任何人可以通过该区块链开放的API进行限定查询。</p>

<p class="headline">私有区块链</p>
<div class="content">私有区块链（privateBlockChains)：仅仅使用区块链的总账技术进行记账，可以是一个公司，也可以是个人，独享该区块链的写入权限，
本链与其他的分布式存储方案没有太大区别。(Dec2015)保守的巨头（传统金融）都是想实验尝试私有区块链，而公链的应用例如bitcoin已经工业化，
私链的应用产品还在摸索当中。</div>
</body>
</html>

css代码：

.headline {
  color:green;
  font-size: 1.5em;
  font-weight: bold;
}

.content {
  color:inherit;
  font-size: 1em;
  font-weight: lighter;
}

页面显示效果：

如果你觉得第二个标题更重要，想将其设置为红色，最简单的方法在定义一个类，首先在第二个标签的类属性中再增加一个值如red，再在样式文件中追加一个类样式，设置为红色即可。

html修改代码：

<p class="headline red">私有区块链</p>
/*两个属性值以空格分开*/

css追加代码：

.red {
  color: red;
}

四、id样式

具有id属性的元素，在当前页面中应该是唯一的。所以通过id属性添加到元素的样式，优先级要大于类样式。

id样式用的并不多，但有的时候非他不可。

示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="blue" id="red">联合（行业）区块链</h2>
<p>行业区块链（ConsortiumBlockChains)：由某个群体内部指定多个预选的节点为记账人，每个块的生成由所有的预选节点共同决定（预选节点参与共识过程），
其他接入节点可以参与交易，但不过问记账过程(本质上还是托管记账，只是变成分布式记账，预选节点的多少，如何决定每个块的记账者成为该区块链的主要风险点），
其他任何人可以通过该区块链开放的API进行限定查询。</p>

</body>
</html>

css代码：

h2 {
  color:green;
}

.blue {
  color:blue;
}

#red {
  color:red;
}

在css文件中，我们分别设置了标签样式、类样式和id样式。我查看一下网页的显示效果和浏览器开发者工具：

发现最后显示的是id样式的效果，说明优先级：id样式>类样式>标签样式。

五、行内样式

行内样式是通过标签属性style进行设置，其样式仅适用于当前元素。

类样式和id样式，也是通过标签属性来调用，但是他们的样式代码是写在标签外面的，可以被多个标签调用，所以行内样式的作用范围最小，优先级最高。

以下以给图片边框设置颜色为例进行演示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<img src="kenan1.jpg" alt="柯南" class="blue" id="red" style="border:15px solid yellow;">

</body>
</html>

css代码：

img {
   border: 15px solid green;
}

.blue {
  border: 15px solid blue;
}

#red {
  border: 15px solid red;
}

查看网页显示效果和浏览器开发者工具：

总结：优先级行内样式>id样式>类样式>标签样式

CoreJT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录