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

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

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;
}

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

相关文章
|
12天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
13天前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
13 2
|
13天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
12 1
|
14天前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
11 2
|
7天前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
9 0
|
13天前
|
前端开发
css 实现打字特效(仅支持单行文本)
css 实现打字特效(仅支持单行文本)
8 0
|
14天前
|
前端开发
CSS:一篇教会你用CSS装饰你的HTML文本
CSS:一篇教会你用CSS装饰你的HTML文本
|
前端开发
CSS常用文本属性
文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值: left (居左,缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下: .p2 {text-align:right} 演示示例 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。
824 0
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
48 0
|
19天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js