第五届字节跳动青训营 前端进阶学习笔记（三）CSS基本概念

前言

没看清楚上课时间，错过签到了。。。

课程重点：

• CSS代码构成
• CSS使用方法
• CSS渲染流程
• 调试CSS

CSS是什么

层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

1.CSS基本结构

下面是一个基本的CSS选择器样式结构：

selector {
    property: value;
}

• seletor: 选择器
• property: 属性名
• value: 属性值

2.在面中使用CSS的方式

3.CSS是如何工作的

选择器

1.通配选择器

通配选择器即匹配所有选择器，所有元素都会被应用上通配选择器中设置的属性。

ps.通配选择符的优先级是最低的。

2.标签选择器

标签选择器，即根据标签的名称进行匹配，优先级和伪元素选择器相同。

3.id选择器

id选择器，根据标签上设置的id属性进行匹配，优先级仅次于!import和行内样式。

4.类选择器

类选择器，根据标签上设置的calss属性进行匹配，优先级次与id选择器，和伪类选择器和属性选择器同级。

5.属性选择器

属性选择器,通过标签上设置的具体属性来进行匹配,可以应用正则表达式规则。

6.伪类选择器

• 不基于元素和属性定位元素
• 伪类类型：
  • 状态型伪类
  • 结构型位列

（1）状态型伪类

（2）结构型伪类

7.选择符

颜色

• 通过color属性设置
• color属性的值可以设置为多种不同的颜色类型

1.RGB颜色

使用6位16进制来分别表示Red、Green和Blue三种颜色，每种颜色各占2位16进制位。

2.HSL颜色

3.alpha透明度

字体

1.font-family

font-family属性用来设置元素的字体族，CSS定义了以下五种通用字体族:

• 衬线字体：字形宽度各异，而且又衬线。因为字体不同字符的尺寸不同，因此宽度有差异。
• 无衬线字体：字体中的字形宽度各异，而且无衬线。
• 等宽字体：字形宽度一样。一般用于表示编程代码或者表格数据。这种字体各个字符在横向上所占的空间使用一样的。
• 草书字体：模仿人类笔迹或手写体。通常在笔划末端有较大的花饰，而且比衬线字体华丽。
• 奇幻字体：没有统一的特征。

ps.建议在字体列表的最后加上通用字体族，尽量将英文字体放在中文字体之前，因为有些中文字体可能包含因为字体而导致英文字体没有生效。

2.font-size

font-size属性被用来设置元素的字号。它的值可以是关键字、单位长度和百分比。当元素的font-size被设置为百分比的时候，它的大小是相对于父元素计算的。

3.line-height

line-height指行的基线之间的距离，与字号无关，决定着元素所在方框的高度是增是减。line-height并不会增加或减少行之间的纵向空间，它实际上控制的是行距，即line-height的值与字体高度之差。

4.text-align

text-align属性被用来设置元素内行内元素的对齐方式。常用属性有：center、left、right和justify。默认值为left；

5.space

主要有letter-spacing 和 word-spacing两个属性，用来指定字符或单词之间的字符间距。

6.text-indent

文字缩进属性，只对元素内第一行文本做缩进处理，通常用于实现首行缩进。

7.text-decoration

设置元素的装饰线。

8.white-space

设置元素的换行方式。

总结

本次课程主要介绍了CSS的一些基本概念和一些常用的CSS属性，同时还介绍了一些CSS的调试技巧。学好CSS的关键不单只是对各种不同属性的特性了然于心，同时也需要我们保持一颗好奇心，持续关注和学习更多的特性。