前言:在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博客
以上就是本篇文章的全部内容了~~~