前端知识体系：1. 必备的HTML&CSS基础HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、视频等

HTML

HTML是超文本标记语言(Hypertext Markup Language)，用于搭建网页的结构.

HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、视频等，但是在网页中给用户呈现了效果，这也是HTML语言区别于其他文件的不同之处。

超文本
- 是超级文本的缩写，超文本就是用于连接另一个文本或多媒体的内容文本。
标记
- 叫做标签，是一种特殊的书写规范，写给浏览器的一种语法格式。

网页的组成：

前端三层
- HTML结构层 - CSS样式层 - JavaScript行为层
多媒体等内容：图片、音频、视频、超链接等
所有的网页文件都是真实的、物理存在的文件

HTML 的语义化

方便代码的阅读和后期维护
便于浏览器和网络爬虫更好的解析网站内容
使用语义化标签有利于SEO搜索引擎优化

如下面的代码
<h1>网页标题</h1>

HTML基本语法

HTML规范

W3C万维网联盟，专门发布和维护互联网规范和标准。HTML4.0 是W3C推荐标准，引入了样式表css，实现了结构和样式分离。HTML5 提供了更多的功能，目前开发多用HTML5进行开发的

HTML 标签

标签名必须书写在一对尖括号<>内部<h1>
标签分为单标签和双标签，双标签必须成对出现 <p></p> (双标签) <br/>(单标签)，双标签必须包含开始标签和结束标签

HTML 元素

HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签：<p>文本</p> 。
元素的内容可以是纯文本，也可以是其他的HTML元素。<div><p>文本<p></div> ,其中div的内容可能是多个其他元素组成比如：<div><p>w</p><h1>1</h1></div> div是p和h1的父级元素，p和h1是同级元素。
单标签是不能添加元素内容的，可以称为空元素。

标签级别

容器级：标签内部可以存放任意内容，包含容器级标签。比如：h1、div等
文本级：标签内容只能存放文字或类似文字的内容，比如存放图片、表单元素等。如：p标签
- 如果在p标签中添加h1标签会怎么样呢？

<p><h1>这是p中的一级标题</h1></p>

显示结果：在h1标签上下都多了一个p标签，注意文本级标签不要嵌套容器级的标签

总结容器级的标签有哪些

总结文本级的标签有哪些

HTML元素的特性

元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
空白折叠现象：元素内容如果是文本，所有文字之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示

<p>这是一个段落，元素内容之间对空               格、换
        行、缩  进形成的空白，会出现空白折叠现象</p>

HTML 属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息

HTML 属性书写规范

必须写在开始标签或单标签内，与标签名之间用空格进行分隔
属性包含：属性名key、属性值value. 写法是：k="v". XHTML要求属性值必须在双引号内部
一个标签可以设置多个不同的属性，属性与属性之间要使用空格分隔
部分标签属性k可以设置多个属性值v,所有属性值v都必须在用一个双引号内部k="v1 v2 v3…." 值与值之间需要使用空格分隔

HTML 基本骨架

<html> <head> <title> <body> 四组标签

html标签：定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>标签内部

...待整理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=《, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    网页的主体
</body>
</html>

HTML 常用标签

标题标签<h1>.....<h6>
段落标签 <p></p> 文本级标签，只能放置文本、图片、表单元素
换行标签<br/> 只是简单的进行强制换行

<p>这是p标签，<br/>这里需要换行 </p>

文本格式化标签-都是双标签，且是文本级标签，内部只能书写文字
- HTML4.0结构和样式进行了分离，css负责样式，HTML只负责搭建结构，所以大部分文本格式化标签被废弃了，只需要了解常用的标签即可
- <b> : 加粗
- <i> : 斜体
- <u> ：添加下划线
- <em> : 定义着重文字，自带斜体效果
- <strong> : 定义加重语气，自带加粗效果
- <big> ：大号字
- <small> : 小号字
- <sub> : 定义下标字：HO
- <sup> : 定义上标字：2
- <del> : 定义删除字
图片标签:<img> 单标签，本身相当于一个特殊的文本，插入一张图片
- <img> 标签必须设置src属性，值是图片的路径
- 相对路径：从HTML文件本身触发，根据相对的位置进行查找
  - 同级查找：指定的目标文件与HTML文件在同一级的目录
  - 子级查找：指定目标文件在与HTML文件同一级的文件夹的内部，需要进入文件夹内查找
  - 上级查找：../表示跳到当前HTML文件的上一级目录
