CSS基础：鼠标、文本与字体属性详解

前言

一、鼠标样式（cursor）

[1. 常见鼠标指针类型](#1. 常见鼠标指针类型)

[2. 自定义光标](#2. 自定义光标)

二、文本样式

[1. 文本对齐（text-align）](#1. 文本对齐（text-align）)

[2. 文本装饰（text-decoration）](#2. 文本装饰（text-decoration）)

[3. 文本缩进（text-indent）](#3. 文本缩进（text-indent）)

[4. 文本变换（text-transform）](#4. 文本变换（text-transform）)

三、字体属性

[1. 设置字体（font-family）](#1. 设置字体（font-family）)

[2. 设置字体大小（font-size）](#2. 设置字体大小（font-size）)

[3. 设置字体加粗（font-weight）](#3. 设置字体加粗（font-weight）)

[4. 字体样式（font-style）](#4. 字体样式（font-style）)

[5. 组合使用 font 简写](#5. 组合使用 font 简写)

四、综合案例

总结

前言

在CSS中，鼠标（cursor）、文本（text相关属性）和字体（font相关属性）是网页设计的重要组成部分。它们不仅影响用户体验，还直接决定了网页的可读性与美观程度。本文将详细讲解这些属性的用法、注意事项，并提供实用示例，帮助快速掌握CSS中的基础样式控制。

一、鼠标样式（cursor）

CSS的 cursor 属性用于定义鼠标指针的外观，影响用户在不同元素上的交互体验。

1. 常见鼠标指针类型

css 复制代码

.element {
    cursor: pointer; /* 鼠标变为手型（用于按钮、链接等） */
}

以下是常用的 cursor 值：

值	作用
`default`	默认箭头（系统默认样式）
`pointer`	手型（用于超链接、按钮等）
`text`	文本光标（用于可编辑文本）
`move`	移动光标（可拖拽元素）
`not-allowed`	禁止操作（灰色🚫符号）
`wait`	等待（常见的加载中）
`crosshair`	十字光标（精准定位）
`help`	带问号的帮助光标

2. 自定义光标

除了系统默认的指针样式，我们可以使用 自定义光标：

css 复制代码

.element {
    cursor: url("custom-cursor.png"), pointer;
}

注意：url() 需要一个 .cur 或 .png 文件，并提供一个备用 cursor 以兼容不支持自定义的浏览器。

二、文本样式

文本相关属性决定了网页的文字排列、装饰方式等。

1. 文本对齐（`text-align`）

text-align 用于控制文本在 块级元素 中的水平对齐方式：

css 复制代码

p {
    text-align: center;  /* 文本居中 */
}

值	作用
`left`	左对齐（默认）
`right`	右对齐
`center`	居中对齐
`justify`	两端对齐

2. 文本装饰（`text-decoration`）

该属性用于添加或移除文本的装饰效果：

css 复制代码

a {
    text-decoration: none; /* 移除超链接的下划线 */
}

值	作用
`none`	无装饰
`underline`	下划线
`overline`	上划线
`line-through`	删除线

3. 文本缩进（`text-indent`）

用于控制段落首行缩进：

css 复制代码

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

4. 文本变换（`text-transform`）

控制文本大小写转换：

css 复制代码

h1 {
    text-transform: uppercase; /* 全部转换为大写 */
}

值	作用
`none`	无变化
`uppercase`	全部转大写
`lowercase`	全部转小写
`capitalize`	每个单词首字母大写

三、字体属性

字体（font）是网页美观与可读性的关键，CSS 提供了一系列字体控制属性。

1. 设置字体（`font-family`）

font-family 指定网页上的字体：

css 复制代码

p {
    font-family: Arial, Helvetica, sans-serif;
}

多个字体是备用方案，如果前面的字体不可用，浏览器会尝试下一个。

注意：尽量提供 系统通用字体 （如 sans-serif），避免字体不兼容问题。

2. 设置字体大小（`font-size`）

常见单位：

css 复制代码

p {
    font-size: 16px;  /* 以像素为单位 */
}

单位	说明
`px`	固定大小，不随浏览器缩放变化
`em`	相对于父元素的字体大小
`rem`	相对于根元素的字体大小
`%`	相对于父元素的大小

3. 设置字体加粗（`font-weight`）

font-weight 控制字体的粗细：

css 复制代码

p {
    font-weight: bold; /* 加粗 */
}

值	作用
`normal`	正常（默认）
`bold`	加粗
`lighter`	比默认更细
`bolder`	比默认更粗
`100-900`	数字表示粗细（400=normal, 700=bold）

4. 字体样式（`font-style`）

用于控制字体的倾斜：

css 复制代码

p {
    font-style: italic; /* 斜体 */
}

值	作用
`normal`	正常字体
`italic`	斜体
`oblique`	倾斜字体（效果类似 italic）

5. 组合使用 `font` 简写

可以使用 font 一次性设置多个字体属性：

css 复制代码

p {
    font: italic bold 16px Arial, sans-serif;
}

格式：

css 复制代码

font: font-style font-weight font-size font-family;

四、综合案例

css 复制代码

body {
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
}

h1 {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    cursor: pointer;
}

p {
    text-indent: 2em;
    font-style: italic;
}

效果：

body 文字 两端对齐 ，使用 Arial 字体。
h1 居中对齐 ，全部大写，字体大小 24px。
a 移除 超链接下划线 ，鼠标悬停变成手型。
p 段落首行缩进 ，字体设为斜体。

总结

掌握鼠标、文本、字体属性是编写美观网页的基础：

鼠标样式 ：cursor 控制交互体验，如 pointer（手型）。
文本样式 ：
- text-align 控制对齐方式。
- text-decoration 控制文本装饰，如 underline（下划线）。
- text-transform 控制大小写，如 uppercase（大写）。
字体属性 ：
- font-family 设置字体。
- font-size 控制文字大小（常用 px、em）。
- font-weight 控制加粗，如 bold。
- font-style 设置斜体，如 italic。

通过合理搭配这些属性，可以让网页更加美观且易读！🚀