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

CSS初识

css是什么

css:Cascading Style Sheets 层叠样式表
用来定义页面元素的样式：设置字体和颜色，设置位置和大小，添加动画效果等

页面中使用css的方法

外链：<link rel="stylesheet" href="...">
嵌入：<style>...</style>
内联：<p style="margin:lem 0">example content</p>

css是如何工作的

浏览器加载HTML->解析HTML->加载CSS->解析CSS->添加样式到DOM树中的DOM节点，形成渲染树->展示页面

选择器Selector

作用

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素：

按照标签名/类名/id
按照属性
按照DOM树中的位置通配选择器: * {...}
标签选择器:p{...}
id选择器：给元素添加id属性，#+id属性值
类选择器：给元素添加class属性，·+class属性值
属性选择器：

<input value="zhao" disabled />
<style>
  [ disabled ] {
      background: #eee;
      color: #999;
  }
</style>

//属性值为一个特殊值时才选中
<input type="password" value="123456" />
<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

<a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>
<style>
  a[href^="#"] {...} //href值以#开头会被选中
  a[href$=".jpg"] {...} //href值以.jpg结尾会被选中
</style>

伪类

不基于标签和属性定位元素
分类:

状态伪类：根据元素状态来选中元素
结构性伪类:在父级节点中的相对位置，:first-child :last-child等

//状态伪类
<style>
  a:link {
    color:black;
  } //链接的默认状态字体黑色
  a:visited {
    color: gray;
  } //访问过后链接字体灰色
  a:hover {
    color: orange;
  } //鼠标悬停时链接字体橙色
  a:active {
   color: red;
  } //点击链接使其响应时字体红色
  :focus {
   ...
  } //哪个元素获取焦点后都应样式变化
</style>

组合

直接组合 AB 满足A同时满足B eg:input:focus
后代组合 A B 选中B,如果他是A的子孙 eg:nav a //选中nav下的所有a标签
亲子组合 A > B 选中B,如果它是A的子元素 eg:section > p
兄弟选择器 A ~ B 选中B，如果它在A后且和A同级 eg:h2 ~ p
相邻选择器 A + B 选中B,如果它紧跟在A的后面 eg:h2 + p
多个选择器设置相同的样式时，可将其放在同一个选择器组中

颜色

RGB

指定红、绿、蓝三原色数量多少（比例）来改变颜色，范围都是0~255
#8fac87 #开头，每两位分别是红、绿、蓝对应数量的十六进制表示
不足之处：颜色和对应编码难以记忆、关联

HSL

Hue:色相是色彩的基本属性取值范围0 ~ 360 红色值为0
Saturation:饱和度是色彩的鲜艳度值越大颜色越鲜艳取值范围0 ~ 100%
Lightness:亮度是颜色的明亮程度值越大颜色越亮取值范围0 ~ 100%

字体 font

font-family

多个值用,分隔，根据设备拥有的字体依次匹配

通用字体族

Serif:衬线体如Georgia、宋体
Sans-Serif：无衬线体如Arial、Helvetica、黑体、微雅软黑
Cursive:手写体如Caflisch Script、楷体
Fantasy:较夸张的有设计感艺术感的一些字体如Comic Sans MS、Papyrus
Monospace：等宽字体编程中编译器常用字体如Consola、Courier、中文字体 font-family值最后一定要加上通用字体族中一种，通常英文字体写在中文字体前

font-size

px像素，em、%都是相对父级元素的百分比

font-weight

取值100~900 值越大字体越粗
400-normal
700-bold

line-height

行高取值无单位时行高为自身字体大小的多少倍 line-height和元素height值相同时可保证元素内容垂直居中

white-space

用于控制空白符，换行等

normal:默认将多个空格合并成一个空格展示
nowarp:强制不换行
pre:保留空格且保留换行
pre-wrap:保留空格，一行显示不下时会自动换行
pre-line:合并空格，保留换行

调试CSS

右键点击页面，选择'检查' 或者使用快捷键 Ctrl+Shift+I

