html插入css层叠样式表

当读到一个样式表时，浏览器会根据样式表格式化html文档

html插入样式表共有三种方式

一、外部样式表

首先，我们需要创建一个css，一般在web项目下的web——>resourse——>css
文件夹下创建，例如，有个css文件example.css
接着就可以在html种插入css，使用<link>标签

<!--rel属性：规定当前文档与被链接文档之间的关系。"stylesheet"是样式表-->
<!--type属性：规定被链接文档的 MIME 类型。-->
<!--href属性：规定被链接文档的位置或者文本路径。-->
<link rel="stylesheet" type="text/css" href="example.css"/>

二、内部样式表

内部样式表直接将样式写在html文档中，用<style>标签

<style>
	p
	{
		color:red;
		text-align:center;
	}
	h
	{
		color:red;
		text-align:center;
	}
</style>
	

三、内联样式表

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。当样式只需要在一个元素上应用一次时，才会使用这种方式。

<p style="color:red;text-align=center">这是一个段落</p>

但html通常并不是单独使用以上三种插入方式，可以同时使用两种或三种，这种方式我们称作多重样式。

这时会产生一个问题，样式是多样的，但html文档元素中每个属性只能选择一种去渲染，究竟选择哪种呢？所以官方规定了多重样式的优先级

（内联样式） Inline style >
（内部样式表）Internal style sheet >
（外部样式表） external style sheet>
浏览器默认样式

例子：
外部样式表拥有针对h3选择器的三个属性

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

内部样式表拥有针对h3的两个属性。

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

说明：我们理解优先级这个概念是针对属性设置的，而不是元素。对于h3这个元素中的属性，根据优先级，先去选择内部样式表，所以text-align:right;font-size:20pt;被选定，选择完后查看外部样式表，text-align和font-size这两个属性的值不会变更，而外部样式表中的color:red;被选中。html选择样式的过程大致就是这样。