几种常见的方式可以引入CSS文件

最新推荐文章于 2024-07-16 20:51:21 发布

wsl394049743

最新推荐文章于 2024-07-16 20:51:21 发布

阅读量432

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/wsl3465205046/article/details/139962752

版权

使用 <link> 标签将外部样式表引入HTML文档。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

在HTML文档中使用 <style> 标签定义内部样式。

<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>

直接在HTML元素的 style 属性中定义样式。

<body style="background-color: lightblue;">
</body>

在CSS文件中使用 @import 规则引入另一个CSS文件。

@import url('styles.css');

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="responsive.css">
</head>

/* main.css */
@import url('styles.css');
@import url('responsive.css');

总结：对于性能和浏览器兼容性考虑，推荐使用 <link> 标签来引入CSS文件。@import 规则可以在CSS文件中实现样式的模块化，但要注意它对加载顺序和性能的影响。

关注