CSS外观属性

一久19

已于 2023-04-13 17:38:38 修改

阅读量273

点赞数

分类专栏：前端开发文章标签： css3 css html

于 2023-03-29 14:07:58 首次发布

本文链接：https://blog.csdn.net/yiran1919/article/details/129835741

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了CSS中用于设置文本样式的几个关键属性，包括颜色（预定义颜色、十六进制和RGB）、行间距、文本对齐（左对齐、右对齐、居中）以及首行缩进、字间距和单词间距的调整。还探讨了使用RGBA实现颜色透明度和text-shadow属性创建文字阴影的方法，这些都是网页设计中常见的文本格式化技术。

摘要由CSDN通过智能技术生成

文本颜色，color

1、预定义的颜色，如red、green、blue
2、十六进制设置颜色，这种形式是最常用的定义
3、RGB代码设置颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        .red{
            color: red;
        }

        .color00f{
            color: #fab86c;
        }

        .rgb{
            color: rgb(0,0,255);
        }
    </style>
</head>

<body>
    <h3 id="first">颜色设置</h3><hr/>
    <ol>
        <li class="red">预定义的颜色，如red、green、blue</li>
        <li class="color00f">十六进制设置颜色，这种形式是最常用的定义</li>
        <li class="rgb">RGB代码设置颜色</li>
    </ol>
</body>

</html>

前台展示，如下

行间距，line-height

line-height，设置行间距，即行与行之间的距离，一般称为行高。该属性单位，分别为像素px、相对值em和百分比%，使用最多的是像素px。

如下，一段文字，未设置行间距，页面样式展示