- 绝对路径:不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者进行网址形式查找
  - 从盘符出发的绝对路径是不可移植，不可移动
  - 盘符出发的路径容易出现中文字符，中文的路径容易出现错误
  - 一般不推荐绝对路径，多使用相对路径
- width height 属性:设置图片的宽度和高度
- title 属性设置鼠标悬停的提示文本
- alt属性：设置的是图片查找错误时，出现的替换文本
- <img> 标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需要进行设置
音频和视频标签
- 音频：<audio> 双标签，支持mp3 ogg wmv
  - controls="constrols" 属性显示控制器
- 视频:<video> 双标签
  - controls="constrols" 属性显示控制器
超级链接标签
- <a>标签为双标签
- href属性：超文本引用，用于规定链接的目标地址,href属性不是必须的可以没有，此时为超链接的一个占位符
- target属性：可以定义被链接的文档在何处跳转显示
  - _self:默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
  - _blank:空白的，表示跳转的页面在新窗口打开
  - iframe framename
- title属性：设置的是鼠标悬停时的提示文本
- rel属性有多个值时，可以使用空格分隔
设置锚点
- 在目标位置找到任意一个标签，给它添加id/name属性，id的属性必须是唯一的 <h2 id="maodian">目标位置</h2>
- 添加<a>标签链接，设置href属性设置属性值：#id属性值或者#name属性值
- 跨页面锚点跳转
  - 设置目标位置的id或者name属性
  - 链接到锚点，添加超级链接时href属性需要改为：页面的路径#id/name

<a href="jump.html#text">页面内锚点跳转文件的纯文本</a>

无序列表
- <ul>
  - 定义一个无序列表的大结构
- <li>
  - 定义每一个列表项
- <ul>内部只能嵌套<li>标签，而<li>标签是不能单独存在的
- <li>标签是一个容器级标签，内部可以放置任意内容，甚至可以在嵌套一个ul>li 标签
- 无序列表项<li>是没有先后之分的，它们的重要程度是相同的
- 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，需要使用css添加
有序列表
- ol > li 由两个标签组成<ol> <li>
- <ol> 内部只能嵌套<li>标签
- 有序列表的列表项<li>之间，存在顺序先后之分
- 有序列表的作用只是搭建列表结构，没有添加样式前缀的功能，而是css添加
定义列表标签
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合
- 由三个标签组成：<dl> <dt> <dd>
- dl:defintion list 表示定义一个自定义列表的大结构
- dt: 表示定义自定义列表中的一个主题或者术语
- dd : 定义解释项，表示描述或解释前面的定义主题
- <dl> 内部只能嵌套<dt> <dd> ,<dt>和<dd>是同级关系
- dt和dd标签是容器级标签，内部可以放置任意内容
- 定义列表中的缩进样式由CSS负责，标签只负责搭建语义结构
- 配合着css布局效果，最好每个dl中只添加一组dt和dd

    <dl>
        <dt>张三</dt>
        <dd>
            <p>城市:北京</p>
            <p>年龄:18</p>
        </dd>
    </dl>
    <dl>
        <dt>李四</dt>
        <dd>城市：上海</dd>
        <dd>年龄:20</dd>
        <dd>学校：外国语学校</dd>
    </dl>

布局标签
- div 和 span标签，俗称盒子
- <div>和<span>没有明确的语义
- <div> 大盒子，双标签，是最经典的容器级标签，内部可以放置任意内容
  - 作用：划分网页内容区域
- <span> 小盒子双标签容器级标签
表格标签
- <table>: 表格，定义的是整个的表格大结构
- <tr> : 表格的行
- <td> ：表格的单元格，定义每一行内部的单元格
- table > tr > td

    <table border="1" style="border-collapse: collapse;">
        <tr>
            <th colspan="2">1</th>
            <th rowspan="2">2</th>
            <th colspan="2">3</th>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
    </table>

