CSS文字控制与文本控制属性介绍及应用示例

1. 字体属性（font）

1.1 font-family

font-family 用于设置文本的字体，多个字体之间用逗号隔开。如果第一个字体不存在，那么会使用下一个字体来代替它。

以下是一个示例：

p {
    font-family: "Georgia", "Times New Roman", serif;
}

1.2 font-size

font-size 用于设置文本的大小，可以使用绝对大小或相对大小。

以下是一个示例：

h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

p {
    font-size: 14px;
}

1.3 font-weight

font-weight 用于设置文本的粗细。可以使用关键字 bold 或者数字表示。

以下是一个示例：

h1 {
    font-weight: bold;
}

h2 {
    font-weight: 700;
}

p {
    font-weight: normal;
}

2. 文本属性（text）

2.1 text-align

text-align 用于设置文本的对齐方式，可以是左对齐、右对齐、居中对齐或者两端对齐。

以下是一个示例：

p {
    text-align: center;
}

2.2 text-decoration

text-decoration 用于设置文本的修饰，可以是下划线、删除线、上划线或者无修饰。

以下是一个示例：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

ins {
    text-decoration: underline;
}

2.3 text-transform

text-transform 用于设置文本的大小写格式，可以是大写、小写、首字母大写或者不变。

以下是一个示例：

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

p.none {
    text-transform: none;
}

示例说明

示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例1</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
        }

        p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16px;
            text-align: justify;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
    </p>
</body>
</html>

此示例中演示了如何使用字体属性和文本属性来控制文本。对于标题使用了 Arial 字体，并进行了加粗和居中对齐；对于正文使用了 Times New Roman 字体，并进行了文本两端对齐。

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例2</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 32px;
            font-weight: bold;
        }

        p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16px;
            text-decoration: underline;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
        这是一段文本，用于示例说明。
    </p>
</body>
</html>

此示例中演示了如何使用字体属性和文本属性来控制文本。对于标题使用了 Arial 字体，并进行了加粗；对于正文使用了 Times New Roman 字体，并进行了下划线、大写格式转换。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS文字控制与文本控制属性介绍及应用示例 - Python技术站