1. 什么是CSS
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括各种XML方言如SVG、XHTML等）文档表现的样式语言。CSS的主要目的是将网页的内容与它的表现形式分离，从而使得开发者能够更灵活地控制页面的布局和外观。
主要特点
-
分离内容与样式：
- CSS允许你将网页的内容（HTML）与样式（CSS）分开。这样做的好处是，你可以通过修改一个CSS文件来改变整个网站的外观，而不需要逐个修改每个HTML文件。
- 这种分离提高了代码的可维护性和可重用性。
-
层叠性：
- CSS的“层叠”特性意味着多个样式规则可以应用于同一个元素，最终的效果是由这些规则按优先级顺序叠加而成的。
- 优先级取决于选择器的特异性、
!important声明以及样式的来源（如内联样式、内部样式表、外部样式表等）。
-
灵活性：
- CSS提供了丰富的选择器和属性，可以精确控制元素的各个方面，如字体、颜色、背景、边距、填充、布局等。
- 通过使用CSS预处理器（如Sass、Less、Stylus），你可以编写更复杂和模块化的样式代码。
-
响应式设计：
- CSS使得网页能够在不同设备和屏幕尺寸上自适应显示，通过媒体查询和视口单位，可以轻松实现响应式布局。
-
性能优化：
- 合理使用CSS可以减少页面加载时间，提高用户体验。例如，通过压缩CSS文件、使用CSS Sprites、避免使用过多的嵌套选择器等方法。
基本语法
CSS的基本语法由选择器和声明块组成。选择器用于指定要应用样式的HTML元素，声明块则包含具体的样式规则。
/* 选择器 */
selector {/* 声明块 */property: value;property: value;
}
- 选择器：指定要应用样式的HTML元素。例如，
p选择所有的<p>元素，.classname选择所有带有classname类的元素，#idname选择具有idnameID 的元素。 - 声明块：包含一个或多个声明，每个声明由属性和值组成，中间用冒号分隔，以分号结束。
示例
/* 选择所有段落元素，并设置字体大小为16像素 */
p {font-size: 16px;
}/* 选择所有带有 "header" 类的元素，并设置背景颜色为蓝色 */
.header {background-color: blue;
}/* 选择具有 "main" ID 的元素，并设置宽度为80% */
#main {width: 80%;
}
应用方式
CSS可以通过以下几种方式应用到HTML文档中：
-
内联样式：
- 直接在HTML元素的
style属性中定义样式。
<p style="color: red;">这是一个红色的段落。</p> - 直接在HTML元素的
-
内部样式表：
- 在HTML文档的
<head>部分使用<style>标签定义样式。
<head><style>p { - 在HTML文档的