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
相关推荐
Sun_light7 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子9 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000010 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心10 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm14 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v19 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠20 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue22 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷26 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016128 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js