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

一、本堂课的重点内容

1、css是什么？

Cascading Style Sheets --层叠样式表
定义页面元素的样式

css的基本：

h1{
    color: blue;
    font-size: 14px;
}

h1:选择器 Selector
设置元素属性（color）：选择器 property
属性值（white/14px）：属性值 Value
一整个（font-size: 14px;）：声明 Declaration，多条声明组成一个声明块
（h1{ color: blue; font-size: 14px; }）：是规则

2、在页面中使用css-三种方式

①外链（推荐）

内容和样式分离，html负责内容，css负责样式

 <link rel="stylesheet" href="index.css">

②嵌入

 <style>
    li{margin: 0;list-style: none;}
    p{margin: lem 0;}
</style>

③内联（不太推荐）

把多余的属性直接写到标签里面，不需要写选择器

 <p style="margin: lem 0">p标签</p>

3、css是如何工作的

浏览器加载html的时候，先解析html，创建dom树，加载css，解析css，然后将解析好的css样式添加到dom节点上，最后呈现出页面

4、选择器 Selector

①通配选择器

是 * 匹配所有的标签

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

展示：

②标签选择器

用标签来设置样式

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}

展示:

③id选择器

一般给id设置属性时，id是唯一的

④类选择器

对于同一样式可以加一个类选择器，class可以出现多次，比较常用

⑤属性选择器

⑥伪类

某种元素处于不同的状态去选择，状态伪类，结构伪类

⑦选择器组

5、颜色

-RGB：指定每种元素（红黄蓝）数量的多少，调节颜色 -HSL：色相（H）鲜艳程度（S）饱和度（L）

6、字体 font-family

设置多个，每个设备可以去匹配

二、个人课堂总结这节课我学会了css的工作流程和原理，一些css的样式，巩固了css的基础。

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