首页 前端CSS正文

CSS - 样式文本

原创
admin 4个月前 (08-07) 阅读数 19 #CSS

CSS - 样式文本

CSS样式文本涉及通过设置适当的颜色、对齐方式、字母间距和缩进来修改文本内容的外观，使其更具视觉吸引力。本章演示了如何使用CSS属性在网页上设置文本样式。

如何在CSS中设置文本样式？

我们可以通过以下方式在CSS中设置文本样式。

  • 更改颜色：网页上文本的默认颜色是黑色。您可以根据网页主题使用CSS中的color属性更改此颜色。
  • 设置对齐：您可以使用CSS中的text-align属性来指定容器中文本的对齐方式（左对齐、右对齐、居中对齐）。
  • 文本装饰：CSS中的text-decoration属性可用于为文本添加下划线、上划线或删除线等效果。
  • 阴影效果：如果您想在网页文本周围创建阴影，可以使用CSS中的text-shadow属性。这可以创建3D效果或文本周围的微妙发光效果。
  • 更改字体样式：font-style属性允许您将文本样式设置为正常、斜体或倾斜。

文本样式属性

下表列出了用于文本样式的CSS属性：

属性 描述
color 设置文本颜色。
text-align 设置文本对齐方式。
text-align-last 设置文本块最后一行的对齐方式。
direction 设置文本方向。
text-indent 设置文本首行缩进。
letter-spacing 指定单词中字母之间的间距。
word-spacing 指定文本块中单词之间的间距。
white-space 控制元素内文本的空白区域流动。
text-decoration 设置文本装饰的简写属性。
text-transform 将文本转换为大写、小写或首字母大写。
line-height 控制元素内文本行之间的间距。
text-shadow 为文本添加阴影。

在CSS中设置文本颜色

要设置文本颜色，可以使用color属性。颜色可以用颜色名称、十六进制值、rgb/rgba值或hsl/hsla值指定。

示例

在此示例中，我们使用color属性设置了段落的文本颜色。

<!DOCTYPE html>
<html>
<head>
    <style>
        .name {
            color: blueviolet;
        }
        .hex {
            color:#ff00ff;
        }
        .rgb {
            color: rgb(255,124,100);
        }
        .rgba {
            color: rgb(255,124,100,0.5);
        }
        .hsl {
            color: hsl(7deg, 98%, 50%);
        }
        .hsla {
            color: hsl(7deg, 98%, 50%, 0.5);
        }
    </style>
</head>
<body>
    <p class="name">
        颜色名称: blueviolet;
    </p>

    <p class="hex">
        十六进制值: #ff00ff;
    </p>

    <p class="rgb">
        RGB值: rgb(255, 124, 100);
    </p>

    <p class="rgba">
        RGBA值: rgba(255, 124, 100, 0.5);
    </p>
    <p class="hsl">
        HSL值: hsla(7deg, 98%, 50%);
    </p>
    <p class="hsla">
        HSLA值: hsla(7deg, 98%, 50%, 0.5);
    </p>
</body>
</html>

设置文本对齐

网页中的文本可以在容器内水平和垂直对齐。要设置文本对齐，我们使用以下CSS属性。

  • text-align属性指定容器中文本的水平对齐方式（左对齐、右对齐、居中对齐、两端对齐）。
  • vertical-align属性用于将文本垂直对齐到顶部、底部、基线和中间。此属性用于内联元素、内联块元素和表格单元格。

示例

在此示例中，我们使用text-align和vertical-align属性设置文本的水平和垂直对齐。

<!DOCTYPE html>
<html>
<head>
    <style>
        th{
            vertical-align: bottom;
            border: 2px solid; 
            width: 200px; 
            height: 150px;
        }
    </style>
</head>
<body>
   <h2>文本对齐</h2>
        <p style="text-align: left;">文本左对齐。</p>
        <p style="text-align: right;">文本右对齐。</p>
        <p style="text-align: center;">文本居中对齐。</p>

        <table>
            <th>这是垂直对齐</th>
        </table>
</body>
</html>

对齐文本最后一行

要设置文本块最后一行的对齐方式，可以使用text-align-last属性。当使用text-align: justify;时，此属性可用于正确对齐最后一行。

示例

