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

一、CSS

1、CSS

CSS，层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文 件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

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

例如：

1. 设置字体和颜色
2. 设置位置与大小
3. 添加动画效果

2、基础代码

h1{
    color:white;
    font-siza:14px;
}

1. “h1”:选择器Selector,用于选择页面中的元素；
2. “color”:选择器Property,指定属性；
3. “white”：指属性值；
4. “font-siza:14px;”声明Declaration;
5. 整体：称作一条基本的样式规则。

3、三种在页面使用CSS的方法

1. 外链(内容与样式分离，推荐)

<link rel="stylesheet" href="/assets/style.css"

2.嵌入

<style>
    li{margin:0;list-style:none;}
    p{margin:0;}
<style>

3.内联（不太推荐，UI组件库常用）

<p style="margin:lem 0">ExampleContent</p>

4、CSS工作原理

5、选择器Selector

• 找出页面元素，以便给它们设置样式
• 使用多种方式选择元素

1. 按标签名、类名或id
2. 按属性
3. 按DOM树中的位置

6、通配选择器

<h1></h1>
<p></p>
<style>
*{
    color: ;
    font-siza: ;
}
<style>

7、标签选择器

<h1></h1>
<p></p>
<style>
h1{
}
p{
}
</style>

8、id选择器

9、类选择器

10、属性选择器

11、伪类（pseudo-classes）

• 不基于标签和属性定位元素
• 两种伪类，如下：

1. 状态伪类，即处于某种状态的元素；
2. 结构性伪类，如DOM树节点，或DOM树中某一位置

12、组合

13、选择器组

14、颜色

• RGB(000,000,000)~(255,255,255)
• HSL(Hue:色相；Saturation:饱和度；Lightness:亮度)
• alpha(不透明度，取值范围：0~1)