### 这是我参与「第四届青训营」笔记创作活动的第1天，在第二天的学习中我初步了解了CSS，下面让我们开始吧

一.了解CSS

（1）CSS是什么

如图中所讲，CSS全名Cascading Style Sheets,是一种用来定义页面元素的样式，其主要功能有

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

（2）CSS使用格式

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

上面这段代码块为给出的一个经典例子。h1为选择器（selector），color和font-size为选择器（property），white为属性值（value），14px为声明（declaration）。

在页面中使用CSS有三种方式，分别为外链，嵌入与内联。在开发中常用外链方式，有时嵌入也常用。具体实例如下

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
* {
  color: red;
  font-size: 20px;
}
</style>

那么有的同学就要问了，CSS是如何工作的呢？下图展示了CSS的工作机理。

首先，先加载HTML,后来解析HTML的同时加载CSS，加载CSS后解析CSS，在创建DOM树时添加样式到DOM节点，最后画面可以展现出来。

（3）各组件详解

选择器（selector）

作用：找出页面中的元素，以便给它们设置样式

通配选择器
标签选择器
ID选择器
类选择器
属性选择器

伪类（pseudo-classes）

特点：不基于标签和属性定位元素

几种伪类

1.结构伪类

2.结构性伪类

组合（combination）

（4）常见的样式

颜色-RGB

通过红绿蓝三原色合成： #XXXXXX用六位16进制码来描述颜色，rgb(x,x,x)则用三位256以内的十进制数表示

颜色-HSL

Hue 色相：色彩的基本属性(0-360)

Saturation饱和度：色彩的鲜艳程度(0-100%)

Lightness 亮度：颜色的明亮程度(0~100%)

通过以上三种元素合成: hsl(x,X%,X%)用三种元素的值来描述颜色

alpha透明度

通常在#xxxxxx描述颜色的六位基础上加两位，或者rgba(x,x,x,x)与hsla(x,x%,x%,x)中最后一位且最大值为1

font-family 字体

通用字体族：

Serif衬线体：Georgia、宋体
Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
Cursive手写体：Caflisch Script、楷体
Fantasy：Comic Sans MS、Papyrus、Zapfino
Monospace等宽体：Consolas、Courier、中文字体

建议在字体列表最后写上通用字体族，并且把英文字体放在中文字体前面，以最大程度保证美观。

字体大小 font-size

关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体的大小

位置（situation）

line-height：调整行间距
text-align：调整宽度格式（靠左、靠右或居中等）
spacing：通过letter-spacing和word-spacing来调整字符间距和单词间距
text-indent：调整首行缩进距离
text-decoration：文字修饰，如underline、line-through、overline

（5）调试CSS

右键点击页面，选择【检查】
使用快捷键，Ctrl+Shift+I（windows）或Cmd+Opt+I（Mac）

（6）布局(Layout)

那我们十分好奇布局是什么呢？

布局是确定内容的大小和位置的算法。该算法依据元素、容器、兄弟节点和内容等信息来计算。下面展示一种布局相关技术：

可以看见的是，布局中有着十分丰富的元素，如padding，border，margin等。

再平常开发中，最常用的是FlewBox和Grid布局。具体图片如下：

二.个人总结

在这两天的课程学习中，我初步了解和掌握了HTML和CSS的基础知识，语言上手难度并不高，但是其中细节的东西非常繁杂，还需结合实战来练习，也要扩展更多的课外网页阅读。也祝各位友人们学业有成。

CSS学习入门（小白篇）