当读到一个样式表时,浏览器会根据样式表格式化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选择样式的过程大致就是这样。
如果觉得《html插入css层叠样式表》对你有帮助,请点赞、收藏,并留下你的观点哦!