网络日志

CSS 的三种引入方式

按照 CSS 样式的引入方式,可以分为三大类:行内式、嵌入式、链接式。

1、行内式 —— 行内样式表

行内样式表是在元素标签内部的 style 属性中设定 CSS 样式,适用于修改简单样式。

<div style="color: red; font-size: 12px;">我是红色文字</div>

说明:

  • 属性要写在双引号之间,并且符合 CSS 规范
  • 只可以控制当前标签的样式
  • 样式与结构没有分离,不推荐大量使用

2、嵌入式 —— 内部样式表

内部样式表是在 html 内部,将页面所有的 CSS 代码抽取出来,放到一个单独的 <style> 标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

说明:

  • <style> 标签理论上可以放在 HTML 文档的任何位置,但一般会放在 <head> 标签中
  • 这种方式可以控制当前页面中的元素样式
  • 代码结构清晰,但样式与结构没有完全分离

3、链接式 —— 外部样式表

实际开发中大多都是用外部样式表,样式写到单独的 CSS 文件中,之后把 CSS 文件引入到 HTML 页面中使用。

步骤1: 新建一个 .css 为后缀名的文件,将所有 CSS 代码放到这个文件步骤2: 在 HTML 页面,用 <link> 标签引入 CSS 文件

<!-- rel 定义当前文档与被链接文档之间的关系。-->
<!-- 指定为 “stylesheet”,表示被链接文档是一个样式表文件 -->
<!-- href 可以是绝对路径也可以是相对路径-->
<link rel="stylesheet" href="css文件路径">