文本格式

预计阅读时间1 分 44 views

1 作用

CSS 文本样式用于控制网页中文本的外观，通过设置不同的属性，可以使文本更具有吸引力、可读性和美观性，从而提升网页的用户体验。

2 语法

在 CSS 中，你可以使用一系列属性来控制文本的样式，主要包括：

font-size：设置字体大小。
font-family：设置字体系列。
font-weight：设置字体粗细。
font-style：设置字体样式（比如斜体）。
color：设置文本颜色。
text-align：设置文本对齐方式（左对齐、右对齐、居中等）。
line-height：设置行高。
text-decoration：设置文本装饰（如下划线、删除线）等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 文本样式示例</title>
<style>
    /* CSS 样式 */
    /* 设置文本的字体大小为 18 像素 */
    body {
        font-size: 18px;
    }

    /* 设置标题的字体系列为 Arial、sans-serif */
    h1 {
        font-family: Arial, sans-serif;
    }

    /* 设置段落的字体粗细为粗体 */
    p {
        font-weight: bold;
    }

    /* 设置文本的颜色为蓝色 */
    .blue-text {
        color: blue;
    }

    /* 设置文本的对齐方式为居中 */
    .center-align {
        text-align: center;
    }

    /* 设置文本的行高为 1.5 倍字体大小 */
    .custom-line-height {
        line-height: 1.5;
    }

    /* 设置链接的文本装饰为下划线 */
    a {
        text-decoration: underline;
    }
</style>
</head>
<body>

<!-- HTML 示例 -->
<!-- 标题 -->
<h1>This is a Heading</h1>

<!-- 普通文本段落 -->
<p>This is a normal text paragraph.</p>

<!-- 使用 CSS 类来设置文本颜色 -->
<p class="blue-text">This text is blue.</p>

<!-- 使用 CSS 类来设置文本对齐方式 -->
<p class="center-align">This text is center-aligned.</p>

<!-- 使用 CSS 类来设置自定义行高 -->
<p class="custom-line-height">This text has custom line height.</p>

<!-- 设置链接文本 -->
<p>Visit our <a href="#">website</a> for more information.</p>

</body>
</html>

这个示例演示了如何使用 CSS 来设置文本的大小、字体、颜色、对齐方式、行高以及文本装饰。

文本格式

1 作用

2 语法

示例代码：

Leave a Comment 取消回复

内容