### CSS基础知识详解
#### 一、CSS简介
- **1.1 HTML的局限性**
HTML是一种用于构建网页内容的标准标记语言。它关注于描述网页的内容及其语义，例如使用`<h1>`标签来定义一级标题，使用`<p>`标签来表示段落等。然而，HTML本身在样式定制方面存在明显的局限性。为了添加基本样式，开发者不得不在HTML标签中嵌入样式属性，这种方式导致了代码的臃肿和维护困难。因此，需要一种新的技术来专门处理网页的样式问题。
- **1.2 CSS——网页的美容师**
CSS（层叠样式表）是一种专为网页设计的语言，用于控制网页的表现形式，包括文本的样式、图片的展示效果、页面布局等方面。CSS使得开发者能够将样式从HTML文档中分离出来，实现结构与表现的分离，从而提高开发效率和可维护性。通过使用CSS，开发者可以轻松地更改网页的整体样式而无需修改大量的HTML代码。
- **1.3 CSS语法规范**
CSS的基本语法由两部分组成：选择器和声明。选择器用来定位要应用样式的HTML元素，声明则具体规定了样式应该如何应用到被选中的元素上。一个典型的CSS规则如下所示：
```css
selector {
declaration1;
declaration2;
...
}
```
其中，“selector”代表选择器，用来指定要应用样式的HTML标签；“declaration”代表声明，包含了具体的样式属性及其对应的值。例如：
```css
h1 {
color: red;
font-size: 14px;
}
```
在这个例子中，选择器是`h1`，声明则是`color: red;` 和 `font-size: 14px;`。
- **1.4 CSS代码风格**
为了确保CSS代码的可读性和一致性，开发者应该遵循一定的代码风格。常见的做法包括使用展开格式书写CSS规则，并保持一致的缩进和空格使用。此外，建议使用小写字母来编写选择器、属性名和属性值，同时属性值前应保留一个空格，选择器和花括号之间也应该留有一定的空格。例如：
```css
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
```
#### 二、CSS基础选择器
- **2.1 元素选择器**
元素选择器也称为标签选择器，是最基本的选择器之一，它允许根据HTML标签名称来选择元素并为其应用样式。例如，下面的CSS规则将所有`div`标签内的文字颜色设为黑色，背景色设为白色，且设置了默认的字体和内外边距为0。
```css
div {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
```
元素选择器的语法简单明了，可以直接使用HTML标签名称作为选择器，如`div`、`p`、`h1`等，适用于为特定类型的HTML元素统一设置样式。
使用元素选择器的例子如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS演示</title>
<style type="text/css">
/* 以下是元素选择器, 只对页面中的 div 起作用 */
div {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
</style>
</head>
<body>
<div>这是一个使用了元素选择器的 div 元素。</div>
</body>
</html>
```
在这个示例中，`div`标签被赋予了一组样式属性，这些属性将应用于所有的`div`元素。这为页面设计提供了一种简便的方法来统一管理样式。
