什么是 CSS

找对人，做对事

mindmap
      CSS
          简介
            前端三层
            CSS使样式结构分离
         书写位置
            内嵌式
            外链式

CSS简介：CSS（层叠样式表），是用来给HTML标签添加样式的语言。
前端三层

前端三层	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

CSS使样式结构分离：样式和结构不用杂糅着写，而是分开写。HTML 负责结构，CSS 负责样式，它们之间又通过“选择器”结合在一起。
书写位置：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS基础</title>
    <!-- CSS代码 -->
    <style>
      h1{
        color: red;
      }
      p{
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <h1>这是一级标题</h1>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
    <p>这是段落</p>
  </body>
</html>

CSS的本质：就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条的罗列”出来。
内嵌式写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS基础</title>
    <!-- 内嵌式 -->
    <style>
      p{
        color: darkmagenta;
      }
    </style>
  </head>
  <body>
    <p>这是段落</p>
  </body>
</html>

外链式写法：将 CSS 单独存为 .css 文件，然后使用 <link> 标签将其引入。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS基础</title>
    <!-- 外链式 -->
  <link rel="stylesheet" href="./index2.css">
  </head>
  <body>
    <p>这是段落</p>
  </body>
</html>

以上内容是对 CSS 的一个简单介绍，下一篇将继续介绍 CSS 的选择器。

CSS基础学习（一）

什么是 CSS

找对人，做对事