理解和深入CSS | 青训营笔记

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

一、本堂课重点内容

了解css和其工作原理，深入学习css在页面中的常见布局

二、正题

• css介绍

  css用于定义页面元素的样式，包括位置颜色字体等，基本结构如下
  

• css在页面中的使用

  css有如下三种使用方式，一般使用外链，结构更清晰且便于复用
  

• css的工作流程（后面有更详细的原理）

• css选择器的介绍

    css通过选择器给不同的元素写相应的样式。
    选择器包含：通配选择器，标签选择器，类选择器，id选择器，属性选择器，伪类选择器。
    重点介绍一下属性选择器和伪类选择器的点。
    以下分别为属性，状态伪类和结构性伪类
  

• 选择器的组合

• 常见的属性

    颜色，字体组(建议先英文字体再中文)，fonts及相关行高间距等等。
  

• 选择器优先级

    如下图按122>022,上一个优先
  

• 继承

    一般与文字相关属性（如颜色，大小）会继承父属性，与盒子相关（如宽高）不会
    
    显示继承小tip:不能继承的属性如下操作可让属性在不同元素里不同特性
  

• css计算过程

    如下图
    补充：计算值是能从书写的html,css得出的；formatting过程将如在不同机器下不同的值算出