CSS根据引入方式可以对样式进行分类

  1. 内联样式
  2. 嵌入样式

  3. 外联样式

    一、内联样式

    又称行内样式，通过标签的公共属性style写入样式

    1. <div style="width:100px; height:100px; background-color:red "></div>

    二、嵌入样式

    在HTML文档中，通过<style>标签引入样式表

    1. <style>
    2. div{
    3.  width:100px;
    4.  height:100px;
    5.  background-color: red;
    6. }
    7. </style>

    三、外联样式

  4. 方式一：通过位于head标签中的link标签，建立当前HTML文档与CSS文件的样式表引用链接关系，从而将该CSS文件的样式引入文档中

    1. <head>
    2. <link rel="stylesheet" href="./index.css" />
    3. </head>
    1. /* 与该文档同级目录下的index.css */
    2. div{
    3.  width:100px;
    4. height:100px;
    5. background-color:red;
    6. }

  5. 方式二：通过CSS提供的@import语法，在样式表中链接其他样式表（内联样式与外联样式均支持该语法）**不推荐使用该方法**

    1. @import url("./other.css");

课外扩展

外联样式的两种方式的区别

  • 用法区别
    • link是HTML提供的标签，不仅用于引入CSS，还可以与其他资源建立联系
    • @import是CSS2.1中提出的语法，只有导入样式表的作用，且其必须位于样式表首行
  • 兼容性区别
    • link由于是HTML标签，不存在兼容问题
    • @import由于是CSS2.1提出的语法，需要IE5+的浏览器环境（如今算没兼容问题）
  • 加载顺序区别
    • link标签引入的CSS会与HTML同时加载
    • @import语法引入的CSS会等待页面资源均加载后才开始加载，会阻碍渲染的进度
  • DOM可控性区别
    • link可通过JavaScript操作DOM进行动态加载CSS
    • @import无法被操作