首页 前端知识 CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)

CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)

2024-05-25 09:05:02 前端知识 前端哥 636 899 我要收藏

        前言:在CSS3中新增了一些文本属性,新增文本属性可以使用户可以更轻松地调整字体、大小和颜色,从而提高文本的可读性和吸引力。


✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

——现在开始我们的讲解:

目录

1.CSS3新增文本属性

        (1)文本阴影:text-shadow

        (2)文本换行:white-space

        (3)文本溢出:text-overflow

        (4)文本修饰:text-decoration

        (5)文本描边:text-stroke


1.CSS3新增文本属性

对于新增的文本属性,先让我们看一下有哪些:

        (1)文本阴影:text-shadow

——text-shadow属性的作用为:用于给文本添加阴影。

其语法形式为:

text-shadow: h-shadow v-shadow blur color;

其中:

含义
h-shadow必需写,水平阴影的位置。允许负值。
v-shadow必需写,垂直阴影的位置。允许负值。
blur可选,模糊的距离。
color可选,阴影的颜色

当然,对于一个文本而言,其默认值为text-shadow:none ,表示没有阴影。

        这样我们就大致的了解了文本阴影:text-shadow的基本使用方式了,为了更好的使你理解,现在我们使用一个实例来进一步帮助你理解:

html代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.21.css">
</head>

<body>
    <div>这是一段文字!!!</div>
</body>

</html>

CSS代码:

div {
    font-size: 30px;
    text-shadow: 5px 5px 3px orange;
}

这里我们使文字具有30像素的字体大小,并且其文本会有一个向右和向下各偏移5像素、模糊半径为3像素的橙色阴影,效果如上图。

这样我们就大致文本阴影的使用了。

        (2)文本换行:white-space

——white-space属性的作用为:用于设置文本换行方式。

其常用值如下:

含义
normal文本超出边界自动换行,文本中的换行被浏览器识别为一个空格。(默认值)
pre原样输出,与pre 标签的效果相同。
pre-wrap在pre 效果的基础上,超出元素边界自动换行。
pre-line在pre 效果的基础上,超出元素边界自动换行,且只识别文本中的换行,空格
会忽略。
nowrap强制不换行

        感觉看了之后,懂是懂了,但是还是感觉欠点意思,没关系,现在我们使用一个案例来进一步帮助你理解文本换行:(我们使用pre和nowrap进行演示,其他的效果读者可以自行尝试

html代码:(pre)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.21.css">
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Dolorem ipsa quis
        dignissimos quos obcaecati fugiat sunt odio enim! Ipsa, sit.</div>
</body>

</html>

CSS代码:(pre)

div {
    width: 300px;
    height: 200px;
    /* 使文本原样输出 */
    white-space: pre;
    background-color: rgb(208, 229, 248);
}

为什么说是按照原样输出:(如图)

我们会发现在代码的前面有一些空格,最终展示的效果里前面也有一些空格,原代码分为三行,最终展示的效果也是这样的三行(本应该一行展示),这就是按照原样输出。

html代码:(nowrap

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.21.css">
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Dolorem ipsa quis
        dignissimos quos obcaecati fugiat sunt odio enim! Ipsa, sit.</div>
</body>

</html>

CSS代码:nowrap

div {
    width: 300px;
    height: 200px;
    /* 使文本强制不换行 */
    white-space: nowrap;
    background-color: rgb(208, 229, 248);
}

我们会发现,即使文本超出了边界,其也不会进行换行,这就是nowrap:强制不换行。

当然我们还有几个文本换行的属性值,这里不在进行集中演示了,读者可以自行尝试。这样我们就大致文本换行的使用了。

        (3)文本溢出:text-overflow

——text-overflow属性的作用为:用于设置文本内容溢出时的呈现模式。

其常用值如下:

含义
clip当内联内容溢出时,将溢出部分裁切掉。 (默认值)
ellipsis当内联内容溢出块容器时,将溢出部分替换为 ... 。

注意:

        要使得 text-overflow 属性生效,块容器必须显式定义 overflow 为非 visible值, white-space 为 nowrap 值。

这里我们直接使用实例来进行演示:

html代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.21.css">
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ipsa quis dignissimos quos obcaecati fugiat
        sunt odio enim! Ipsa, sit.</div>
</body>

</html>

CSS代码:

div {
    width: 300px;
    height: 200px;
    /* 必须设置 overflow 为非 visible 值, white-space 为 nowrap 值。 */
    overflow: hidden;
    white-space: nowrap;
    
    text-overflow: ellipsis;
    background-color: rgb(208, 229, 248);
}

有没有感觉这种显示方式很熟悉,是的,你肯定在网上浏览新闻的时候见到过,如图(选自头条):

——这就是其在日常生活中的应用场景。

这样我们就大致文本溢出的使用了。

        (4)文本修饰:text-decoration

——我们要知道在CSS3中,其升级了text-decoration 属性,让其变成了复合属性。

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor

但是我们也是可以分别设置其子属性的,子属性及其含义:

1. text-decoration-line 设置文本装饰线的位置:

        none : 指定文字无装饰 (默认值)
        underline : 指定文字的装饰是下划线
        overline : 指定文字的装饰是上划线
        line-through : 指定文字的装饰是贯穿线

2. text-decoration-style 文本装饰线条的形状

        solid : 实线 (默认)
        double : 双线
        dotted : 点状线条
        dashed : 虚线
        wavy : 波浪线

3. text-decoration-color 文本装饰线条的颜色

直接使用设置颜色的几种方式修饰即可。

这里我们还是直接使用实例来进行演示:

html代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.21.css">
</head>

<body>
    <div>这是一段文字!!!</div>
</body>

</html>

CSS代码:

div {
    text-decoration-line: overline;
    text-decoration-style: wavy;
    text-decoration-color: orange;
}

这样我们也可以对文本进行修饰,但是不建议,建议直接使用复合属性。

这样我们就大致文本修饰的使用了。

        (5)文本描边:text-stroke

——text-stroke属性的作用为:为文字设置文本描边。

其常用属性值:

        -webkit-text-stroke-width :设置文字描边的宽度,写长度值。
        -webkit-text-stroke-color :设置文字描边的颜色,写颜色值。
        -webkit-text-stroke :复合属性,设置文字描边宽度和颜色。

注意:文字描边功能仅 webkit 内核浏览器支持。

这里我们直接使用案例来进行讲解:

html代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.5.22.css">
</head>

<body>
    <div>这是一段文字!!!</div>
</body>

</html>

CSS代码:

/* 给文字设置其描边 */
div {
    font-size: 30px;
    font-weight: bold;
    -webkit-text-stroke: 2px orange;
}

这样我们就俩就了文本如何使用文本描边了。

如果想知道更多CSS的内容-------------------------->CSS_秋刀鱼不做梦的博客-CSDN博客


以上就是本篇文章的全部内容了~~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9382.html
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!