### CSS 教程知识点详解
#### 一、XHTML与CSS基础知识
##### 1. 文档类型
在创建HTML文档时，文档类型定义了文档遵循的标准。文档类型声明（DTD）通常位于HTML文档的最顶部，例如：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
这段代码指定了文档类型为XHTML 1.0 Transitional。XHTML是一种更加严格的HTML版本，要求所有标签必须正确闭合，并且标签名称必须是小写。
**过渡类型**（Transitional）允许使用一些HTML 4.01中的特性，同时要求文档遵循XHTML的语法规则。这是一种较为宽松的类型，适合那些正在从旧版HTML向XHTML迁移的网站。
**严格类型**（Strict）则禁止使用任何非标准的元素或属性，要求所有内容都符合XHTML的要求。
**框架类型**（Frameset）用于定义由多个独立HTML文档组成的框架结构。
建议保留文档类型声明，因为这有助于确保浏览器正确解析文档。如果缺少此声明，可能会导致某些样式无法正常显示。
##### 2. 语言编码
文档的语言编码通过`<meta>`标签设置，例如：
```html
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
```
这里设置了文档编码为GB2312（简体中文），这意味着文档中的文本将按照GB2312字符集进行解释。其他常见的编码包括UTF-8，这是一种国际通用的字符编码，支持几乎所有国家的语言。
重要的是，文档本身及其引用的CSS样式和其他资源文件必须使用相同的字符集，以避免出现乱码问题。
##### 3. HTML标签
在XHTML中，所有的HTML标签都必须正确闭合。有两种类型的标签：
- **成对的标签**：如`<div>`、`<p>`等，需要使用`</div>`、`</p>`来关闭。
- **单一的标签**：如`<img>`、`<br>`等，可以在标签后面加上一个斜杠`/`来表示闭合，例如`<img src="image.jpg" />`。
为了遵循XHTML的规范，所有标签都应该使用小写字母书写。
##### 4. CSS样式
CSS（层叠样式表）是用来控制HTML文档样式的语言。可以通过以下几种方式加载CSS样式：
- **外部样式表**：将CSS样式保存在一个单独的`.css`文件中，并通过`<link>`标签将其链接到HTML文档中，如：
```html
<link href="styles.css" rel="stylesheet" type="text/css" />
```
这种方式便于维护和重用样式。
- **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签定义样式，如：
```html
<style>
h2 { color: #f00; }
</style>
```
内部样式表仅对当前页面有效。
- **行内样式**：直接在HTML标签中使用`style`属性定义样式，如：
```html
<p style="color: blue;">Hello, World!</p>
```
行内样式通常不推荐使用，因为它难以管理和维护。
- **导入样式**：使用`@import`语句从一个CSS文件导入样式到另一个CSS文件中，如：
```css
@import url('common.css');
```
##### 5. CSS优先级
CSS中样式规则的应用顺序决定了优先级。以下是一些基本的原则：
- **ID选择器**的优先级高于**类选择器**。
- 后面定义的样式会覆盖前面定义的相同属性的样式。
- 明确指定的样式优先于继承来的样式。
- **行内样式**（直接在HTML标签中定义的样式）优先级高于**内部样式**或**外部样式**。
综合这些原则，可以总结为：**单一的选择器**（如ID选择器）高于**共用的选择器**（如类选择器），并且当存在明确指定的样式时，将使用该指定样式，如果没有指定，则继承最近的样式。
通过以上知识点的学习，我们可以更好地理解XHTML与CSS的基础知识，并能够利用这些知识创建符合Web标准的网页布局。
