CSS02:四种CSS导入方式

CSS的4种导入方式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--内部样式-->
  <style>
    h1{
      color: green;
    }
  </style>
  <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--优先级就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body> 
</html>
css 复制代码
/*外部样式*/
h1{
    color: yellow;
}

拓展:外部样式的两种写法

  • 链接式

    html

    复制代码
    <!--外部样式-->
    <link rel="stylesheet" href="CSS/style.css">
  • 导入式

    css2.1

    html 复制代码
    <!--导入式-->
    <style>
      @import url("css/style.css");
    </style>

基本区别

  1. 从属关系是HTML标签,不仅可以加载CSS文件,还可以定义RSS、rel连接属性等;而@import 是CSS提供的语法规则,只能导入样式表1
  2. 加载顺序 :在页面加载时,标签引入的CSS会同时加载;而@import 引入的CSS会在页面加载完毕后才加载2
  3. 兼容性@import 是CSS2.1才有的语法,只能在IE5+及以上版本识别;而**标签作为HTML元素,没有兼容性问题3
  4. DOM可控性 :可以通过JavaScript操作DOM,插入*标签来改变样式;而 @import*方式无法通过DOM方法插入样式1
相关推荐
誰能久伴不乏28 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端