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

目录

前言

一、鼠标样式（cursor）

1. 常见鼠标指针类型

2. 自定义光标

二、文本样式

1. 文本对齐（text-align）

2. 文本装饰（text-decoration）

3. 文本缩进（text-indent）

4. 文本变换（text-transform）

三、字体属性

1. 设置字体（font-family）

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

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

4. 字体样式（font-style）

5. 组合使用 font 简写

四、综合案例

总结

前言

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

一、鼠标样式（cursor）

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

1. 常见鼠标指针类型

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

以下是常用的 cursor 值：

2. 自定义光标

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

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

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

二、文本样式

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

1. 文本对齐（text-align）

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

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

2. 文本装饰（text-decoration）

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

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

3. 文本缩进（text-indent）

用于控制段落首行缩进：

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

4. 文本变换（text-transform）

控制文本大小写转换：

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

三、字体属性

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

1. 设置字体（font-family）

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

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

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

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

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

常见单位：

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

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

font-weight 控制字体的粗细：

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

4. 字体样式（font-style）

用于控制字体的倾斜：

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

5. 组合使用 font 简写

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

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

格式：

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

四、综合案例

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 段落首行缩进，字体设为斜体。

总结

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

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

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