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

- CSS（样式）

- Csscading Style Sheets

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

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

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

css的使用

外链

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

嵌入

li { margin: 0; }
p { margin: lem 0; }

内联（使用最多）

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

CSS的工作流程

选择器

类名、标签、id

#header{
    width: 100%;
    height: 60px;
    padding: 10px 0;
    background: white;
    box-shadow: 2px 3px 5px #cccccc;
}，

.header{
    width: 1100px;
    margin: auto;
}

属性
DOM树中的位置

伪类

- 状态伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

- 结构性伪类

结构性伪类是css3新增选择器。利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁

组合

直接组合：AB
后代组合：A B

.about h2 {
	margin: 10px 0;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}

亲子组合：A>B
兄弟选择器：A~B

.event ~.jing {
	width: 400px;
	margin: 0 auto 15px;
}

相邻选择器：A+B

.about h2+p {
	margin: 10px 0;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}

颜色-HSL

Hue

色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0~360

Saturation

饱和度（S）是色彩的鲜艳程度，越高越鲜艳；取值范围是0~100%

Lightness

亮度（L）是颜色的明亮程度；越高颜色越亮；取值范围是0~100%

font-family使用建议

字体列表最后写上通用字体组
英文字体放在中文字体前面

通用字体组

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

使用中文字体时，可以对字体包进行裁剪

font——size

关键词

small、medium、large

长度

px、em

百分数

相对于父元素字体的大小

调试CSS

右键点击页面，选择【检查】
使用快捷键

css基础 | 青训营笔记