# 这是我参与第五届青训营伴学笔记创作活动的第二天!

学习使我快乐.jpeg

今天学习了CSS的很多内容，整理的不好还请各位小伙伴见谅.^.^

首先CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用，接下来这部分是CSS的一些基础知识介绍。

主要内容

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

什么是CSS？

用来定义页面元素的样式：

设置字体和颜色
设置位置和大小
添加动画效果

如何在页面中使用CSS？

内嵌式：css写在style标签中通常写在head标签中

外联式：css写在一个单独的.css文件中通过link标签在网页中引入

行内式：css写在标签的style属性中

推荐使用外联式，各自实现各自的功能。

CSS是如何工作的？

从图中我们可以看到首先浏览器先加载html文件进行解析，然后创建对应的DOM树，同时加载CSS文件并解析添加节点到DOM树中，最终形成我们看到的页面。

CSS中的选择器有哪些？

选择器Selector

用途：找出页面中的元素，以便给他们设置样式

使用多种方式选择元素：

按照标签名、类名或id
按照属性
按照DOM树中的位置

一、标签选择器：寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。

二、类选择器：CSS 类选择器会根据元素的类属性中的内容匹配元素。

类名可以由数字、字母、下划线和中划线组成，但不能以数字或者中划线开头。
一个标签可以同时拥有多个类名，类名之间以空格隔开。

三、id选择器：在一个 HTML文档中，CSS ID选择器会根据该元素的ID属性中的内容匹配元素, 元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

id属性值不可重复有唯一性
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

四、通配符选择器：在 CSS 中，一个星号{ }就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。

五、属性选择器：CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

例如：
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。
[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。