标签(空格分隔): CSS
CSS 称为层叠样式表, CSS 有两大特性: 继承性和层叠性, 本章简单介绍一下继承性:
继承性:
定义: 继承就是给父及设置了一些属性, 子级继承了父及的该属性, 这就是我们的 CSS 的继承, 有一些属性可以继承,
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 继承性
- </title>
- <style type="text/css">
- .father{ color:red; }
- </style>
- </head>
- <body>
- <div class="father" id="egon">
- <p>
- wangwang
- </p>
- </div>
- </body>
- </HTML>
问题: 背景色是不是继承?
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 继承性
- </title>
- <style type="text/css">
- .father{ color:red; font-size: 30px; background-color: green; }
- </style>
- </head>
- <body>
- <div class="father" id="egon">
- <p>
- wangwang
- </p>
- </div>
- </body>
- </HTML>
通过上述的例子, 背景色不属于继承, P 标签的标签是透明的, 但是从肉眼看到的是绿色的, 他是通过透明提现的, 所以 background 是没有继承的;
哪些属性可以继承
- color,
- font-,
- text-,
- line-*
像一些盒子元素, 定位元素 (浮动, 绝对, 固定定位) 不能继承, 大家可以先了解一下;
层叠性:
这里先举个例子, 大家猜猜如下的代码, P 标签是什么颜色?
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 层叠性</title>
- <style type="text/css">
- #box{
- color:red;
- }
- .container{
- color:yellow;
- }
- </style>
- </head>
- <body>
- <p id="box" class="container">
猜猜我是什么颜色
- </p>
- </body>
- </HTML>
结果如下图:
问题: 为什么显示为红色呢? 代码不是从上往下执行的吗?
答案: 在 CSS 里面我们会讨论这个问题, 在 CSS 里面有个权重的概念, 谁的权重大, 浏览器就会显示谁的属性;
例如: 如下代码执行:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 层叠性</title>
- <style type="text/css">
- #box{
- color:red;
- }
- .container{
- color:yellow;
- }
- p{
- color:purple;
- }
- </style>
- </head>
- <body>
- <p id="box" class="container">
猜猜我是什么颜色
- </p>
- </body>
- </HTML>
执行结果: 还是显示红色, 为什么呢?
那么如何判断谁的权重大? 非常简单, 就是数数:
1. 先数: id 的数量; 100
2. 在数: class 数量 010
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 层叠性</title>
- <style type="text/css">
- <!-- 这时候 100 我们只看 id 的时候, 对应的 ID 是 1, 对应的类是 0, 对应的标签是 0-->
- #box{
- color:red;
- }
- /*010, 这时候对应的 ID 是 0, 对应的类是 1, 对应的标签是 0*/
- .container{
- color:yellow;
- }
- /*001 对应的 ID 是 0, 对应的类是 0, 对应的标签是 1*/
- p{
- color:purple;
- }
- </style>
- </head>
- <body>
- <p id="box" class="container">
- </p>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 权重
- </title>
- <style type="text/css">
- <!-- id 为 2 个 0 个类 1 个标签 -->
- #box1 #box2{ color:yellow; } /*1 1 1*/ #box2 .wrap3{ color:red; } /*1
- 0 3*/ div div #box3 p{ color:purple; } /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3
- p{ color:blue; }
- </style>
- </head>
- <body>
- <div id="box1" class="wrap1">
- <div id="box2" class="wrap2">
- <div id="box3" class="wrap3">
- <p>
- 我是什么颜色
- </p>
- </div>
- </div>
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 权重
- </title>
- <style type="text/css">
- /*1 1 1*/ #box1 .wrap2 p{ color:red; } /*1 1 1*/ #box2 .wrap3 p{ color:yellow;
- }
- </style>
- </head>
- <body>
- <div id="box1" class="wrap1">
- <div id="box2" class="wrap2">
- <div id="box3" class="wrap3">
- <p>
- 我是什么颜色
- </p>
- </div>
- </div>
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 权重
- </title>
- <style type="text/css">
- /*2 1 0 */ #box1 #box2 .wrap3{ color:red; } /*1 1 1*/ #box2 .wrap3 p{
- color:yellow; }
- </style>
- </head>
- <body>
- <div id="box1" class="wrap1">
- <div id="box2" class="wrap2">
- <div id="box3" class="wrap3">
- <p>
- 我是什么颜色
- </p>
- </div>
- </div>
- </div>
- </body>
- </HTML>
来源: https://www.cnblogs.com/surewing/p/10612512.html