深入理解CSS

选择器的特异度 Specificity

按#(id) .(（伪）类) E(标签)的顺序来比较
根据特异度不同可以进行一些属性的覆盖

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值，一般font,color属性会继承 inherit关键字显示继承父元素某属性计算值

初始值

CSS中每个属性都有一个初始值，如background-color初始值transparent,margin-left初始值0
可以使用initial关键字显示重置为初始值

CSS求值过程

浏览器拿到HTML后将其解析成一个DOM树，将link/style等样式搜集起来形成样式规则，为了布局、渲染界面，遍历所有元素所有属性值；首先需要对页面规则进行筛选(filtering)：选择器匹配，属性有效，符合当前media等，拿到元素属性声明值（可能会有多个），然后层叠(cascading),根据来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值，得到了层叠值（层叠过程中优先级最高的值），当层叠值为空时使用继承或初始值(defaulting)，经过层叠和defaulting过程指定值唯一且不为空，将一些相对值或者关键字化成绝对值(resolving)（em转化为px,相对路径转化为绝对路径），此时得到计算值，将计算值进一步转换(formatting)（关键字，百分比等都转换为绝对值），得到使用值（浏览器进行实际布局时使用的值），constraining过程将使用值中小数转化为整数，最终得到实际值，即渲染时实际生效的值。

Layout 布局

常规流：行级，块级，表格布局，FlexBox,Grid布局
浮动
绝对定位 tips:margin-left:auto margin-right:auto元素居中显示

块级 | 行级

块级：block,不和其他盒子并列放置，适用所有盒模型属性
行级：inline,和其他行级盒子一起放在一行或拆开成多行，盒模型中width height不适用
块级元素：生成块级盒子，body article div main section h1-6 p ul li等，display:block
行级元素：生成行级盒子，内容分散在多个行盒中，span em strong cite code等，display:inline

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流内(in-flow),常规流中的盒子在某种排版上下文中参与布局

行级排版上下文：IFC,盒子在一行内水平摆放，一行放不下就换行显示，text-align决定一行内盒子的水平对齐，verticle-align决定一个盒子在行内的垂直对齐，避开浮动元素
块级排版上下文:根元素，浮动、绝对定位、inline-block,Flex子项和Grid子项，overflow值不是visible的块盒，display:flow-root这些都会创建BFC,BFC内排版规则：盒子从上到下摆放,垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠行盒嵌套块盒时行盒会被块盒拆分
FlexBox:display:flex,可以控制子级盒子的摆放流向，摆放顺序，盒子宽度和高度，水平和垂直方向的对齐，是否允许拆行。对齐分为主轴和侧轴两个方向上，主轴方向上通过设置justify-content值，侧轴方向上设置align-items值。flexibility来设置子项弹性，flex-grow,flex-shrink,flex-basis,flex综合三个属性，flex:2 1 100px->flex-grow:2,flex-shrink:1,flex-basis:100px
Grid布局：网格布局，通过grid-template-colomuns和grid-template-rows改变网格划分的大小,通过指定grid-column-start,grid-row-start,grid-column-end,grid-row-end指定网格区域

position

static:默认值，非定位元素
relative:相对自身原本位置偏移，不脱离文档流，在常规流里面布局，流内其他元素当他没有偏移一样布局
absolute：绝对定位，相对最近的非static祖先元素定位，脱离常规流，不会对流内元素布局造成影响
fixed:相对于视口绝对定位，脱离常规流，不会对流内元素布局造成影响

总结与感悟

学完CSS后觉得开发者在开发过程中的一些巧思应该都体现在CSS的设计上了。这节课从初步了解CSS和深入了解CSS两步来让我们感受CSS的魅力，我在这个过程中对选择器，还有布局这两部分是相对陌生的，听完老师的讲解后感觉收获颇丰。CSS的魅力在于只是改变某一个属性的属性值就可以让整个页面展示效果焕然一新。学习之路仍然很漫长，需要我继续深入探索。

CSS | 青训营笔记