聊一聊 CSS 样式的导入方式

一、CSS 的导入方式有哪些

1、内联样式,在HTML 元素上使用 style 属性,设置当前标签元素的样式

html 复制代码
<p style="color: red;">Hello world!</p>

2、嵌入样式表,直接在head标签内使用style标签定义元素样式

html 复制代码
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3、在HTML中使用Link标签导入外部样式表

html 复制代码
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

4、在 CSS 文件中使用 @import 规则导入外部样式表

css 复制代码
@import url("styles.css");

其中,内联样式和 style 标签的样式定义直接写在HTML文件中,而使用 Link 和 @import 导入外部样式表需要将样式定义单独写在CSS文件中。外部样式表和导入样式表的优势在于可以在多个HTML文件中共享同一套样式。

可以同时导入多个样式表。
可以指定样式表的媒体类型,例如screen、print、all等,以根据不同的媒体类型应用不同的样式。
页面加载时会同时加载样式表,不会阻塞页面的渲染。
可以使用rel属性指定样式表的关系,如stylesheet表示样式表。
可以使用href属性指定样式表的URL。

三、@import 规则的特点

@import规则是CSS的一种规则,用于在样式表中导入其他样式表。它必须写在样式表的最前面。
只能导入一个样式表,不能同时导入多个样式表。
不支持指定样式表的媒体类型。
页面加载时会依次加载样式表,每个样式表加载完后再加载下一个,可能会阻塞页面的渲染。
可以在样式表中使用@import规则导入其他样式表,也可以在导入的样式表中使用@import规则继续导入其他样式表。

四、CSS之link导入和@import导入的区别

  1. 首先,link是一个标签,不仅可以引入css样式表,还可以处理RSS 等,@import是css中的规则,只能用于引入css。
  2. link载入css是和页面同时载入的,但是@import是在页面加载完之后加载的。
  3. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  4. link支持使用Javascript控制DOM去改变样式;而@import不支持。
  5. link的权重比@import高(有争议,但是更相信这种说法)。
  6. link 标签可以在HTML的标签中进行导入,也可以在 body 标签中进行导入,而 @import 规则只能在 CSS 文件中使用。
相关推荐
qq_411671981 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js