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

前言

继上一篇前端与HTML的笔记，这次浅记一下CSS

一.什么是CSS

CSS，全称是Cascading Style Sheets，翻译过来是层叠样式表。用来定义页面元素的样式。具体如下：

设置字体颜色

设置位置和大小

添加动画效果

如果把HTML比作一个人的话，CSS就是人身上所穿的华丽的衣装。正所谓，佛靠金装，人靠衣装。由此可见，运用好CSS，无疑可以让我们所设计的页面更加的华丽，更加的赏心悦目。

二.了解CSS

1.CSS规则

CSS的核心功能是将CSS属性设置为特定的值，这样的一组键值对被称为声明

color：white

如果使用{}将一个或者多个声明包裹起来的话，这样就组成了一个声明块

{
    color:white
    font-size:14px
}

在这样的基础上，要将声明块作用到特定的HTML元素上的话，就需要加上选择器。

h1{
    color:white
    font-size:14px
}

这样选择器和声明块的组合，就组成了CSS规则集，简称为CSS规则

三.使用CSS

1.使用CSS的方法

在页面使用CSS有三种方法：外链式，内联式，嵌入式

外链式：
<link rel="stylesheet" href="./assets/styles.css">

内联式
<span style="color:blue;margin:0 auto">Hello World</span>

嵌入式
{
    h1{ margin:0 auto;background-color:gray }
    p{ font-size:10px }
}

2.CSS是如何工作的

当我们访问网页时，浏览器开始加载接收服务器传来的HTML文件，解析HTML文件，这时会将HTML结构转化为DOM树，当拉取到CSS时会进行解析，形成CSS规则树，将其添加到DOM节点上形成渲染树（Rander树），之后布局Rander树，负责各元素大小，位置的计算，绘制Rander树，绘制页面像素信息，最后浏览器将各层信息发送给GPU，GPU将各层合成，显示在屏幕上。

3.重绘与回流

CSS中的回流与重绘是指当HTML或CSS节点发生变化时，浏览器重新绘制和展示页面的过程。回流和重绘会导致浏览器性能降低，应尽量减少。

重绘

重绘即为repaint，指重新进行绘制 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不会影响布局的操作，比如修改 background-color，我们将这样的操作称为重绘。

回流

回流：即为layout或reflow，指重新进行布局 当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流的方法有：

添加或删除可见的DOM节点
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在 input 框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
当修改网页的默认字体时。
调用window.getcomputedstyle方法

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。重绘和回流是减缓js的几大主要原因，尤其回流更是性能杀手，我们应该尽量避免。

优化方案

避免逐项更改样式，使用class类对样式进行统一更改，减少回流。

避免循环操作DOM。

尽量避免多次获取offsetXXX、scrollXXX、clientXXX等属性，如果不能避免则用变量保存来尽量减少回流。

动画效果应用于position为absolute或fixed的元素上，动画因为脱离文档流，减少回流与重绘。

为动画开启GPU加速，开启css3动画加速的本质是渲染元素图层在GPU中 transform 属性不会触发重绘。所以尽量使用transform: translate()代替left与top进行动画。

4.选择器

常见的选择器

元素器：找出页面中的元素，以便给他们设置样式。

使用多种方式选择元素

按照标签名、类名或id

按照属性

按照DOM树中的位置

常见的选择器有：简单选择器，id选择器，组合器选择器，伪类选择器，伪元素选择器，属性选择器

元素选择器

元素选择器根据元素名称来选择HTML元素

span{
    color:blue;
    font-size:25px;
    }

id选择器

id选择器指定具有ID的元素的样式

给“id=a”的元素添加样式
#a{
    background-color:red
   }

组合器选择器

组合器是解释选择器之间关系的某种机制。

CSS 中有五种不同的组合：

伪类选择器

伪类用于定义元素的特殊状态

例如，它可以用于：

设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

//未访问链接字体为红色
    a:link {
      color: red;
    }
//访问链接后字体变为绿色
    a:visited {
      color: green;
    }
//匹配页面首个<p>元素
    p:first-child {
      color: blue;
    }
//匹配所有 <p> 元素中的首个<span>元素
    p span:first-child {
      color: blue;
    }
//匹配所有首个 <p> 元素中的所有<span>元素
    p:first-child i {
      color: blue;
    }
**为属性为 lang="en" 的 <q> 元素定义引号：
CSS:
    q:lang(en) {
      quotes: "~" "~";
    }
HTML:
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

伪元素选择器

CSS 伪元素用于设置元素指定部分的样式

例如，它可用于：

设置元素的首字母、首行的样式

在元素的内容之前或之后插入内容

//向文本的首字母添加特殊样式
    p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }

CSS所有伪元素： CSS所有伪类

属性选择器

设置带有特定属性或属性值的 HTML 元素的样式

//选择所有带有 target 属性的 <a> 元素
    a[target] {
      background-color: yellow;
    }

5.继承

当子元素的某些属性没有设置特定的值时，会自动继承其父元素的计算值，除非显式指定一个值

例：如上图 <span> 内容没有设置颜色，而父元素<p>上设置了颜色，则子元素继承了父元素的color属性

四.CSS计算过程

总结

简单总结了下CSS的要点，作为前端三件套之一，其中还是有很多细节需要我们注意的。

浅谈CSS|青训营笔记

前言