设置行间距代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        p{
            line-height: 26px;  /*行间距*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <p>
        结合ChatGPT的底层技术逻辑，有媒体曾列出了中短期内ChatGPT的潜在产业化方向：归纳性的文字类工作、代码开发相关工作、图像生成领域、智能客服类工作。

    </p>
    <p>
        ChatGPT受到关注的重要原因是引入新技术RLHF (Reinforcement Learning with Human Feedback，即基于人类反馈的强化学习)。RLHF解决了生成模型的一个核心问题，即如何让人工智能模型的产出和人类的常识、认知、需求、价值观保持一致。ChatGPT是AIGC（AI- Generated Content，人工智能生成内容）技术进展的成果。该模型能够促进利用人工智能进行内容创作、提升内容生产效率与丰富度。
    </p>
    <p>
        ChatGPT
        的使用上还有局限性，模型仍有优化空间。ChatGPT模型的能力上限是由奖励模型决定，该模型需要巨量的语料来拟合真实世界，对标注员的工作量以及综合素质要求较高。ChatGPT可能会出现创造不存在的知识，或者主观猜测提问者的意图等问题，模型的优化将是一个持续的过程。若AI技术迭代不及预期，NLP模型优化受限，则相关产业发展进度会受到影响。此外，ChatGPT盈利模式尚处于探索阶段，后续商业化落地进展有待观察。
    </p>
</body>

</html>

设置行间距后，页面展示

水平对齐方式，text-align

text-align属性，设置文本内容的水平对齐
可用属性值，如下：
left，左对齐
right，右对齐
center，居中对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        p{
            line-height: 26px;  /*行间距*/
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <p>
        结合ChatGPT的底层技术逻辑，有媒体曾列出了中短期内ChatGPT的潜在产业化方向：归纳性的文字类工作、代码开发相关工作、图像生成领域、智能客服类工作。

    </p>
    <p>
        ChatGPT受到关注的重要原因是引入新技术RLHF (Reinforcement Learning with Human Feedback，即基于人类反馈的强化学习)。RLHF解决了生成模型的一个核心问题，即如何让人工智能模型的产出和人类的常识、认知、需求、价值观保持一致。ChatGPT是AIGC（AI- Generated Content，人工智能生成内容）技术进展的成果。该模型能够促进利用人工智能进行内容创作、提升内容生产效率与丰富度。
    </p>
    <p>
        ChatGPT
        的使用上还有局限性，模型仍有优化空间。ChatGPT模型的能力上限是由奖励模型决定，该模型需要巨量的语料来拟合真实世界，对标注员的工作量以及综合素质要求较高。ChatGPT可能会出现创造不存在的知识，或者主观猜测提问者的意图等问题，模型的优化将是一个持续的过程。若AI技术迭代不及预期，NLP模型优化受限，则相关产业发展进度会受到影响。此外，ChatGPT盈利模式尚处于探索阶段，后续商业化落地进展有待观察。
    </p>
</body>

</html>

前台页面展示，如下，

首行缩进，text-indent

text-indent属性，设置首行文本的缩进，单位为em，1em就是一个汉字的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        p{
            line-height: 26px;  /*行间距*/
            text-indent: 2em;   /*首行缩进*/
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <p>
        结合ChatGPT的底层技术逻辑，有媒体曾列出了中短期内ChatGPT的潜在产业化方向：归纳性的文字类工作、代码开发相关工作、图像生成领域、智能客服类工作。

    </p>
    <p>
        ChatGPT受到关注的重要原因是引入新技术RLHF (Reinforcement Learning with Human Feedback，即基于人类反馈的强化学习)。RLHF解决了生成模型的一个核心问题，即如何让人工智能模型的产出和人类的常识、认知、需求、价值观保持一致。ChatGPT是AIGC（AI- Generated Content，人工智能生成内容）技术进展的成果。该模型能够促进利用人工智能进行内容创作、提升内容生产效率与丰富度。
    </p>
    <p>
        ChatGPT
        的使用上还有局限性，模型仍有优化空间。ChatGPT模型的能力上限是由奖励模型决定，该模型需要巨量的语料来拟合真实世界，对标注员的工作量以及综合素质要求较高。ChatGPT可能会出现创造不存在的知识，或者主观猜测提问者的意图等问题，模型的优化将是一个持续的过程。若AI技术迭代不及预期，NLP模型优化受限，则相关产业发展进度会受到影响。此外，ChatGPT盈利模式尚处于探索阶段，后续商业化落地进展有待观察。
    </p>
</body>

</html>

首行缩进的实际效果，作用于所有的段落

字间距，letter-spacing

letter-spacing属性，定义字间距，字符与字符之间的距离

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        div{
            letter-spacing: 10px;
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <div>
        好好工作，你司不会亏待你
    </div>
</body>

</html>

前台页面展示

单词间距，word-spacing

word-spacing属性，定义英文单词之间的距离
word-spacing和letter-spacing均可对英文进行设置。不同的是，word-spacing定义的是英文单词之间的间距，letter-spacing定义的是字母之间的间距。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        .letters{
            letter-spacing: 10px;   /*字母之间的间距设置*/
        }

        .words{
            word-spacing: 10px;     /*单词之间的间距设置*/
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <h4>字母之间的间距设置如下</h4>
    <div class="letters">
        hello world
    </div>
    <h4>单词之间的间距设置如下</h4>
    <div class="words">
        hello world
    </div>
</body>

</html>

letter-spacing和word-spacing设置的展示

颜色半透明，rgba(0,0,0,a)

color:rgba(r,g,b,a) a是alpha 设置透明度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        .letters{
            color: rgb(0,0,255);   /*未设置透明度*/
        }

        .words{
            color: rgba(0,0,255,0.2);    /*设置了透明度*/
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <h4>同样的字同样的颜色，未设置透明度</h4>
    <div class="letters">
        hello world
    </div>
    <h4>同样的字同样的颜色，设置了透明度</h4>
    <div class="words">
        hello world
    </div>
</body>

</html>

前台页面展示

文字阴影，text-shadow

text-shadow:水平位置垂直位置模糊距离阴影颜色
前2个参数必须写，后面的2个参数可以省略

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习</title>
    <style>
        .letters{
            font-size: 50px;
            font-weight: 700;
            color: rgb(0,0,255);
        }

        .words{
            font-size: 50px;
            font-weight: 700;
            text-shadow: 8px 4px 5px rgba(0,0,255,0.5);   /*设置了文字阴影*/
            color: rgb(0,0,255);
        }

        h3{
            text-align: center;     /*文本对齐方式*/
        }
    </style>
</head>

<body>
    <h3 id="first">CSS外观属性</h3>
    <hr />
    <h4>同样的字同样的颜色，未设置文字阴影</h4>
    <div class="letters">
        好好学习，天天向上
    </div>
    <h4>同样的字同样的颜色，设置了文字阴影</h4>
    <div class="words">
        好好学习，天天向上
    </div>
</body>

</html>