<th> 表头单元格
合并单元格，通过<th> <td> 的两个属性进行合并设置
- rowspan:跨行合并，上下合并
- colspan:跨列合并，左右合并
- 属性值：数字代表几行、几列
表格分区
- <table>内部最直接的子集包含四个分区标签，都是双标签
- caption:表格的标题
- thead: 表格的头部，内部嵌套：tr > th
- tbody : 表格的主题内部嵌套：tr > td
- tfoot : 表格的页脚内部嵌套：tr > td
- 浏览器加载顺序都是自动按照 caption -> thead -> tbody -> tfoot
表单制作
- 表单域、提示信息、表单控件组成一个完整的表单
- 表单域：用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据无法传送到后台服务器。
- 提示信息：提示用户进行填写和操作
- <from> 标签来定义表单域，双标签，容器级的标签
  - 属性:action 属性值：url 指定数据提交服务器的地址
  - 属性:method 属性值：get/post 用于设置表单的提交方式
  - 属性:name 规定表单的名称
- <input> 标签用来定义表单控件，单标签
  - 属性:
  - 格外注意disabled属性：指当input元素加载时禁用此元素。input内容不会随着表单提交
  - readonly属性: 输入字段为只读，input内容会随着表单提交
  - 无论设置readonly还是disabled，通过js脚本都能更改value值
- 下拉菜单标签
  - select > option
  - option的selected属性设置默认选中项
  - <optgroup> 对选项进行分组 select > optgroup > option,可以设置label属性，设置分组名称
- label标签
  - 所有的表单元素元素都可以通过绑定其他内容去扩大触发点击范围，这是就使用<label>标签
  - label标签的作用是帮表单元素定义标记，当鼠标点击label标签的内容是，浏览器就会自动将焦点转到和标签相关的表单控件上
  - 给表单元素设置id属性,label设置for属性，属性值和表单的id一致: <input type="radio" name="sex" id="women"><label for="women">女</label>
  - 另一种方法：将input标签，嵌套在label标签内部 <label><input type="checkbox" name="hyppe" checked> 绘画</label>
字符实体
- 有一些特殊符号不能直接书写,需要使用HTML预留的特殊符号表示
- www.w3school.com.cn/tags/html_r…

 <form action="data.php" method="GET" name="first">
        <p>
            用户名:
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </p>
        <p>
            密码:
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </p>
        <p>
            性别:<input type="radio" name="sex" id="men" checked> <label for="men"> 男</label> 
            <input type="radio" name="sex" id="women"><label for="women">女</label>
        </p>
        <p>
            爱好:
            <label><input type="checkbox" name="hyppe" checked> 绘画</label>
            <input type="checkbox" name="hyppe"> 音乐
            <input type="checkbox" name="hyppe"> 代码
        </p>
        <p>
            文件
            <!-- multiple设置文件多选 -->
            <input type="file" name="image" id="image" multiple="multiple">
        </p>
        <p>
            自我介绍:
            <textarea name="info" id="info" cols="30" rows="10" placeholder="请书写一个200字的介绍"></textarea>
        </p>
        <p>
            城市
            <select>
                <optgroup label="国内">
                    <option value="">北京</option>
                    <option value="" selected>上海</option>
                    <option value="">广州</option>
                    <option value="">厦门</option>
                </optgroup>
                <optgroup label="国外">
                    <option value="">伦敦</option>
                    <option value="" selected>东京</option>
                    <option value="">纽约</option>
                </optgroup>
            </select>
        </p>
        <p>
            <input type="button" value="普通按钮">
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
            <input type="image" src="" alt="">
        </p>
    </form>

语义化网页的优势
- 方便代码的阅读和后期的维护
- 便于浏览器或是网络爬虫更好的解析网站内容
- 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名
段落标签通过<p>标签定义，为双标签且为文本标签，<p>标签的作用是给标签内部添加一个完整段落的语义，且可以实现首行缩进与自动换行
哪些HTML元素可以获取焦点
- contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许编辑
- tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。
  - 0 | -1 | x
  - 0：tab键可获取焦点；
  - -1：tab键不可获取焦点；
  - x：x>0，x越小获取焦点优先级越高；
- input标签
- a标签但是必须有href属性

CSS 基本语法

CSS 全称：cascading style sheets 层叠式样式表。静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化

html 结构层，CSS 样式层 JavaScript行为层

层叠式
- 层叠性
- 继承性
样式
- 文字为本
- 背景
- 盒模型
- 浮动
- .....

