前端与CSS的初步认识 | 青训营笔记
这是我参与 [第五届青训营] 伴学笔记创作活动的第 2 天。在这节课中，学习了CSS是什么，他是如何工作，有什么功能，结合HTML怎么做一个美观的页面，详细学习了颜色，字体，选择器的使用，颜色与字体的属性描述。
1、css是什么
CSS全称为Cascadig Style Sheets,用来定义页面元素的样式。在上一节学过HTML，HTML仅仅对文本进行编译，如果想要做一个美观一点的页面，需要CSS来进行实现。CSS可以对HTML中的内容设置他的字体和颜色，位置和大小，并且还可以添加一些动画效果。
2、在页面中使用CSS
在页面使用CSS有三种形式，分别是外链、嵌入、内联。
- 外链：通过link来调用CSS文件
- 嵌入：在head块中用style元素对body块中的元素设置样式
- 内联：在body块中的元素里，直接对元素内容设置样式
3、CSS是如何工作的
先加载解析HTML文件，再加载解析CSS文件，创建DOM树，把解析出的CSS样式添加到DOM节点中，最后展示页面。
（1）选择器Selector
在HTML中，对每一个标签，元素中的内容要设置他的样式，就需要找出页面中的元素，才能给他们设置样式。这里有多种方式选择元素：
- 按照标签名、类名、ID
- 按照属性
- 按照DOM树中的位置
接下来描述一下各种选择器具体的使用方法：
- 通配选择器：使用*，可以对标签中的所有内容设置样式；
- 标签选择器：对指定标签中内容设置样式，比如分别对h1、p中的内容分别设置不同的样式；
- id选择器：例如h1标签中有属性 id，他的属性值是"logo"，使用#logo对id="logo"的内容设置样式，根据标签中的属性进行选择；
- 类选择器：根据类class的属性值选择对应的内容进行设置，例如，class="done"，则使用.done设置类的属性值为done部分的样式；
- 属性选择器：是对标签中的属性设置样式，例如input中有个属性disabled，使用[disabled]对这个属性设置样式，显示出的结果就是输入框整体发生了变化，disabled是禁止输入。
（2）伪类pseudo-classes
伪类是不基于标签和属性定位元素，有两种伪类形式：状态伪类和结构性伪类
- 状态伪类：不是具体的某一个元素，而是某一个状态下才会被选中。比如链接，当鼠标点击的时候会有不同的状态，这时就可以使用伪类选择不同的状态，进行样式的设置。在超链接 a 中，a:link 表示默认状态下的样式；a:visited 表示访问过的状态样式；a:hover 表示鼠标移到链接上的状态；a:activa 表示鼠标按下去后的状态，对于别的可以使用focus状态进行聚焦设置。
- 结构伪类：根据元素在父亲节点中的相对位置设置特殊的样式。例如，在列表中，可以根据数组出现的位置添加样式。
（3）组合Combinators
前面提到伪类以及选择器的详细使用，这里也可以用组合的方式一起设置样式。
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果他是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果他是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果他在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果他紧跟在A后面 | h2+p |
- 选择器组：针对于对多个选择器设置相同的样式。使用方法是将每个选择器用逗号隔开写在一起，例如：h1，h2，p，ul，ol{}
（4）颜色-RGB
颜色使用color属性进行设置，使用rgb(11,23,23)，取值范围在0~255之间，也可以使用16进制，如#8a3d7e，每两位表示一个底色。但因为一个具体的颜色仅根据color属性不好描述，因此针对颜色的三个特征HSL，即色相，饱和度和亮度来设置颜色，HSL指的是：
- H(Hue):色相，是色彩的基本属性，例如红色，黄色等；取值范围0~360。
- S(Saturation):饱和度，是色彩的鲜艳程度，越高越鲜艳；取值范围0~100%。
- L(Lightness):亮度，颜色的明亮程度，越高颜色越亮；取值范围0~100%。 alpha：透明度，当alpha=1时最不透明，越靠近0的时越透明。如rgba（X,X,X,X），hsla（X,X,X,X）最后一位表示透明度，
（6）字体 font-family
font-family对应多个属性值，由于设备中字体有限，所以会在这些属性值中从前到后选择设备中已有的字体。 通用字体族：
- Serif：衬线体
- Sans-Serif：无衬线体
- Cursive：手写体
- Fantasy：英文字体
- Monospace：等宽字体
注意：当文件中有英语时，先将描述英文的字体放在前面，否则会被后边的字体覆盖掉。
font-size描述字体大小，有三种方式，分别为：
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
font-weigt：字重（100-900） line-heigth：行高 white-space 处理空格
3、个人总结
在今天的第一次课里学习了CSS的相关功能及使用方法，认识CSS中的颜色和字体的属性值，以及如何去使用，这些简单的入门知识，在编辑器里进行练习，基本熟悉了CSS的使用，及HTML与CSS如何连接搭建页面。哈哈哈，作为全新小白，学习内容有点多，不过愈挫愈勇哦！
