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

本堂课重点内容

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染

详细知识点介绍

1、CSS简介：

全称Cascading Style Sheets。用来定义页面元素的样式，包括设置字体和颜色，设置位置和大小，添加动画效果等。

2、CSS代码构成

H1 {clolor:white;font-size:14px;}

选择器Selector{

属性Property：属性值Value}

声明Declaration；}

选择器

找出页面中的元素，以便给他们设置样式；可使用多种方式的元素，如按照标签名、类名或id，按照属性，按照DOM树中的位置等。

通配选择器：*

id选择器：如#logo(需唯一）

类选择器：class（可多次使用）

书写CSS的语法规则：

1、CSS代码是由选择器和一对括号组成。

2、大括号里面是由一条一条的声明语句组成。

3、每一条语句都要使用英文状态下面的分号。

4、CSS中的属性值一般不加引号。

5、在CSS中如果属性值为数字型数据的时候，一般情况下需要加单位，单位一般都是PX（像素）。

6、在CSS中不能出现HTML标签。

3、页面中使用CSS

书写方式分为三种:嵌入式、外链式、内联式

嵌入式

嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中

语法规则:它可以出现在HTML中的任何地方，但一般情况我们只会将它放置在head标签里面。

外链式

外链式：是指单独写一个以.css为扩展名的文件,然后在标签中使用标签，将CSS文件连接到HTML文件中

内联式

将CSS代码书写在HTML标签的style属性中，style是一个通用属性，每一个标签里面都有这个属性。

语法格式:<标签名style=“属性：属性值；属性：属性值”></标签名>

CSS是如何工作的

1、浏览器载入HTML文件（比如从网络上获取）。

2、将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式。

3、接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。

4、浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。

5、上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。网页展示在屏幕上（这一步被称为着色）

参考

1、CSDN

2、RUNOOB

了解CSS|青训营笔记