0.为什么学习CSS？
学习CSS可以使我们更好地控制网页的样式和布局，从而实现更加美观、易用、高效的网页设计和开发。具体来说，以下是学习CSS的几个重要理由：
- 增强用户体验：CSS可以帮助我们设计出更加美观、易用、快速响应的网页，从而提升用户的满意度和体验。
- 分离样式与内容：CSS可以将网页的样式与内容分离，使得修改样式变得更加方便快捷，同时也有利于SEO优化和Web性能优化。
- 提高开发效率：学习CSS可以让我们在网页设计和开发中更加高效地工作。使用现代的CSS框架和预处理器，可以更快速地构建网页，并减少错误和代码冗余。
- 实现多样化排版和动画效果：通过使用CSS的选择器、伪类等特性，我们可以实现各种不同的排版效果和动画效果，使得网页具有更高的灵活性和创新性。
1.CSS发展历史
CSS（层叠样式表）的发展历史可以大致分为以下几个阶段：
- CSS1（1996年）：CSS的第一个版本，实现了基本的排版样式定义。
- CSS2（1998年）：增加了对定位、浮动、背景、边框等方面的支持，并引入了媒体查询、伪元素等新功能。
- CSS2.1（2004年）：修复了CSS2中存在的一些错误和模糊之处，并增加了对CSS2的完整支持。
- CSS3（2005年至今）：目前仍在不断发展中，不断添加新的特性和功能，如选取器、多列布局、动画效果、渐变、弹性盒子、网格布局等。
2.Casading规则(层叠优先集)
层叠优先级是指在 CSS 中，当多个样式规则应用于同一元素时，如何确定哪个规则将被应用。其中的“层叠”指的是将不同来源的样式值合并到一个集合中，并按照一定的优先级进行排序。
在 CSS 中，层叠优先级遵循一定的“层叠规则”，常见的有以下三条：
- 重要性：使用
!important声明的属性具有最高的优先级； - 特殊性：根据选择器的特殊性来确定优先级；
- 源代码顺序：后面声明的样式规则会覆盖前面相同的样式规则。
在CSS中，样式表可以按照来源被划分为三种类型：用户代理样式、用户样式表和作者样式表。
- 用户代理样式（User Agent Styles）：用户代理（User Agent，通常指浏览器）为HTML元素提供了一组默认的样式。这些样式在没有任何外部样式表的情况下应用于网页，以确保即使在没有CSS的情况下，网页内容依然具有基本的可读性和可访问性。用户代理样式因浏览器而异，通常包括基本的字体、颜色、边距等设置。
- 用户样式表（User Stylesheets）：用户样式表是由用户自定义的样式表，可以用于覆盖用户代理样式和作者样式表中的某些样式。用户可以根据自己的偏好设置用户样式表，例如调整字体大小、颜色等。用户样式表主要用于改善网页的可访问性和可用性，满足个别用户的特殊需求。在现代浏览器中，用户可以通过安装扩展或修改浏览器设置来应用自定义的用户样式表。
- 作者样式表（Author Stylesheets）：作者样式表是由网页开发者创建的样式表，用于定义网页的布局、外观和交互。作者样式表通常是网页设计的主要组成部分，它可以覆盖用户代理样式和用户样式表中的样式。作者样式表可以包含内联样式、嵌入式样式和外部样式表，以及通过
@import引入的其他样式表。
3.层叠三大原则
4.继承
CSS继承是指当一个元素未设置某个属性时，它会从父元素继承该属性的值。但并非所有属性都可以继承，只有特定的一些属性才会被继承，例如字体和颜色等。可以使用inherit关键字来显式地指定一个属性应该从其父元素中继承。
5.CSS的值和单位
CSS的值是指属性可以接受的数据类型，包括如下几种：
- 数值（如1、10、0.5等）
- 百分比（如50%、25%等）
- 长度单位（如px、em、rem等）
- 颜色（如红色、蓝色等）
- 图像和URL（如background-image:url('xxx')等）
- 布尔值（如true、false等）
- 字符串（如'abc'、"xyz"等）
CSS的单位用于衡量数值和长度，主要包括以下几种：
- px（像素）：绝对长度单位，相对于显示器屏幕分辨率而言。
- em：相对长度单位，相对于当前元素的字体大小。
- rem：相对长度单位，相对于根元素的字体大小。
- %（百分比）：相对长度单位，相对于父元素的宽度或高度。
- vw/vh：视口单位，相对于视口宽度或高度的百分比，其中vw表示视口宽度的1/100，vh表示视口高度的1/100。
还有一些其他的单位，如秒(s)、毫秒(ms)等，用于描述时间。
6.CSS盒模型
CSS盒模型是指一个 HTML 元素被视为一个矩形的盒子，它由内容区域、内边距、边框和外边距组成。盒模型的大小可以通过 CSS 属性来调整，包括 width、height、padding、border 和 margin 等。在标准盒模型中，元素的宽度和高度只包括内容区域；而在 IE 盒模型中，元素的宽度和高度包括了内边距和边框。
