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

这节课讲了什么？

css的组成部分
css里面多种多样的选择器
css选择器的组合方式
css字体拥有的颜色及其他属性
文本调试

了解css

css是什么？

css：中文翻译是层叠样式表

css的组成部分

在页面中使用css

一般来讲有三种办法：

外链式：这个是最推荐的方法，因为我们更喜欢分离式模块化的使用方式
嵌入式
内嵌式：好处是不用再写选择器，但不推荐

css是如何工作的？

css中的选择器Selector

通配符选择器

* {
     margin: 0;
     padding: 0;
  }

标签选择器

h1 {
		color: aqua;
}
p {
		color: gray;
		font-size: 14px;
}

id选择器

#day1 {
        color: aquamarine;
}

类选择器

.done {
      text-decoration: line-through;
}

属性选择器

input[type=“password”] {
    background-color: #fff;
    color: #999;
}

伪类选择器（pseudo-classes）

不基于标签和属性定位元素
几种伪类

- 状态伪类
- 结构性伪类

状态伪类：只有处于某种状态的标签才会被选中

a:hover{
		color:red;
}

结构伪类：依据dom树结构来区分选择标签

li:first-child{
    background-color: #fff;
}

选择器组合

选择器组

文字属性之color

字体font-family

字体族概念，我们指定多个字体，如果没有第一个就会用第二个，一般都会选择其中有的一个来用。

比较建议加入一些通用字体来显示得更好

但是先下载后使用会损失一部分性能

字体字重

行高line-height

base line之间的距离

white-space

处理换行和空白符

调试css

利用浏览器的调试工具，可以调试也可以查找错误

总结

总的来说讲解的主要部分集中在css的选择器的介绍和使用上面，同时选择器作为css里极为重要的选择工具也是需要我们熟练掌握。

p.s.补充一下css选择器权重

选择器的种类

!important
内联样式
ID选择器
class选择器（类选择器）
元素选择器
通配符选择器、

选择器	权重
！important	最高
内联样式	1000
id选择器	100
类选择器	10
元素选择器	1
通配符选择器	0

css深入（上）

本节课讲了什么？

哪条规则生效
选择器的特异度（specificity）
css求值过程
css继承
布局是什么
布局相关技术

怎么样确定哪一条规则生效？

取决于选择器的特异度

css的继承

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

初始值

不可继承时，或者未定义的时候，便自动确定为初始值

css求值过程

布局是什么？

布局相关技术

css一切的基础-盒模型

width

指定content box的宽度
取值为长度，百分数，auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度

height

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

内外边距

padding

border

border的属性

三种属性

- border-width
- border-style
- border-color

四个方向

- border-top
- border-left
- border-right
- border-bottom

margin

指定元素四个方向的外边距
取值为长度，百分数，auto
百分数相对于容器宽度

水平居中效果

margin collapse 塌陷

解决方式-border-box

内容溢出 overflow

css深入（下）

块级vs.行级

以上就是本篇所有内容了，如果有不正确的地方，欢迎大家指正。如果喜欢麻烦点个赞~

[ 前端与 HTML | 青训营笔记]