HTML与CSS结合

### HTML与CSS结合

HTML负责网页的结构和内容，而CSS负责样式和布局。将HTML与CSS结合，可以创建出既美观又功能丰富的网页。

#### CSS基础

CSS（层叠样式表）用于设置HTML元素的样式。CSS规则由选择器和声明块组成，声明块包含一个或多个声明，每个声明由属性和值组成。

**示例代码：**
```css
/* CSS规则示例 */
p {
  color: blue; /* 设置段落文本颜色为蓝色 */
  font-family: Arial, sans-serif; /* 设置段落字体 */
}
```

在HTML中，CSS可以通过三种方式应用：

1. **内联样式**：直接在HTML元素的`style`属性中写CSS。
   ```html
   <p style="color: blue; font-family: Arial, sans-serif;">这是一个段落。</p>
   ```

2. **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签包含CSS。
   ```html
   <head>
     <style>
       p {
         color: blue;
         font-family: Arial, sans-serif;
       }
     </style>
   </head>
   ```

3. **外部样式表**：在独立的`.css`文件中写CSS，然后在HTML中通过`<link>`标签引入。
   ```html
   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
   ```

#### CSS选择器

CSS选择器用于选择HTML文档中的元素，并对它们应用样式。以下是一些常用的CSS选择器：

1. **元素选择器**：根据元素类型选择元素。
   ```css
   p {
     /* 样式规则 */
   }
   ```

2. **类选择器**：根据元素的`class`属性选择元素。
   ```css
   .example {
     /* 样式规则 */
   }
   ```

3. **ID选择器**：根据元素的`id`属性选择元素。
   ```css
   #uniqueId {
     /* 样式规则 */
   }
   ```

4. **属性选择器**：根据元素的属性选择元素。
   ```css
   [type="text"] {
     /* 样式规则 */
   }
   ```

5. **伪类选择器**：选择处于特定状态的元素。
   ```css
   a:hover {
     /* 鼠标悬停时的样式规则 */
   }
   ```

6. **后代选择器**：选择特定元素的后代。
   ```css
   div p {
     /* 样式规则 */
   }
   ```

7. **子代选择器**：选择特定元素的直接子元素。
   ```css
   ul > li {
     /* 样式规则 */
   }
   ```

#### CSS布局（Flexbox, Grid）

1. **Flexbox**：
   Flexbox是一种一维布局方法，可以轻松创建灵活的布局，无论是水平还是垂直。
   ```css
   .container {
     display: flex;
     flex-direction: row; /* 或column*/
     justify-content: center; /* 对齐方式 */
     align-items: center; /* 垂直对齐方式 */
   }
   ```

2. **Grid**：
   Grid是一种二维布局系统，可以创建复杂的布局，允许同时控制行和列。
   ```css
   .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* 创建三列 */
     grid-gap: 10px; /* 网格间距 */
   }
   ```

通过结合HTML和CSS，开发者可以创建出结构清晰、样式一致且布局灵活的网页。CSS的选择器和布局技术为设计提供了强大的工具，使得网页设计更加高效和动态。