这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

CSS是什么？

全程: Cascading Style Sheets（取首字母简称为CSS）

作用

用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

常见选择器写法

一般我们会在html标签上面写一个类式标签，class，之后在专门写css的地方写它的样式，用过：“ . + 类名 ”的形式

不过在下面这个案例里面，我们是直接使用标签名作为css的选择器名字了，之后我们会选择对应的选择器，添加相关的属性，还有对一些变量进行声明

在页面里使用CSS的地方

1、外联式一般我们在项目里面都是写成外联式的，因为这样分开的话，方便写代码，也好管理 2、嵌入式一般在一些小的页面，或者是我们事先写出一个样例demo，为嵌入式，之后再拆分成对应的react代码 3、内联式这个一般需求小的时候可以直接这样写，不过这样写很麻烦，因为后期我们在学校react框架的时候，这个内联的css样式需要去修改，从而适应react的jsx语法格式，需要套双层大括号

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
  <style>
    h1 {
      color: orange;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>Web框架的架构模式探讨</h1>
  <p>在写干货之前，我想先探讨两个问题，
  模式的局限性？模式有什么用？</p>
</body>
</html>

展示效果：

CSS是怎么工作的？

首先需要加载html文件代码，之后浏览器会对html文件进行拆解解析，看到css代码后，开始加载css，之后解析css代码，同时浏览器还会根据html代码创建对应的DOM树，之后等css解析出来后，将css样式添加到DOM节点上，就可以成功的展示出页面了

走进前端技术栈CSS | 青训营笔记

CSS是什么？

作用

常见选择器写法

在页面里使用CSS的地方

CSS是怎么工作的？