【01】css引入方式详解

hjuan___

已于 2024-12-28 21:13:37 修改

阅读量549

点赞数 11

分类专栏： CSS 文章标签： css 前端

于 2024-12-28 19:59:06 首次发布

本文链接：https://blog.youkuaiyun.com/hejuan___/article/details/144794147

版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

css引入方式详解

CSS的引入方式：内联样式(也称为行内样式)，内部样式，外部样式

一、内联样式

<运行结果>

<body>
    <p style="background: red; font-size: 20px">这是段落1</p>
  <!--  css引入方式中的内联引用 -->
  <!--缺乏整体性和规划性，维护成本高【说人话就是这里设置的style就不能用在下面新添的p标签中】-->
    <p>这是段落2</p>
  </body>

二、内部样式

<运行结果>
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: red;
        /* 设置字体颜色 */
        font-size: 20px;
        /* 设置字体大小 */
      }
    </style>
    <!-- css引入方式中的内部引用 -->
    <!-- 用<style>标签在文档头部来定义内部样式表 -->
    <!-- 便于维护，但是在多个页面之间容易混乱 -->
  </head>
  <body>
    <p>这是段落</p>
  </body>
</html>

三、外部样式（推荐）

【推荐原因：改变index.css里的内容，就能直接改变整个站点的外观】
创建外部样式详细过程：

1.创建css文件：

2.index.css文件中的内容：

p {
  color: red;
  /* 设置字体颜色 */
  font-size: 20px;
  /* 设置字体大小 */
}

3.index.html文件中的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
    <!-- 需要使用<link>标签链接到样式表（index.css） -->
  </head>
  <body>
    <p>这是段落</p>
  </body>
</html>

<运行结果>