首页简述CSS引入页面的三种方式和优先级

简述CSS引入页面的三种方式和优先级

时间: 2023-05-16 16:05:31 浏览: 139

css的三大引入方式

5星 · 资源好评率100%

css的引入方式一、 css的引入方式 css的引入方式有三种：内部样式、外部样式和内联样式（行内样式）。下面是对三种引入方式的详细介绍。（1）内部样式语法：在head标签添加style标签例如：（2）外部样式语法：在head标签添加link标签，在属性href中填写新建的css文件路径——外部样式表例如： css文件中可以进行样式修饰，例如：（3）内联样式语法：直接在需要修饰的标签中添加属性style，然后进行修饰例如：二、三大样式表对同一属性进行操作的解析规则（1）内联样式权重最大说明：若三大样式对同一标签的同一属性进行修饰，则显示的是内部样式的

CSS可以通过以下三种方式引入页面： 1. 内联样式：将CSS代码直接写在HTML标签的style属性中，如下所示： <div style="color: red; font-size: 16px;">Hello World!</div> 内联样式的优先级最高，会覆盖外部样式和内部样式。 2. 内部样式表：将CSS代码写在HTML文档的<head>标签中的<style>标签内，如下所示： <head> <style> div { color: red; font-size: 16px; } </style> </head> <body> <div>Hello World!</div> </body> 内部样式表的优先级高于外部样式表，但低于内联样式。 3. 外部样式表：将CSS代码写在一个独立的CSS文件中，然后在HTML文档中通过<link>标签引入，如下所示： <head> <link rel="stylesheet" href="style.css"> </head> <body> <div>Hello World!</div> </body> 外部样式表的优先级最低，会被内联样式和内部样式表覆盖。注意：当多个样式规则应用于同一个元素时，优先级由高到低依次为：内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器 > 通配符选择器。如果优先级相同，则后面的规则会覆盖前面的规则。

阅读全文