在此示例中，我们使用text-align-last属性以不同方式对齐最后一行。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            text-align: justify;
            text-align-last: right;
        }
    </style>
</head>
<body>
    <h2>text-align-last属性</h2>
    <p>这是文本对齐的示例。此段落的最后一行将与文本的其余部分不同方式对齐。</p>
</body>
</html>

使用text-justify对齐文本

text-justify属性指定当应用text-align: justify;时文本的对齐方法。在现代浏览器中，文本不受影响。尝试在Firefox中运行代码。

示例

在此示例中，我们使用text-justify属性控制文本对齐。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            text-align: justify;
            text-justify: inter-word;
        }
    </style>
</head>
<body>
    <h2>text-justify属性</h2>
    <p>此段落演示了text-justify属性如何工作。它调整单词之间的间距。</p>
</body>
</html>

在CSS中设置文本方向

文本方向指的是文档或元素中文本字符的方向。您可以使用direction属性设置文本方向。此属性接受两个值：

  • ltr (从左到右)：这是默认值，用于从左到右书写的语言，如英语。
  • rtl (从右到左)：用于从右到左书写的语言，如阿拉伯语或希伯来语。使用rtl时，文本默认右对齐。

示例

在此示例中，我们使用direction属性设置段落文本的方向。

<!DOCTYPE html>
<html>
<body>
    <p style="direction: rtl;">
        从右到左
    </p>

    <p style="direction: ltr;">
        从左到右
    </p>
</body>
</html>

在CSS中应用文本装饰

您可以使用text-decoration属性为文本添加额外的装饰，例如添加线条（下划线、删除线、上划线）、颜色、样式和线条粗细。

它是text-decoration-line、text-decoration-style、text-decoration-color和text-decoration-thickness的简写属性。

语法

text-decoration属性的语法如下：

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness | initial | inherit;

示例

在此示例中，我们使用text-decoration属性应用上划线、删除线和下划线样式，具有不同的颜色、粗细和线条类型。

<!DOCTYPE html>
<html>
<body>
    <h2>文本装饰</h2>
    <p style="text-decoration: overline solid red 5px;">
        上划线文本装饰。
    </p>
    <p style="text-decoration: line-through solid green 1px;">
        删除线文本装饰。
    </p>
    <p style="text-decoration: underline dashed 2pt blue;">
        下划线文本装饰。
    </p>
</body>
</html>

使用CSS text-transform进行文本样式设置

要更改文本外观，使用text-transform属性。它以各种方式转换文本，例如将文本转换为大写、小写，或将每个单词的首字母大写，甚至将所有字母大写。

示例

在此示例中，我们使用text-transform属性将文本转换为大写、小写和首字母大写。

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>
<body>
    <h2>文本转换</h2>
    <p style="text-transform: capitalize;">
        将每个单词的第一个字符大写。
    </p>

    <p style="text-transform: uppercase;">
        将所有文本转换为大写。
    </p>

    <p style="text-transform: lowercase;">
        将所有文本转换为小写。
    </p>
</body>
</html>

在CSS中添加文本强调

要在文本块上应用强调标记，可以使用text-emphasis属性。这些标记通常用于突出显示特定内容或指示某些语言中的发音或重音。

它是text-emphasis-style和text-emphasis-color的简写属性。

示例

在此示例中，我们使用text-emphasis属性为文本应用强调标记。

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>
<body>
   <h2>文本强调</h2>
        <p style="text-emphasis: dot;"> 
            使用点强调文本。
        </p>

        <p style="text-emphasis: circle red;">
            使用红色圆圈强调文本。
        </p>

        <p style="text-emphasis: triangle;"> 
            使用三角形强调文本。
        </p>
</body>
</html>

CSS文本缩进属性

要在边距和文本首行之间添加空间，可以使用text-indent属性。适当的缩进可以提高页面上文本的可读性和清晰度。

示例

在此示例中，我们使用text-indent属性缩进段落文本的首行。

<html>
<body>
    <h2>文本缩进</h2>
    <p style="text-indent: 2cm;">文本缩进：2厘米。</p>
    <p style="text-indent: 2in;">文本缩进：2英寸。</p>
    <p style="text-indent: 20%;">文本缩进：20%。</p>
</body>
</html>

CSS字母间距

