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

导言：HTML，CSS以及JavaScript作为前端的三大基石是每一个前端入门必须学习的东西，他们或深或浅但是都不是一下子能够学会的，此笔记作为我个人在青训营中学习到的自己曾经遗漏了部分或者是三件套的介绍以及个人认为较重要的部分的笔记。

【第二课】 CSS

什么是 CSS？

• CSS 指的是层叠样式表 (Cascading Style Sheets)

• CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素

• CSS 节省了大量工作。它可以同时控制多张网页的布局

• 外部样式表存储在 CSS 文件中

  *也称级联样式表。

为何使用 CSS？

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 实例

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS 解决了一个大问题

HTML 从未打算包含用于格式化网页的标签！

创建 HTML 的目的是描述网页的内容，例如：

<h1>这是一个标题。</h1><p>这是一个段落。</p>

将 之类的标签和 color 属性添加到 HTML 3.2 规范后，Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为一个漫长而昂贵的过程。

为了解决这个问题，万维网联盟（W3C）创建了 CSS。

CSS 从 HTML 页面中删除了样式格式！

CSS 节省了大量工作！

样式定义通常保存在外部 .css 文件中。

通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！

三种使用 CSS 的方法

有三种插入样式表的方法：

• 外部 CSS
• 内部 CSS
• 行内 CSS

CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

• 简单选择器（根据名称、id、类来选取元素）
• 组合器选择器（根据它们之间的特定关系来选取元素）
• 伪类选择器（根据特定状态选取元素）
• 伪元素选择器（选取元素的一部分并设置其样式）
• 属性选择器（根据属性或属性值来选取元素）

后代选择器 a b

亲子选择器 a>b

兄弟选择器 a~b

相邻选择器 a+b