css的代码的四种书写方式：

内联式 : <p style="font-size: 30px;color: red;">这是一段文字</p>
- 必须写在标签上，没有完全脱离HTML标签
- css样式代码让标签结果变的繁重
- 一个内联式的css代码，只能给一个标签使用，不能给多个标签复用
内嵌式 : 在<head>标签内部的<style>标签中书写样式
- 实现了结果和样式的初步分离 css只负责样式 HTML负责结构
- 多个标签可以利用代码设置相同的样式节省了代码量
- 结构和样式没有完全分离，只能给一个HTML文件使用，不能是多个HTML文件复用样式

    <style type="text/css">
        div{
            font-size: 30px;
        }
    </style>

外联式在单独的.css文件中，在这个文件中直接写样式 (推荐的方式)
- 引入方式：在HTML中的<head>标签内部使用<link>标签进行引入
- link标签属性：
  - rel -> "stylesheet" 引入的外部文件与HTML之间的关系，样式表
  - href -> css文件路径
  - type -> "text/css" HTML5中可以省略type属性不写
- 实现了HTML和CSS完全分离
- 多个HTML可以共用一个CSS样式表，提取公共的css,减少代码量
- 可以实现一个css变化，多个HTML页面同时变化，减少工作量
- 一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层

<link rel="stylesheet" href="style.css" type="text/css">

导入式
- 书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，带入其他的外部的.css文件
- @import url('./01.css');
- 导入式的问题
  - 导入式样式表的作用与外联式样式表基本相同
  - 导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有css样式的效果。
- 动态导入样式表如何实现？ <a name="IoP6f"></a>

CSS 规则

CSS规则由两个主要的部分构成:选择器，以及一条或多条声明
样式规则
- css在给某个标签设置样式前，必须使用选择器选中标签
- css样式属性写法 k:v;
- 给每个选择器添加的样式属性必须写在一个{} 内 <a name="OFsIg"></a>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

CSS常用的属性

color: 设置文字的颜色
font-family 定义元素内文字的字体。默认使用的是浏览器的默认字体
- 设置多个字体时：实际加载只会选择一种加载，选择的依据是书写顺序进行加载
- 如果浏览器不支持第一个字体，则会尝试下一个直到找到支持的字体
- 浏览器中加载的字体时用户机器中自带的，如果用户电脑中没有设置的字体则会加载失败需要查找下一个，因此必须在最后设置一个所有机器都具备的通用字体
- 中文字体中一般带有英文的字体效果，一般建议英文字体放在中文字体前面
font-size:设置文字的大小，属性值：可以使用相对长度单位也可以使用绝对长度单位，推荐使用相对长度单位
- 如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如Chrome、IE，默认显示字号16px
- 不同的浏览器也有自己最小加载显示字号，比如Chrome最小加载显示字号为8px，IE浏览器最小可以支持1px的字号
- 实际应用中：最小字号为12px,如果低于12px会出现兼容问题，现在网页普遍使用14px.尽量使用偶数字号在ie6等老式浏览器支持奇数会有bug
盒子实体化三属性
- width 定义元素占有的宽度
- height 定义元素占有的高度
- background-color 定义元素的背景颜色

CSS 选择器

CSS 样式应用于特定的目标元素，需要用到选择器找到目标元素-CSS选择器 CSS基础选择器：标签选择器、id选择器、类选择器、通配符选择器 CSS高级选择器：后代选择器、交集选择器、并集选择器

标签选择器

选择范围：选择HTML中所有的同名标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
      	h3{
            color: blue;
        }
    </style>
</head>
<body>
    <h3>三级标签内容</h3>
    <p>段落内容</p>
    <p>段落内容</p>
</body>
</html>

id选择器

通过标签上的id属性去选择标签
书写方式:#id
选择范围：只能选中一个标签
每个id属性值必须是唯一的，不能与其他的id同名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title{
            color: pink;
        }
        #content{
            color: red;
        }
    </style>
</head>
<body>
    <h3 id="title">三级标签内容</h3>
    <p id="content">段落内容</p>
    <p>段落内容</p>
    <h3>三级标签内容</h3>
    <p>段落内容</p>
    <p>段落内容</p>
    <h3>三级标签内容</h3>
    <p>段落内容</p>
    <p>段落内容</p>