要调整文本中字母之间的间距，可以使用letter-spacing属性。字母之间的间距可以增加或减少。

示例

在此示例中，我们使用letter-spacing属性增加和减少文本字母之间的间距。

<!DOCTYPE html>
<html>
<body>
    <h2>字母间距</h2>
    <p style="letter-spacing: normal;">
        字母间距正常。
    </p>
    <p style="letter-spacing: 5px;">
        字母间距增加。
    </p>
    <p style="letter-spacing: -1px;">
        字母间距减少。
    </p>
</body>
</html>

在CSS中应用word-spacing

word-spacing属性用于调整文本中单词之间的间距。单词之间的间距可以增加或减少。

示例

在此示例中，我们使用word-spacing属性增加和减少文本单词之间的间距。

<!DOCTYPE html>
<html>
<body>
    <h2>单词间距</h2>
    <p style="word-spacing: normal;">
        单词间距正常。
    </p>
    <p style="word-spacing: 100px;">
        单词间距增加。
    </p>
    <p style="word-spacing: -2px;">
        单词间距减少。
    </p>
</body>
</html>

使用white-space属性包装文本

white-space属性控制如何处理元素内的空白区域。它允许您管理文本中空格、制表符和换行的处理方式。

示例

这是使用white-space属性的不同值控制文本内空白区域的示例。

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>
<body>
    <h2>white-space属性</h2>
    <p style="white-space: normal;">
        这是一个white-space属性设置为normal的段落。文本在必要时会换行，多余的空格和换行符会被忽略。
    </p>

    <p style="white-space: nowrap;">
        这是一个white-space属性设置为nowrap的段落。文本不会换行到下一行，即使它溢出容器。
    </p>

    <p style="white-space: pre;">
        这是一个white-space属性设置为pre的段落。文本将保留所有空格和换行符。这意味着文本将按照HTML代码中的原样显示。
    </p>

    <p style="white-space: pre-wrap;">
        这是一个white-space属性设置为pre-wrap的段落。文本将保留所有空格和换行符，但在必要时会换行。
    </p>

    <p style="white-space: pre-line;">
        这是一个white-space属性设置为pre-line的段落。文本将折叠空格并在必要时换行，但会保留换行符。
    </p>
</body>
</html>

CSS行高属性

要指定文本行的高度，可以使用CSS的line-height属性。它控制行与行之间的间距。

示例

在此示例中，我们使用line-height属性增加行之间的间距。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            line-height: 2;
        }
    </style>
</head>
<body>
    <h2>line-height属性</h2>
    <p>此段落行高为2，使文本更具可读性和间距感。</p>
</body>
</html>

使用CSS创建文本阴影

text-shadow属性用于为文本添加阴影效果。它允许您通过指定阴影的水平偏移、垂直偏移、模糊半径和颜色来在文本后面创建阴影。

您可以通过用逗号分隔每个阴影来应用多个阴影。阴影的顺序很重要，第一个阴影最接近文本。

示例

在此示例中，我们使用text-shadow属性为段落应用不同的阴影效果，包括具有不同偏移、颜色和模糊半径的单个和多个阴影。

<!DOCTYPE html>
<html>
<head>
    <style>
        .txt1 {
            text-shadow: 2px 2px 5px grey;
        }
        .txt2 {
            text-shadow: -2px -2px 3px red;
        }
        .txt3 {
            text-shadow: 3px 3px 0px blue, -3px -3px 0px yellow;
        }
    </style>
</head>
<body>
    <h2>text-shadow属性</h2>
    <p class="txt1">
        此文本有灰色阴影，模糊半径为5px。
    </p>

    <p class="txt2">
        此文本有红色阴影，模糊半径为3px，偏移到左上角。
    </p>

    <p class="txt3">
        此文本有两个阴影：一个蓝色阴影偏移到右下角，一个黄色阴影偏移到左上角。
    </p>
</body>
</html>

CSS text-orientation属性

要在垂直书写模式中控制文本方向，我们使用text-orientation属性。

示例

在此示例中，我们使用text-orientation属性将文本垂直旋转。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
    </style>
</head>
<body>
    <h2>text-orientation属性</h2>
    <p>此文本使用text-orientation以垂直布局显示。</p>
</body>
</html>
版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： CSS - 字体 下一篇： CSS - 图片
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白