CSS02:四种CSS导入方式

CSS的4种导入方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  
  <style>
    h1{
      color: green;
    }
  style>
  <link rel="stylesheet" href="CSS/style.css">
head>
<body>


<h1 style="color: red">我是标题h1>
body> 
html>
/*外部样式*/
h1{
    color: yellow;
}

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

  • 链接式

    html

    
    
    
  • 导入式

    css2.1

    
    <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。

你可能感兴趣的:(css,前端)