</body>
</html>

类选择器

属性方式：.class属性值
选择范围：页面中所有class属性值相同的标签
特点：

多个不同的标签不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中
一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title{
            color: pink;
        }
        #content{
            color: red;
        }
        .demo{
            color: blue;
        }
        .test {
            background-color:black;
        }
    </style>
</head>
<body>
    <h3 id="title">三级标签内容</h3>
    <p id="content">段落内容</p>
    <p>段落内容</p>
    <h3>三级标签内容</h3>
    <p class="demo">段落内容</p>
    <p>段落内容</p>
    <h3>三级标签内容</h3>
    <p class="demo test">段落内容</p>
    <p>段落内容</p>
</body>
</html>

通配符选择器

选中所有的标签,常用来处理浏览器的默认样式
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作
注意 实际上线网站，不允许使用*去清除默认内外边距

        *{
            color: red;
            margin: 0;
            padding: 0;
        }

后代选择器

通过标签之间的嵌套关系去选择元素。空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 ul li p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box1标签内部段落</p>
    </div>
    <div class="box2">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box2标签内部段落</p>
    </div>
</body>
</html>

交集选择器

交集选择器：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都能被选中 IE6及以前的浏览器不支持这种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p.box1{
            color: red;
        } */
        p.box1.ps{
            color: blue;
        }

        .box2 p.box{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p class="box1 ps">这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box1标签内部段落</p>
    </div>
    <div class="box2">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p class="box1">这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box2标签内部段落</p>
    </div>
</body>
</html>

并集选择器

多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法
可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2,.demo{
            color: red;
        }
        body,h2,div,ul,li,p{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h2>二级标题</h2>
    <div class="box1">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p class="box1 ps">这是段落</p>
            </li>
            <li>
                <p class="demo">这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box1标签内部段落</p>
    </div>
    <div class="box2">
        <ul>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p class="box1">这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
            <li>
                <p>这是段落</p>
            </li>
        </ul>
        <p>这是box2标签内部段落</p>
    </div>
</body>
</html>

继承性

如果一个标签没有设置过一些样式，它的某个组先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从组先级继承而来的能够被继承的样式是所有的文字相关样式属性，其他属性都不能被继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 14px;
            color: green;
            font-family: "宋体";
        }
    </style>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <div class="box1">
        <p>这是段落</p>
        <p>这是段落</p>
        <p>这是段落</p>
        <p>这是段落</p>
    </div>
</body>
</html>

如下图：<p>标签继承了box1中样式的color、font-size、font-family,但是宽高和背景并没有继承

继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的组先级标签比如,后期所有的后代标签都可以从标签中继承属性

层叠性

层叠性解决：多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性

比较多个选择器的权重，权重高的层叠权重低的
基础选择器权重：* < 标签选择器 < 类选择器 < id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
        p{
            color: green;
        }
        .demo {
            color: yellow;
        }
        #box{
            color: pink;
        }
    </style>
</head>
<body>
    <p class="demo" id="box">看看文字样式是什么?</p>
</body>
</html>

高级选择器权重比较方法：依次比较id个数，类的个数，标签的个数,如果选择器权重都相同，需要比较css中代码的书写顺序，后写的层叠先写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            color: red;
        }
        p{
            color: green;
        }
        .demo {
            color: yellow;
        }
        #box{
            color: pink;
        } */
        body p {
            color: red;
        }
        .demo {
            color: green;
        }
        #box.demo{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="demo" id="box">看看文字样式是什么?</p>
</body>
</html>

比较选择器权重，权重高的层叠权重低的
权重一样，比较css中代码书写顺序，后写的层叠先写的

选中目标标签的组先级，文字样式被继承，也会出现层叠
比较就近原则
如果选中的组先级距离目标一样近，比较选择器权重，权重大的层叠小的
如果距离一样近，权重也相同，最后比较急CSS中的书写顺序，后面的层叠前面的

!important 关键字，可以将某天CSS样式属性的权重提升到最大,如下代码最终的样式会是red

        body p {
            color: red !important;
        }
        .demo {
            color: green;
        }
        #box.demo{
            color: blue;
        }

行内式权重高于其他选择器，低于important

 <p class="demo" id="box" style="color: red;">看看文字样式是什么?</p>

层叠性总结：