第二课理解CSS之走进前端技术栈 1 | 青训营笔记本节课我们学习了三大件中的CSS，CSS是前端技术栈中关键的一环

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

本节课我们学习了三大件中的CSS，CSS是前端技术栈中关键的一环，对页面元素及样式呈现起到了直接作用。我们重点学习了“CSS代码构成”，“CSS使用方法”，“CSS流程之选择器组”和“调试CSS”。

CSS是什么

Cascading Style Sheet：层叠样式表
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

CSS构成

选择器 Selector
选择器 Property
属性值 Value
声明 Declaration

在页面中使用CSS

一般我们在页面中使用CSS有三种办法，外链，嵌入以及内联。

CSS是如何工作的

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方法选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

*标签是通配选择器，使用该标签后所有的内容都会引用该标签内的样式。

标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

id选择器

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

类选择器

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

伪类（pseudo-classes）

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

组合（Combinators）

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

选择器组

个人总结：

这节课我们主要学习了CSS在页面中主要起到什么样的作用，我们要怎样通过CSS控制页面内容的样式，我们一般使用外链或者嵌入的方法来使用CSS，但是有时我们也会需要使用内联的方式来使用CSS，例如我们在使用一些UI库的时候我们就需要用内联的方法来改变样式。而我们通常使用不同的选择器来实现控制不同的标签显示不同的内容。像我们需要一些全局样式时，我们可以使用通配选择器。也可以使用标签选择器来对整个页面所有同样的标签进行样式改变。id选择器则是可以对特定的某一样式进行改变。类选择器则是在我们给各种不同标签起了一样的类名后便可以将他们的样式统一。也可以在标签中创建一个属性，再对这个属性定义样式，也可以改变页面的样式。而除了这些选择器外，我们还可以使用伪类来帮我们改变样式，只要通过上文伪类组合图对应的更改样式，就可以实现页面样式的改变。

第二课 理解CSS之走进前端技术栈 1 | 青训营笔记