### CSS基础教程知识点详解
#### 一、CSS概述
**CSS**全称为 **层叠样式表**（Cascading Style Sheets），是一种用来控制网页样式并允许将样式信息与网页内容分离的一种标记语言的集合。其主要功能在于为HTML文档定义视觉效果。
1. **样式定义**：CSS定义了如何显示HTML元素，包括颜色、字体、间距等属性。
2. **样式存储**：样式信息通常存储在独立的样式表文件中，以便于管理和维护。
3. **内容与表现分离**：CSS的主要目标之一是实现内容与表现形式的分离，这使得开发者能够更灵活地管理页面布局和设计。
4. **外部样式表**：使用外部样式表可以显著提高开发效率，因为相同的样式可以在多个页面中重用。
5. **层叠机制**：当多个样式定义应用于同一个元素时，可以通过CSS的层叠机制决定最终使用的样式。
#### 二、解决的问题
随着网页设计的不断发展，早期HTML的颜色和样式功能变得越来越有限。CSS的引入解决了以下问题：
1. **颜色和样式的扩展性**：主流浏览器不断扩展HTML的颜色和样式功能，但这些扩展往往不够灵活且难以管理。
2. **内容与表现分离的需求**：为了更好地管理网页的设计和布局，需要将内容与表现形式分开处理。
#### 三、提高工作效率
1. **解放设计人员**：CSS使得设计人员能够专注于创意设计，而不是纠结于繁琐的代码细节。
2. **样式复用**：通过定义一系列可复用的样式，减少了重复编写相同样式的需要。
#### 四、使用样式
1. **指定方式**：直接在HTML元素中通过`style`属性指定样式。
2. **引用方式**：通过`<link>`或`@import`引入外部样式表文件。
#### 五、层叠次序
当多个样式规则同时应用于同一元素时，其优先级按照以下顺序决定：
1. **浏览器缺省设置**：浏览器自带的基本样式。
2. **外部样式表**：通常位于HTML文档的`<head>`部分，并通过`<link>`标签引入。
3. **内部样式表**：位于HTML文档头部`<head>`部分内的`<style>`标签中。
4. **内联样式**：直接在HTML元素中通过`style`属性指定。
#### 六、CSS语法
1. **基本结构**：由选择器和声明组成。
- 选择器：用于指定哪些元素将应用样式。
- 声明：包括属性和值。
2. **示例**：
```css
h1 {
color: red;
font-size: 14px;
}
```
#### 七、值的不同写法和单位
1. **颜色表示方法**：
- 十六进制：`#ff0000`或`#f00`
- RGB值：`rgb(255, 0, 0)`或`rgb(100%, 0%, 0%)`
2. **字体家族**：例如`"sans-serif"`，注意字体名包含空格时需使用引号括起来。
#### 八、多重声明
在一条样式规则中可以包含多个声明，每个声明间用分号隔开。例如：
```css
p {
text-align: center;
color: black;
font-family: Arial;
}
```
#### 九、空格和大小写
CSS中的空格通常不影响样式的表现，而属性和值的大小写也不敏感。例如：
```css
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
```
#### 十、选择器的分组
可以使用逗号分隔符将多个选择器组合在一起，这样可以为多个不同的元素应用相同的样式。例如：
```css
h1, h2, h3, h4, h5, h6 {
color: green;
}
```
#### 十一、继承及其问题
1. **继承特性**：某些CSS属性会从父元素自动继承到子元素。
2. **摆脱继承**：有时需要显式地覆盖继承来的样式。例如：
```css
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
```
#### 十二、派生选择器
派生选择器允许选择嵌套的元素。例如：
```html
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
</ol>
```
对应的CSS：
```css
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
```
#### 十三、ID选择器
1. **定义**：ID选择器用于为具有特定ID的HTML元素指定特殊的样式。
2. **语法**：ID选择器以`#`开头，后跟ID名称。
3. **示例**：
```css
#red {
color: red;
}
#green {
color: green;
}
```
#### 十四、类选择器
1. **定义**：类选择器用于为一组HTML元素指定相同的样式。
2. **语法**：类选择器以`.`开头，后跟类名。
3. **示例**：
```css
.center {
text-align: center;
}
```
以上内容涵盖了CSS基础教程中的关键知识点，有助于初学者快速理解CSS的基本概念和技术细节。
