css的四种样式及其优先级

最新推荐文章于 2024-09-28 13:56:49 发布

苏雨鱼

最新推荐文章于 2024-09-28 13:56:49 发布

阅读量4.4k

点赞数 4

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_52326740/article/details/121294169

版权

本文介绍了CSS样式的四种应用方式：行内样式、内嵌样式、外链样式和导入样式，并详细阐述了它们的定义及代码示例。同时，讨论了不同样式间的优先级，行内样式优先级最高，其次是内嵌样式、外链样式，最后是导入样式。理解这些概念对于优化网页样式和提升页面加载效率至关重要。

摘要由CSDN通过智能技术生成

行内样式又叫标签样式，它是在标签里面加上style属性

<body>
    <h1>捷克首都机场</h1>
	<h2 style="color: red;">123456789</h2>
</body>

样式写在style标签里面(style标签在head标签内)

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        h1{
        	color: red;
        }
	</style>
</head>

第一步：建立一个.css的文件,在里面写css样式

第二步：head标签内写入link标签(link可以存在在body标签里但是不推荐用)

第三步：link里href属性将css文件引入

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>

特点：把@import放在style标签中

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       @import url(1.css);
	</style>
</head>

这种方式不推荐使用第一因为使用@import导入的css开始不会被加载只有在引用到他的时候浏览器才会下载去加载它这就导致了浏览器无法并行下载所需的样式文件第二如果有多个@import的时候在IE中下载顺序会被打乱 JavaScript无法解析到它网络不好的时候可能会导致浏览器混乱.。

行内样式>内嵌样式>外链样式>导入样式

关注