1. CSS 概念基础
CSS（Cascading Style Sheets）即层叠样式表，它是一种用于描述 HTML（超文本标记语言）或 XML（可扩展标记语言）等文档的呈现方式（如字体、颜色、布局等）的样式语言。
简单来说，HTML 主要负责网页的结构，定义了网页中有哪些元素，如段落、标题、图片、链接等。而 CSS 则负责这些元素的外观，例如可以用 CSS 指定一个段落的文字颜色是蓝色、字体是宋体、字号为 16px 等。
CSS3 是 Cascading Style Sheets Level 3 的缩写，是 CSS（层叠样式表）的最新版本之一，旨在为 HTML 和其他标记语言的元素提供样式设置和布局功能。
CSS3 的设计目标是通过模块化结构增强灵活性、扩展性和功能性，同时支持现代化的网页设计需求。
CSS3 的特点
- 模块化：CSS3 被分成多个独立的模块，比如选择器、盒模型、背景与边框、文本效果、动画等。这种模块化设计让开发和规范更新更加方便。
- 向后兼容：CSS3 兼容 CSS1 和 CSS2。
- 新功能增强：CSS3 增加了许多新特性，比如动画、渐变、媒体查询等，为现代网页设计带来了更多可能性。
CSS的发展历史
早期阶段（1994 - 1996）
- CSS的概念最初是由哈肯·维姆·莱（Hakon Wium Lie）在1994年提出的。当时，网页设计正处于起步阶段，HTML主要用于构建网页结构，但对于网页的样式控制非常有限。例如，HTML标签本身只有有限的属性来控制文本的外观，如
<font>标签可以设置字体、颜色和大小，但这种方式在复杂的网页设计中显得很笨拙。 - 1996年，CSS1（Cascading Style Sheets Level 1）规范正式发布。它提供了基本的样式功能，包括字体属性（如字体族、字号、字体风格等）、颜色属性、文本属性（如文本对齐、行高）和一些简单的布局属性，如边距（margin）和填充（padding）。不过，CSS1的布局功能还比较初级。
- CSS的概念最初是由哈肯·维姆·莱（Hakon Wium Lie）在1994年提出的。当时，网页设计正处于起步阶段，HTML主要用于构建网页结构，但对于网页的样式控制非常有限。例如，HTML标签本身只有有限的属性来控制文本的外观，如
成长阶段（1998 - 2002）
- CSS2（Cascading Style Sheets Level 2）于1998年发布。这是一个重要的版本，它大大扩展了CSS的功能。CSS2引入了绝对定位和相对定位的概念，使开发者能够更精确地控制元素在页面上的位置。同时，它还增加了媒体类型（media types）的支持，例如可以根据不同的输出设备（如屏幕、打印机等）应用不同的样式。
- 然而，CSS2在浏览器中的实现并不统一。不同的浏览器厂商对CSS2规范的理解和实现存在差异，这给网页开发者带来了很大的困扰，出现了所谓的“浏览器兼容性问题”。
成熟阶段（2005 - 2011）
- 随着网页应用的日益复杂，CSS3（Cascading Style Sheets Level 3）开始逐步推出新的模块。CSS3不是一个单一的规范，而是由多个模块组成，每个模块都针对特定的功能进行扩展。例如，CSS3中的边框半径（border - radius）模块允许开发者创建圆角边框，而渐变（gradients）模块可以实现颜色渐变效果。这些新功能使得网页设计更加灵活和美观。
- 浏览器厂商也在不断改进对CSS3的支持，虽然在早期阶段不同浏览器对CSS3特性的支持程度也不同，但随着时间的推移，这种差异逐渐缩小。
现代阶段（2011年至今）
- CSS不断更新，新的特性和模块仍在持续添加。例如，CSS变量（CSS Variables）的出现使得样式的定义和维护更加方便。可以定义一个变量来存储颜色值或字号等，然后在多个样式规则中重复使用这个变量。
- 此外，响应式设计（Responsive Design）成为了网页设计的重要理念，CSS在其中发挥了关键作用。通过媒体查询（Media Queries）等技术，可以根据设备的屏幕尺寸（如手机、平板、桌面电脑等）自动调整网页的布局和样式，为用户提供更好的体验。
CSS的用途
页面布局
- 多列布局：可以使用CSS的浮动（float）或弹性盒子（flexbox）、网格布局（grid layout）来创建多列的页面布局。例如，通过网格布局可以很方便地将一个网页划分为多个区域，像一个典型的网站首页可能有头部（header）、导航栏（nav）、主体内容（main）、侧边栏（sidebar）和底部（footer）等区域，每个区域可以放置不同的内容，并且可以精确控制它们的大小和位置。
- 响应式布局：在不同的设备上呈现合适的布局。例如，当在手机上浏览网页时，CSS可以将多列布局转换为单列布局，或者调整元素的大小和间距，以适应手机屏幕较小的特点。通过媒体查询，可以设置不同的样式规则，当屏幕宽度小于一定值（如768px）时，改变元素的样式，如将导航栏从水平排列变为垂直排列。
样式设计
- 字体样式：能够控制字体的各种属性，如字体族（font - family），可以指定使用宋体、黑体、Arial等字体；字号（font - size）可以设置文字的大小，如12px、16px等；字体风格（font - style）可以使文字呈现斜体（italic）或正常（normal）状态；字体粗细（font - weight）可以设置文字是加粗（bold）还是正常粗细。
- 颜色和背景：可以设置元素的文本颜色（color），如红色（#ff0000）、蓝色（#0000ff）等。对于背景，可以设置背景颜色（background - color），还可以设置背景图像（background - image），并且能够控制背景图像的重复方式（如repeat - x、repeat - y、no - repeat）、位置等属性。
交互效果
- 鼠标悬停效果：通过CSS的伪类（pseudo - classes），如
:hover，可以为元素添加鼠标悬停时的效果。例如，当鼠标悬停在一个链接上时，可以改变链接的颜色、添加下划线或者改变背景颜色，从而为用户提供视觉反馈，增强用户体验。 - 动画效果：CSS3引入了动画（@keyframes）功能。可以定义一个动画序列，包括元素的位置、大小、颜色等属性的变化，然后将这个动画应用到元素上。例如，可以创建一个元素从左边滑动到右边的动画，或者让一个元素的颜色渐变的动画，用于制作吸引人的网页元素展示效果。
- 鼠标悬停效果：通过CSS的伪类（pseudo - classes），如
评论已关闭