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

走进前端技术栈-CSS

CSS是什么？

Cascading Style Sheets

用来定义页面元素的样式：设置字体和颜色、设置位置和大小、添加动画效果；

在页面中使用CSS的形式

1.外链 2.嵌入 3.内联（不推荐）

CSS是如何工作的？

选择器

Selector

1.找出页面中的元素，以便给他们设置样式

2.使用多种方式选择元素： a.按照标签名、类名或id b.按照属性 c.按照DOM树中的位置；

通配选择器

标签选择器

id选择器

id的值在页面中是唯一的；

类选择器

给同一类型的标签设置样式可以使用class选择器；

属性选择器

通过元素的属性和属性值来选择这个元素

伪类（pseudo-classes）

1.不基于标签和属性定位元素；

2.伪类分为 状态性伪类 和 结构性伪类；

状态性伪类

元素处于某一种特定状态下才能被选中，比如链接。

结构性伪类

组合（Combinators）

选择器组

用逗号隔开

颜色

RGB

三原色：红、绿、蓝；

表示方法：rgb（143，172，135）或#8fac87；

HSL

hsl（18，91%，84%）

alpha 透明度

调低的时候是透明，最大为一，当值为一时是不透明。

#ff000078；rgba（255，0，0，0.47）；hsla（0，100%，50%，0.47）

字体font-family

通用字体族：Serif衬线体（Georgia、宋体）；Sans-Serif无衬线体（Arial、Helvetica、黑体、微软雅黑）；Cursive手写体（Caflish、Script、楷体）；Fantasyhuazhang夸张的字体（Comic Sans MS、Papyrus）；Monospace等宽字体（Consolas、Courier、中文字体）。

Web Fonts

@font-face指定字体

font-size

关键词：small、medium、large

长度：px、em

百分数：相对于父元素字体大小

font-weight

normal-400；bold-700

line-heighe（行高）

white-space

normal只有一个空格

nowrap强制不换行

pre保留所有的

pre-wrap一行内显示不下时会换行，保留空格

pre-linep一行内显示不下时会保留换行，合并空格

调试CSS

右键点击页面，选择【检查】或使用快捷键ctrl+Shift+I或ctrl+opt+I