CSS样式表详解：层叠、继承与优先级-CSDN博客

CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS规则（rule）是层叠样式表的基本组成单位，它包含一条或多条属性声明。通过选择器匹配并应用到相应的HTML元素中。

CSS的三大特性

层叠性

给同一个元素在不同的地方多次设置同一个属性时，可能会出现样式冲突的问题，此时就会出现相互覆盖的情况。
层叠（覆盖）性原则：
- 就近原则：哪个样式离结构越近，那个样式就优先起作用。

继承性

字标签会继承父标签中的某些样式，一般包括：
- text- , font- , line- 这类样式属性
- color属性
- …

优先级

当同一个元素指定多个选择器时，就会有优先级的产生：

CSS的引入方式

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合修改简单的样式

<div style="height: 100px"></div>

内部样式表

所谓的内部样式表，就是在HTML页面内部，通过<style>标签引入的样式表。通常也称为嵌入样式表。
<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
作用范围是该HTML页面。

<head>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    </style>
</head>

外部样式表

将CSS样式放入单独的.css代码文件中，然后通过标签引入外部文件。
外部css样式表使用<link>标签引入

<link rel="stylesheet" href="文件路径">

属性继承

每个样式属性都包含一个特征——是否为继承属性（也就是说不是所有属性都可以继承）；该特征决定了一个元素是否会从父元素继承该属性的值。
如果我们未给某个可继承属性设置值，那么该属性就会从父元素继承相应的值。如果父元素对于的样式属性也没有设置，则继续向上层元素查找，直到更元素（<html>）。
对于不可继承的属性，如果未声明其值，则使用游览器默认样式中给定的初始值。

CSS规则的优先级

当同一个元素指定多个选择器时，就会有优先级的产生：
选择器相同时，执行层叠性（就近原则）,根据规则来源判断属性声明的优先级规则由低到高为（对于相同来源的样式规则，位于后面的属性声明优先级更高）：
1. 游览器默认样式
2. 外部样式
3. 内部样式
4. 内联样式（行内样式）
5. 用户自定义样式
6. !important：使用!important标记的属性声明具有最高优先级，可以覆盖其它所有声明；如果同一个属性受到多个!important标记的影响，则位于后面的属性声明优先级更高。
选择器不同时，则根据选择器权重执行：

权重

选择器	权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器。伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style	1,0,0,0
`!important`修饰的属性	无穷大

权重由四个数字组成，在权重叠加时不会有进位的说法。
- 也就是说无论怎么样，id选择器的权重永远大于类选择器的权重。
权重的四位数中，前面的数字权重更高，后面的要比前面的低

权重叠加

/* 权重 
 * 0,0,0,1
 */
li {
    color: green;
}

/* 权重
 * 0,0,0,1 + 0,0,0,1 = 0,0,0,2
 */
ul li {
    color: green;
}

/* 权重
 * 0,0,1,0 + 0,0,0,1 = 0,0,1,1
 */
.div1 p {
    color: green;
}

@规则

@规则是以@符号和一个关键词作为开始，并根据关键词区分其功能。

@charset

@charset用于定义当前样式文件所用的字符集，该规则需要写在样式文件的开始位置：

@charset "UTF-8";

@media（媒体查询）

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
- all：全部设备（默认值）
- screen：屏幕
- print：打印预览和打印机
- speech：屏幕阅读器

@media all {
    html, body {
        height: 100%;
    }
    .my-div {
        box-sizing:boder-box;
    }
}
@media screen {}
@media print {}
@media speech {}

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

/* 页面可见区域的宽度在500px到1000px时一下CSS规则会生效 */
@media (min-width: 500px) and (max-width: 1000px) {
    .div-1 {
        width: 50%;
    }
}

媒体查询中可以使用and|not|only来连接多个查询规则：
- and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。
- not 关键字反正整个媒体查询的含义。
- only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

@media only screen and (min-width: 500px) {}
@media not (min-width: 500px) {}

@import

@import用于将其它样式表的规则导入当前样式表中。
@import规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句；
@import不能在条件组的规则中使用。

@charset "UTF-8";
@import url [media-query-rules];
@import url [媒体查询规则(可选)];

@import "style.css";
@import url("style.css");

@import url("print.css") print;
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url('mobile.css') (max-width: 680px);