css导入方式

外部样式表是存储在独立的.css文件中的CSS规则，并通过HTML文档的部分使用标签引入。这是最常用的CSS导入方式，因为它允许样式在整个网站中重用。

CSS @import规则

@import规则允许在一个CSS文件中导入另一个CSS文件。这可以在一个主样式表中组织和包含其他样式表。

/* 在styles.css文件中 */
@import url('imports.css');

body {
  font-family: Arial, sans-serif;
}

优先级和层叠

CSS的层叠性质意味着多个规则可能会应用于同一个元素，并且它们的优先级是不同的。通常情况下，内联样式的优先级最高，其次是内部样式表，然后是外部样式表。如果多个规则具有相同的优先级，则最后定义的规则将被应用。

媒体查询

媒体查询允许您根据不同的媒体类型（如屏幕、打印）或特性（如宽度、分辨率）来应用不同的CSS规则。这使得响应式设计成为可能。

/* 针对屏幕宽度小于600px的设备 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

CSS预处理器

CSS预处理器（如Sass、LESS和Stylus）提供了变量、嵌套规则、混合（mixins）和函数等高级功能，使得CSS的编写更加高效和可维护。预处理器最终会被编译成标准的CSS代码。

CSS in JS

随着前端框架和库的发展，如React和Vue，CSS in JS的概念变得越来越流行。这种方式允许开发者在JavaScript文件中直接编写样式，通常用于构建高度动态的用户界面。

结论

CSS的导入方式多样，每种方式都有其适用的场景。内联样式适合快速的一次性样式定义，内部样式表和外部样式表则更适合需要在整个文档或多个文档中共享的样式。@import规则和媒体查询提供了更高级的样式组织和应用方式。CSS预处理器和CSS in JS则是现代前端开发中的新趋势，它们提供了更多的灵活性和功能。了解这些不同的CSS导入方式，可以帮助开发者根据项目需求和个人偏好选择最合适的方法。