理解CSS | 青训营笔记

这是我参加【第五届青训营】笔记创作活动的第2天

对前端与html有了初步的了解之后，我们来学习一下css的知识。

一、了解CSS

（一）CSS是什么？

CSS是层叠样式表（Cascading Style Sheets）的缩写。因此，CSS是用来定义页面元素的样式，可以用来设置字体和颜色、设置位置和大小、添加动画效果等。一条典型的css语句如下：

 h1 {
     color：pink；
     size：15em；
 }
复制代码

其中h1为选择器seletor，color为选择器property，white为属性值value，font-size：14px；为声明declaration。

在页面中使用css的方式有三种，分别为外链、嵌入和内联。其中最常用的为外链。

（二）CSS是如何工作的？

我们在打开一个网页的过程中，首先会加载HTML，然后解析HTML，在解析的同时加载并解析CSS，等HTML解析好并创建了DOM树之后，浏览器就会把CSS中的样式添加到对应的DOM树节点。具体的流程图就像这样：

(三)选择器

选择器，顾名思义就是选择页面中的元素，以便给他们设置样式。我们可以使用多种方式选择元素：按照标签名、类名或id、按照属性、按照DOM树中的位置等。

标签选择器 h1 {}

id选择器 #unique {}

类选择器 .box {}

通配选择器 * {}

伪类选择器 p:first-child {}

伪类元素选择器 p::first-line {}

这里要注意：伪类：不基于标签和属性定位元素

包括状态伪类和结构性伪类

选择器组

(四)颜色

基础颜色 color:red;

十六进制颜色

两个字母为一组，分别表示红色、绿色、蓝色 color:#ff0000;

RGB颜色/RGBA颜色

颜色指定：rgba(红，绿，蓝，alpha)alpha表示透明度，取值0-1

e.g. color:rgba(255,0,0,0.5);

HSL颜色/HSLA颜色

颜色指定：hsla(色调，饱和度，亮度，alpha)

e.g. color:hsla(0,100%,50%,1);

(五)字体

常用类型

font-family

使用建议：字体列表最后写上通用字体族；英文字体放在中文额字体前面
font-size

关键字：small、medium、large

长度px、em

百分数：相对于父元素字体大小
font-style
font-weight
line-height
text-align
letter-spacing
text-indent
text-decoration
white-space

(六)调试CSS

右键点击页面，选择【检查】；使用快捷键：Ctrl+Shift+I (Windows);Cmd+Opt+I(Mac)

二、深入了解css

前面我们已经对css有了一定的了解，下面我们就来更加深入地认识css。

(一)选择器优先级

不同的选择器有不同的权重值，权重值的大小构成了选择器的优先级，权重越大优先级越高，同一行的选择器权重，权重大的样式会覆盖权重低的样式。

! important - - - infinity
行间样式 - - - 1000
id 选择器 - - - 100
属性、伪类、类名选择器 - - - 10
标签选择器 - - - 1
通配符选择器 - - - 0

注：权重值是256进制，不是10进制

(二)继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

显式继承

初始值

CSS中，每个属性都有一个初始值:

background-color的初始值为transparend；

margin-left的初始值为0；

可以使用initial关键字显式重置为初始值：

background-color:initial

(三)CSS求值过程

(四)布局

布局是确定内容的大小和位置的算法。依据元素、容器、兄弟节点和内容等信息来计算。网页布局的本质就是用css来摆放盒子，把盒子摆放到相应的位置。

布局相关技术：常规流、浮动、绝对定位。

常规流

最基本的布局方式，包括行级、块级、表格布局、FlexBox、Grid布局。

常见属性

width

指定content、box宽度；取值为长度、百分数、auto

auto由浏览器根据其他属性确定；百分数相对于容器的content box宽度。
height

指定content、box高度；取值为长度、百分数、auto

auto取值由内容计算得来；百分数相对于容器的content box高度；容器有指定的高度时，百分数才生效。
padding

指定元素四个方向的内边距；百分数相对于容器宽度
border

指定容器边框样式、粗细和颜色

三种属性四个方向