我参与「第四届青训营」笔记创作活动的的第2天#

CSS是什么？

Cascading Style Sheets，用来定义页面元素的样式

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

基本形式

• 选择器Selector:<h1>
• 选择器Property:color
• 属性值Value：white
• 声明Declaration：font—size：14px；

在页面中使用CSS

1. 外链。将CSS的定义放在一个单独的文件里面，用link标签把其引入到页面中。
2. 嵌入。直接将样式代码嵌入HTML中。
3. 内联。将元素的样式写入标签属性中（不需要写选择器）。

CSS是如何工作的

首先页面会加载HTML，将HTML解析成DOM树，其中CSS部分会被解析加载，把DOM树上的每一个节点解析出来，形成渲染树，最后展示出来。

选择器Select

找出页面中的元素，以便给他们设置样式，可使用多种方式选择元素

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

通配选择器 *

所有的元素都被选择，用“*”表示

标签选择器

选择标签如<h1>来添加样式

id选择器

例：id=“logo”，则后面选择时“#logo”。（注意：id只能有一个）

类选择器 calss

例：class=“done”，则后面选择时“.done”。（可出现多次）

属性选择器

通过元素的属性值选择元素

• [href^="#"]:当herf属性值以#开头时被选择；
• [herf$=".jpg"]:当herf属性值以“.jpg”结尾时被选择；

伪类

• 状态性伪类：定义不同状态下的样式

颜色

• RGB颜色：R（红色）、G（绿色）、B（蓝色），通过改变这三种颜色数量的多少来改变色彩。
• HSL颜色：H（色相）、S（饱和度）、L（亮度），与RGB颜色同理。
• alpha透明度：0~1，0为透明，1为不透明。

字体font-family

设置字体族，在设备中采用字体族中已有的字体。

通用字体族

• Serif衬线体
• Sans-Serif无衬线体
• Cursive手写体
• Fantasy
• Monospace等宽字体