CSS (Cascading Style Sheets) 入门与深化
什么是 CSS？
CSS 是 "Cascading Style Sheet" 的缩写，是一种用于设置HTML元素样式的语言。CSS可以使我们有能力控制页面布局并维持网站的一致性。通过 CSS，我们可以控制：
- 字型、颜色、大小
- 间隔大小
- 边框和轮廓
- 定位和对齐
- 背景图像等等
CSS 语法
CSS 的语法主要由两部分组成：选择器（Selectors）和声明（Declarations）。
选择器
选择器定位到HTML中你要样式化的元素。例如，如果你想要改变所有的段落标签 <p> 的颜色，你可以使用 p 作为你的选择器。
声明
声明是CSS中的规则，它位于花括号 {} 中并包含两部分：属性（Property）和值（Value）。属性是你想要改变的样式特性，值是你希望设定给这个特性的样式。
css复制代码
selector {
property: value;
}
例如：
css复制代码
p {
color: red;
}
CSS 如何工作
- 层叠（Cascading） ：CSS中的 "C" 是层叠的意思。当多个相同的样式被应用到同一个HTML元素时，将按照特定的顺序去处理这些样式。这个顺序是：内联样式（在HTML元素中直接写的样式） > 内部样式表（在HTML头部
<style>标签中的样式） > 外部样式表和网页读取到的样式 > 浏览器默认样式。 - 继承（Inheritance） ：在CSS中，一些样式属性是有继承性的，这样可以使得子元素能够继承其父元素的某些样式属性。
CSS 添加方式
在HTML文档中，有三种常见的添加CSS的方式：
- 内联样式：直接在HTML元素的 "style" 属性中写样式。
- 内部样式：在HTML文档头部
<style>
CSS布局模型
CSS提供了几种基本的布局模型，它们定义了HTML元素在页面上的位置和行为。
- 块级元素：块级元素占据他们父元素的全部宽度，并新建一行。一些常见的块级元素包括
<div>,<p>和<h1>到<h6>。 - 行内元素：行内元素只占据它们需要的宽度。例如，
<span>和<a>。 - 定位模型：CSS 提供了
position属性，用来控制元素的位置。position属性有static,relative,fixed,absolute和sticky五个值。 - 浮动模型：
float属性允许元素浮动在其他元素的左侧或右侧，并且文本和行内元素会围绕它。常常用来创建文本环绕效果。 - Flexbox：CSS Flexible Box（弹性框）布局是一个现代布局模型，允许在多方向上排列、对齐和分布空间。对于很多设计问题，Flexbox 提供了一种更高效的解决方式。
- CSS Grid：CSS 网格布局引入了二维布局系统，允许元素在列和行上同时布局。相比其他布局方法，CSS Grid 通常能在更复杂的场景下提供最简洁、最强大的解决方案。
CSS 单位
在 CSS 中，有很多类型的单位可以用来定义长度、高度、间距、字体大小等。一些常见的 CSS 单位如下：
- 像素（px） ：像素是一个绝对单位，表示屏幕上的一个点。
- 百分比（%） ：百分比是相对单位，表示相对于另一个值的百分比。例如，如果一个元素的宽度设为 50%，那么它的宽度将是其父元素宽度的一半。
- em："em" 是相对单位，通常是相对于父元素的字体大小。例如，如果父元素的字体大小是 16px，那么
1em为 16px，2em为 32px。 - rem："rem" 正如 em 一样，只是它是相对于根元素（）的字体大小。这样可以避免 em 复合效果导致的连锁反应。
- 视口单位（vw, vh, vmin, vmax） ：视口单位是相对单位，是相对于浏览器视口的大小。例如，1vh 等于视口高度的 1%。
CSS 伪类和伪元素
伪类和伪元素允许你选择 DOM 树中不存在的元素。例如，你可能希望更改鼠标悬停在元素上时元素的颜色，或者添加内容在元素之前。
- 伪类：伪类允许你选择元素的特定状态。例如，
:hover伪类允许你选择鼠标悬停在元素上的状态。其他一些常见的伪类包括:active、:focus、:visited和:valid。 - 伪元素：伪元素允许你样式化元素的特定部分。例如，
::before和::after伪元素允许你在元素内容之前或之后插入内容。他们经常与content属性一起使用。
