css四种导入方式

1 行内样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: blue">我是标题</h1>
</body>
</html>

浏览器翻译如下：

2 页内样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        h1{
            color: green;
        }
    </style>
<body>
<h1>我是标题</h1>
</body>
</html>

浏览器翻译如下：

3 外部样式

3.1 链接导入

html文件：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<h1>我是标题</h1>
</body>
</html>

css样式：


/*外部样式*/
h1{
    color: yellow;
}

目录结构：

浏览器翻译如下：

注意： 当三种样式同时存在时：优先级为【行内样式>页内样式>外部样式】，测试如下：

如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    h1{
        color: blue;
    }
</style>
<link rel="stylesheet" href="css/style.css">
<body>
<h1 style="color: green">我是标题</h1>
</body>
</html>

浏览器翻译如下：

发现当三者同时存在时，行内样式的优先级是最高的。

3.2 @导入式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <style>
    @import url("css/style.css");
  </style>
<body>
<h1>第四种导入方式</h1>
</body>
</html>

目录结构和上述一致

浏览器翻译如下

相关阅读:
9 STM32标准库函数之独立看门狗（IWDG）所有函数的介绍及使用
python视频转码脚本
CSS的Grid布局与Flex布局
Kotlin学习（一）
flutter瀑布式图文列表
物联网开发笔记（7）- 使用Wokwi仿真ESP32开发板实现LED灯点亮、按钮使用
数据可视化项目管理软件推荐：提升团队效率的利器
Linux之挂载新的硬盘
86.（cesium篇）cesium叠加面接收阴影效果（gltf模型）
第3章-8 字符串逆序

原文地址：https://blog.csdn.net/qq_50652600/article/details/134058830