CSS样式基础学习指南（二）

### 1. 使用 `line-height` 属性
`line-height` 是最常用的调整行间距的属性。它可以接受不同的值，包括单位（如 px、em、rem 等）、百分比、数值等。

#### 示例：

```css
p {
    line-height: 1.5; /* 行高是字体大小的1.5倍 */
}

h1 {
    line-height: 2em; /* 行高是字体大小的2倍 */
}

body {
    line-height: 150%; /* 行高是字体大小的150% */
}

### 2. 使用 `letter-spacing` 和 `word-spacing`
`letter-spacing` 调整字符之间的间距，而 `word-spacing` 调整单词之间的间距。这两个属性不会直接影响行间距，但可以影响文本的整体布局。

#### 示例：

```css
p {
    letter-spacing: 1px; /* 字符之间的间距 */
    word-spacing: 2px; /* 单词之间的间距 */
}

### 3. `text-align`
`text-align` 属性用于设置文本的水平对齐方式。常见的值包括 `left`（左对齐）、`right`（右对齐）、`center`（居中对齐）和 `justify`（两端对齐）。

#### 示例：

```css
p {
    text-align: left; /* 左对齐 */
}

h1 {
    text-align: center; /* 居中对齐 */
}

div {
    text-align: right; /* 右对齐 */
}

.article {
    text-align: justify; /* 两端对齐 */
}
```

### 4. `text-decoration`
`text-decoration` 属性用于设置文本的装饰效果，如下划线、上划线、贯穿线等。

#### 示例：

```css
a {
    text-decoration: none; /* 去除链接的下划线 */
}

h2 {
    text-decoration: underline; /* 下划线 */
}

del {
    text-decoration: line-through; /* 贯穿线 */
}

em {
    text-decoration: overline; /* 上划线 */
}

p.highlight {
    text-decoration: underline overline; /* 同时有上下划线 */
}
```

### 5. `text-indent`
`text-indent` 属性用于设置文本段落的首行缩进。

#### 示例：

```css
p {
    text-indent: 2em; /* 首行缩进2个字符 */
}

blockquote {
    text-indent: 50px; /* 首行缩进50像素 */
}
```

### 6. `text-transform`
`text-transform` 属性用于控制文本的大小写转换。

#### 示例：

```css
p.uppercase {
    text-transform: uppercase; /* 全部大写 */
}

p.lowercase {
    text-transform: lowercase; /* 全部小写 */
}

p.capitalize {
    text-transform: capitalize; /* 每个单词的首字母大写 */
}
`

