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

一、本堂课重点内容

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

二、详细知识点介绍

1.CSS简介

CSS是什么？

Cascadling Style Sheets（层叠样式表）

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

CSS基础的代码构成

如下图所示，选择器（Selector去选一个HTML标签定义样式）+属性（property,选择要修改的属性）+属性值(对属性的定义)
属性与属性值共同构成了一个声明（declaration）

2.CSS的使用方法

在页面中使用CSS的三种方式

1. 外链(用link标签去使用CSS文件进行渲染)
2. 嵌入(用style标签直接写CSS的代码渲染)CodePen Embed - 青训营/CSS/最简Demo
3. 内联（HTML有全局属性syle,我们可以直接在HTML标签中直接用style来写CSS代码） 不推荐使用内联！！！

现在通常使用组件式的开发，使用Vue写在一个单文件里面，也可以做到样式与内容的分离，也做到关注点分离。

CSS是如何工作的？

3.CSS的选择器

选择器（selector）的作用

• 找出页面中的元素，以便给他们设置样式（name,id）
• 使用多种方式去选择元素

1. 按照标签名，类名或者ID
2. 按照属性
3. 按照DOM树中的位置

通配选择器

*{} *指代所有标签
CodePen Embed - 青训营/CSS/统配选择器

标签选择器

p/h1....标签指定样式
CodePen Embed - 青训营/CSS/标签选择器

id选择器

id作为全局属性，可以给任一标签设定id来使用style直接引用id设定样式（id要唯一） CodePen Embed - 青训营/CSS/ID选择器

类选择器

给同一类型的HTML标签设定样式的时候，可以给这些同一类型设定全局属性class来方便设定这一类的统一样式（同样使用style来实现） class可以出现多次，比较常用
CodePen Embed - 青训营/CSS/类选择器

属性选择器

通过一些标签的属性去选择标签设定样式，例如input的disable就可以使用style的[disable]去选中标签设定样式，表示有disable这个属性就可以去选中它
CodePen Embed - 青训营/CSS/属性选择器
如果想让选定属性是一个特定的值时再选中进行样式显示的话，我们可以写成如下 CodePen Embed - 青训营/CSS/属性选择器2
也可以对属性值做一些匹配
a[href^="#"]，表示这个href的属性值以#号开头的话就可以匹配的上
a[href$=".jpg"]，表示href的属性值以.jpg结尾就可以匹配上
CodePen Embed - 青训营/CSS/属性选择器3

伪类（pseudo-classes）选择器

还可以不通过属性选择属性，我们通过伪类（pseudo-classes）这种去选择标签元素

• 不基于标签和属性定位元素
• 分为状态伪类和结构性伪类

状态伪类

状态型的伪类不是说具体指某个元素，这个元素还要处与某种特定的状态下，才会被选中
举例子，链接分为访问过的链接（跟非访问的颜色不一样）和非访问过的链接，鼠标选中链接（一般移到链接上面会变黄），和没有选中的不同状态都可以使用伪类进行修改样式

• a:link默认样式
• a:visited访问过的样式
• a:hover鼠标移上去之后显示的样式
• a:active鼠标按下去之后的显示样式

除了链接之外，其他标签也有多种状态，比如输入框input
默认状态，没点过、点击文字框之后可以输入文字的focus状态
:focus{outline:2px solid orange} outline是选定边框的属性，当被选中时，设定2像素橘色边框，值得注意是链接在按下去之后，也是focus状态。