``

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布
局和网页结构的搭建。
块级元素的特点:
(1)总是从新行开始。 (2)高度、宽度、行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100%。 (4)可以容纳内联元素和其他块元素。
2.2 行内元素(inline-level) 行内元素(内联元素)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以
设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
行内元素的特点:
(1)和相邻行内元素在一行上。 (2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。 (4)行内元素只能容纳文本或则其他行内元素。(a特殊)
注意:
1. 只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他 们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
    常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
   常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span>标签最典型的行内元素。

行内块元素的特点: (1)默认宽度就是它本身内容的宽度。 (2)宽度，高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display
块转行内:display:inline; 行内转块:display:block; 块、行内元素转换为行内块: display: inline-block;

重点

在 CSS 中，背景样式（background styles）可以用来设置元素的背景颜色、背景图片、背景渐变等。以下是一些常见的背景样式属性及其使用方法：

### 1. `background-color`
`background-color` 用于设置元素的背景颜色。

#### 示例：

```css
div {
    background-color: #ffcc00; /* 使用十六进制颜色值 */
}

p {
    background-color: rgba(255, 0, 0, 0.5); /* 使用RGBA颜色值，带透明度 */
}
```

### 2. `background-image`
`background-image` 用于设置元素的背景图片。

#### 示例：

```css
body {
    background-image: url('background.jpg'); /* 设置背景图片 */
}

div {
    background-image: linear-gradient(to right, red, yellow); /* 设置线性渐变背景 */
}

section {
    background-image: radial-gradient(circle, blue, green); /* 设置径向渐变背景 */
}
```

### 3. `background-repeat`
`background-repeat` 用于设置背景图片的重复方式。

#### 示例：

```css
div {
    background-image: url('tile.png');
    background-repeat: repeat; /* 默认，背景图片在水平和垂直方向上重复 */
}

p {
    background-image: url('tile.png');
    background-repeat: no-repeat; /* 背景图片不重复 */
}

header {
    background-image: url('tile.png');
    background-repeat: repeat-x; /* 背景图片在水平方向上重复 */
}

footer {
    background-image: url('tile.png');
    background-repeat: repeat-y; /* 背景图片在垂直方向上重复 */
}
```

### 4. `background-position`
`background-position` 用于设置背景图片的位置。

#### 示例：

```css
div {
    background-image: url('background.jpg');
    background-position: center; /* 背景图片居中 */
}

p {
    background-image: url('background.jpg');
    background-position: top left; /* 背景图片位于左上角 */
}

header {
    background-image: url('background.jpg');
    background-position: 50% 50%; /* 背景图片位于容器的中心 */
}

footer {
    background-image: url('background.jpg');
    background-position: 10px 20px; /* 背景图片位于左上角偏移10px和20px的位置 */
}
```

### 5. `background-size`
`background-size` 用于设置背景图片的大小。

#### 示例：

```css
div {
    background-image: url('background.jpg');
    background-size: cover; /* 背景图片按比例缩放，以完全覆盖容器 */
}

p {
    background-image: url('background.jpg');
    background-size: contain; /* 背景图片按比例缩放，以完全显示图片 */
}

header {
    background-image: url('background.jpg');
    background-size: 100% 100%; /* 背景图片拉伸以适应容器 */
}

footer {
    background-image: url('background.jpg');
    background-size: 50px 50px; /* 背景图片大小设置为50px x 50px */
}
```

### 6. `background-attachment`
`background-attachment` 用于设置背景图片是随滚动还是固定。

#### 示例：

```css
div {
    background-image: url('background.jpg');
    background-attachment: scroll; /* 背景图片随页面滚动 */
}

p {
    background-image: url('background.jpg');
    background-attachment: fixed; /* 背景图片固定 */
}

header {
    background-image: url('background.jpg');
    background-attachment: local; /* 背景图片随元素的内容滚动 */
}
```

### 7. `background` 简写属性
可以使用 `background` 简写属性来一次性设置所有背景相关属性。

#### 示例：

```css
div {
    background: url('background.jpg') no-repeat center/cover;
    /* 设置背景图片，不重复，居中，覆盖 */
}

p {
    background: #ffcc00 url('tile.png') repeat-x fixed;
    /* 设置背景颜色，背景图片在水平方向上重复，固定背景 */
}

重点

CSS 精灵（CSS Sprites）是一种将多个小图片合并成一张大图的方法。这样可以减少 HTTP 请求次数，提高网页加载速度。然后，通过 CSS 的 `background` 属性，将大图的不同部分显示在不同的元素上。

### 使用 CSS 精灵图
要使用精灵图，首先需要设置元素的 `background-image` 为精灵图，然后通过 `background-position` 来显示精灵图的特定部分。

#### 步骤：

1. **创建精灵图**：将所有小图片合并成一张大图。
2. **计算位置**：确定每个小图片在大图中的位置。
3. **设置 CSS**：使用 `background-image` 和 `background-position` 来显示特定部分。

### 示例

#### CSS 代码：

```css
/* 精灵图的通用样式 */
.icon {
    background-image: url('sprites.png');
    background-repeat: no-repeat;
    display: inline-block;
}

/* 具体图标样式 */
.icon-home {
    width: 50px;
    height: 50px;
    background-position: 0 0; /* 房子图标在精灵图的顶部 */
}

.icon-mail {
    width: 50px;
    height: 50px;
    background-position: 0 -50px; /* 邮件图标在房子图标的下方 */
}

.icon-phone {
    width: 50px;
    height: 50px;
    background-position: 0 -100px; /* 电话图标在邮件图标的下方 */
}
```
 

```