CSS(二)文字样式

最新推荐文章于 2024-04-30 19:38:51 发布
最新推荐文章于 2024-04-30 19:38:51 发布
阅读量360 收藏 3
点赞数 1
分类专栏： css3 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faramita_of_mine/article/details/121324671
版权

CSS之文字样式

一、文本颜色：color

  color 属性规定文本的颜色，该属性设置了一个元素的前景色（在HTML表现中，就是元素文本的颜色）。颜色通常有如下的表达方式，背景颜色 background-color 的用法与文本颜色 color 相同。

color_name        规定颜色值 为颜色名称的颜色(比如red)
hex_number        规定颜色值为十六进制值的颜色(比如#000000)
rgb_number        规定颜色值为rgb代码的颜色(比如rgb(255,0,0))
rgb_alpha         规定颜色的值为 rgb和透明度(比如rgba(255,0,0,0.5))
inherit           规定应该从父元素继承颜色（默认）

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>color</title>
    <style>
        .p1 {
            color: red;
        }

        .p2 {
            color: #ff0000;
        }

        .p3 {
            color: rgb(255, 0, 0);
        }

        .p4 {
            color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
<p class="p1">red 红色</p>
<p class="p2">#ff0000 十六进制的红色</p>
<p class="p3">rgb(255,0,0) rgb的红色</p>
<p class="p4">rgb(255,0,0,0.5) rgb的红色且透明度为0.5的颜色</p>
</body>
</html>

注意：像 #ff0000 这种层叠的样式可以简写为 #f00，#e30000 不能简写为#e300。

二、缩进：text-indent

  text-indent 属性规定文本块中首行文本的缩进。该属性值可以为像素值（px）、百分比或相对值 em，可以为正值或负值，如果使用负值，那么首行会被缩进到左边。

text-indent: 30px;

em 是一个相对的大小，我们可以这样来设置1 em，0.5 em，1.5 em 等，而且 em 还可以指定到小数点后三位，比如“1.365em”。

而其中“相对”的意思是指相对于元素父元素的 font-size。比如：

如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

使用 em 布局是希望在父节点中修改字体大小时，整个网站的页面字体都跟随变化。
案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-indent</title>
    <style>
        body {
            font-size: 20px;
        }

        .p1 {
            text-indent: 10px;
        }

        .p2 {
            text-indent: 10%;
        }

        .p3 {
            text-indent: 2em;
        }

        .p4 {
            text-indent: 40px;
        }
    </style>
</head>
<body>
<p class="p1">text-indent</p>
<p class="p2">text-indent</p>
<p class="p3">text-indent</p>
<p class="p4">text-indent</p>
</body>
</html>

三、行高：line-height

  line-height 属性用来设置行间的距离(行高)，该属性会影响行框的布局，在应用到一个块级元素时，其定义了该元素中基线之间的最小距离，属性值下所示。

normal            默认值。设置合理的行间距
number            设置数字，此数字会与当前字体尺寸相乘来设置行间距（line-height:2）
length            设置固定的行间距(如12px)
%                 基于当前字体尺寸的百分比设置行间距
inherit           规定应该从父元素继承line-height属性的值

通常在开发中，经常使用行高大小与父级元素大小相同，达到竖直居中效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>line-height</title>
    <style>
        * {
            margin: 0;
        }

        body {
            font-size: 20px;
        }

        .p1 {
            line-height: 2;
            background-color: aqua;
        }

        .p2 {
            line-height: 40px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<p class="p1">line-height</p>
<div class="p2">line-height</div>

</body>
</html>

注意：* { margin: 0; } 是为了清除 p 和 body 标签默认的外边距 margin。

四、字母间隔：letter-spacing

  letter-spacing 属性用来定义增加或减少字符间的空白(字符间距)。

normal            默认，规定字符间没有额外的空间
length            定义字符间的固定空间(允许使用负值 10px)
inherit           规定应该从父元素继承letter-spacing属性的值

  该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal 就相当于值为0。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>letter-spacing</title>
    <style>
        .p1 {
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
<p class="p1">letter-spacing</p>
</body>
</html>

五、水平对齐：text-align

  text-align 属性规定元素中文本的水平对齐方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

left        左对齐，把文本排列到左边，默认值:由浏览器决定
right       右对齐，把文本排列到右边
center      居中对齐，把文本排列到中间
justify     实现两端对齐文本效果
inherit     规定应该从父元素继承text-align属性的值

  值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔，使各行的长度恰好相等。两端对齐在实际开发中很少使用。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-align</title>
    <style>
        .p1 {
            text-align: left;
        }
        .p2{
            text-align: right;
        }
        .p3{
            text-align: center;
        }
        .p4{
            text-align: justify;
        }
    </style>
</head>
<body>
<p class="p1">text-align</p>
<p class="p2">text-align</p>
<p class="p3">text-align</p>
<p class="p4">text-align</p>
</body>
</html>

六、文本装饰：text-decoration

  text-decoration 属性规定添加到文本的修饰。通常在开发中使用 text-decoration 清除或更换 a 标签的默认样式。

none            默认，定义标准的文本
underline       定义文本下的一条线
overline        定义文本上的一条线
line-through    定义穿过文本的一条线

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
    <style>
        a {
            text-decoration: none;
        }

        .p1 {
            text-decoration: underline;
        }

        .p2 {
            text-decoration: overline;
        }

        .p3 {
            text-decoration: line-through;
        }

    </style>
</head>
<body>

<a href="#">我是a标签</a>
<p class="p1">我是</p>
<p class="p2">我是</p>
<p class="p3">我是</p>
</body>
</html>

练习：按照设计图编写代码
在这里插入图片描述
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>再别康桥</title>
    <style>
        body {
            font-size: 20px;
        }

        .content {
            width: 420px;
            margin: 0 auto;
        }

        p, h1 {
            text-align: center;
        }

        .author {
            text-indent: 220px;
            text-decoration: underline;
        }

        .p1 {
            color: red;
        }

        .p2 {
            color: green;
        }

        .p3 {
            color: blue;
        }

        .p4 {
            color: orange;
        }
    </style>
</head>
<body>
<div class="content">
    <h1>再别康桥</h1>
    <p class="author">徐志摩</p>
    <p class="p1">轻轻的我走了，正如我轻轻的来；</p>
    <p class="p2">我轻轻的招手，作别西天的云彩；</p>
    <p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
    <p class="p4">波光里的艳影，在我的心头荡漾。</p>
</div>
</body>
</html>

七、字体大小：font-size

  font-size 属性用来定义文本的大小。属性值可以为绝对值或相对值。绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小(不利于可用性)，绝对大小在确定了输出的物理尺寸时很有用。相对值是相对于周围的元素来设置大小，允许用户在浏览器中改变文本大小。

  W3C 推荐使用相对值 em 来定义文本大小。1em 等于当前的字体尺寸，如果一个元素的 font-size 为 12 像素，那么对于该元素，1em 就等于12 像素。在设置字体大小时，em 的值会相对于父元素的字体大小的变化而改变。

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体大小</title>
<style>
body {
    font-size:12px;
}

.p1 {
    font-size:12px;
}
.p2 {
    font-size:14px;
}
.p3 {
    font-size:1.5em;
}
.p4 {
    font-size:180%;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

八、字体加粗：font-weight

  font-weight 属性用来定义字体的粗细。属性值下所示。

nomal        默认值，定义标准的字符
bold         定义粗体字符
lighter      定义更细的字符
100-900      定义由粗到细的字符，400 等同于normal,而700等同于bold
inherit      规定应该从父元素继承字体的粗细

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体加粗</title>
<style>
body {
    font-size:12px;
    font-weight:bold;
}
h3 {
    font-weight:normal;
}
.p1 {
    font-weight:bold;
}
.p2 {
    font-weight:inherit;
}
.p3 {
    font-weight:100;
}
.p4 {
    font-weight:600;
}
</style>
</head>
<body>
<h3>see you again</h3>
<p class="p1">It's been a long day without you my friend</p>
<p class="p2">It's been a long day without you my friend</p>
<p class="p3">It's been a long day without you my friend</p>
<p class="p4">It's been a long day without you my friend</p>
</body>
</html>

九、文本溢出：text-overflow

  在网页开发过程中，可能会遇到内容溢出而导致网页变形的问题。通常会通过 JavaScript 截取字符串或网站后台程序截取一定的字符串，将超出宽度的内容以省略号… 显示，但这两种方法都有其不足之处，如中英文计算字符长度的问题，会导致截取字符串长度无法控制，从而降低程序的通用性。CSS3 新增了 text-overflow 属性，使用该属性可快速地解决上述问题。text-overflow 属性规定当文本溢出包含元素时发生的事情，text-overflow 在使用时父元素必须加 overflow:hidden; 并且强制文本不换行 white-space:nowrap；具体如下所示。

clip          修剪文本（默认）
ellipsis      显示省略符号来代表被修剪的文本
string        使用给定的字符串来代表被修剪的文本（只支持火狐浏览器）

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本溢出</title>
    <style>
        body {
            font-size: 12px;
        }

        p {
            width: 150px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            white-space: nowrap;
        }

        .p2 {
            text-overflow: clip;
        }

        .p3 {
            text-overflow: ellipsis;
        }

        .p4 {
            text-overflow: "~~~";
        }
    </style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

十、文字阴影：text-shadow

  text-shadow 属性用来给页面上的文字添加阴影效果，属性值如下所示。

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

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字阴影</title>
    <style>
        body {
            text-align: center;
        }

        .p1 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px;
        }

        .p2 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px 5px;
        }

        .p3 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px 5px #222;
        }

        .p4 {
            font-size: 30px;
            color: #f0c;
            text-shadow: 10px 10px 3px #ffff00,
            20px 20px 6px #66ff66,
            30px 30px 9px #00ccff;
        }
    </style>
</head>
<body>
<h1>再别康桥</h1>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

章节练习：

1.按照如下设计图完成文字排版
在这里插入图片描述
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>念奴娇·赤壁怀古</title>
    <style>
        body{
            font-family: "方正行楷简体";
        }
        .ancientBook {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            background-image: url("book.jpg");
            background-repeat: no-repeat;
        }

        .poemTitle {
            width: 20px;
            line-height: 25px;
            font-size: 20px;
            float: right;
            margin-top: 50px;
            margin-right: 2px;
            color: brown;
            text-shadow: 1px 1px black;
        }

        .author {
            margin-right: 10px;
            margin-top: 120px;
            float: right;
            font-size: 17px;
            width: 17px;
            text-decoration: underline;
        }

        p {
            margin-top: 25px;
            float: right;
            font-size: 17px;
            width: 17px;
        }

        .line1 {
            margin-right: 15px;
            color: rgb(255, 0, 0);
        }

        .line2 {
            margin-right: 15px;
            color: rgb(255, 100, 0);
        }

        .line3 {
            margin-right: 15px;
            color: rgb(255, 125, 0);
        }

        .line4 {
            margin-right: 13px;
            color: rgb(255, 225, 0);
        }

        .line5 {
            margin-right: 15px;
            color: rgb(255, 255, 0);
        }

        .line6 {
            margin-right: 15px;
            color: rgb(200, 255, 0);
        }

        .line7 {
            margin-right: 13px;
            color: rgb(0, 255, 0);
        }

        .line8 {
            margin-right: 13px;
            color: rgb(0, 127, 127);
        }

        .line9 {
            margin-right: 13px;
            color: rgb(0, 127, 255);
        }

        .line10 {
            margin-right: 15px;
            color: rgb(0, 100, 255);
        }

        .line11 {
            margin-right: 15px;
            color: rgb(0, 0, 255);
        }

        .line12 {
            margin-right: 15px;
            color: rgb(69, 0, 255);
        }

        .line13 {
            margin-right: 15px;
            color: rgb(139, 0, 255);
        }

        .line14 {
            margin-right: 13px;
            color: rgb(139, 0, 190);
        }

    </style>
</head>
<body>
<div class="ancientBook">
    <h1 class="poemTitle">念奴娇·赤壁怀古</h1>
    <h4 class="author">苏轼</h4>
    <p class="line1">大江东去 ，浪淘尽 ，千古</p>
    <p class="line2">风流人物 。</p>
    <p class="line3">故垒西边 ，人道是 ，三国</p>
    <p class="line4">周郎赤壁。</p>
    <p class="line5">乱石穿空 ，惊涛拍岸 ，</p>
    <p class="line6">卷起千堆雪 。</p>
    <p class="line7">江山如画，一时多少豪杰</p>

    <p class="line8">遥想公瑾当年 ，小乔初嫁</p>
    <p class="line9">了 ,雄姿英发 。</p>
    <p class="line10">羽扇纶巾 ，谈笑间 ，樯橹</p>
    <p class="line11">灰飞烟灭</p>
    <p class="line12">故国神游 ，多情应笑我 ，</p>
    <p class="line13">早生华发 。</p>
    <p class="line14">人生如梦 ，一尊还酹江月 。</p>
</div>

</body>
</html>
faramita_of_mine
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 文字样式 第二节
菜鸟心声：学的不仅是技术，更是梦想！
11-12 486
文字样式 文本颜色：color color 属性规定文本的颜色，该属性设置了一个元素的前景色（在HTML表现中，就是元素文本的颜色）。颜色通常有如下的表达方式，背景颜色 background-color 的用法与文本颜色 color 相同 color_name 规定颜色值 为颜色名称的颜色(比如red) hex_number 规定颜色值为十六进制值的颜色(比如#000000) rgb_number 规定颜色值为rgb代码的颜色(比如rgb(255,0,0)) rgb
软件测试 学习之路 CSS (四)
lison bolg
07-05 4173
一、文字样式中阶 字体样式 代码格式： font： 文字粗细 大小/行高 字体名称； 例子：font: bold 200px/400px "微软雅黑"; 2.字体阴影 代码格式： text-shadow：x y r color； 注：x是为负数则阴影向左，整数向右，同理y正数向上，负数向下，r代表阴影模糊程度，数值月大则越模糊，其单位都是px，color为文字颜色。 例子：text-shado...
css文字样式练习
qq_61686950的博客
10-21 337
<!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的文字样式
月月猴的博客
06-08 767
css文字样式: 额外:颜色: 英文单词:red blue… rgb:红(255)绿(255)蓝(255)—rgb(255,255,255) rgba(a代表透明度 0~1 如: 0.5可以写为.5 即 0可以省略 ) .font{ width:300px; hight:100px; text-align:justify; /*文字对齐:left ri...
CSS之文字样式
weixin_45604020的博客
06-22 6540
CSS字体属性定义字体，颜色、大小，加粗，文字等的样式。
纯css3艺术文字样式效果代码
11-04
随着技术的发展，CSS3引入了许多新的特性和功能，其中包括艺术文字样式效果。本篇文章将深入探讨如何使用纯CSS3创建艺术文字效果。 一、CSS3的艺术文字基础 1. 文字阴影（text-shadow）：通过添加阴影，可以为文字...
纯CSS样式透明水滴文字特效
07-24
在实现“纯CSS样式透明水滴文字特效”时，设计师需熟练掌握上述技术，并根据实际需求进行创新组合和调整。提供的压缩包文件“jiaoben8462”可能包含示例代码或资源，通过研究和学习这些文件，可以更直观地了解如何将...
CSS控制表格文字样式的研究
12-12
即使在DIV满天飞的今天，Table在网页的布局中还是少不了的，因为当需要输出数据时，Table布局远远比DIV布局有优势，而且同样的我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV CSS，而是倡导采用更...
css3文字上下滚动切换特效
04-06
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和动态交互功能。"css3文字上下滚动切换特效"是利用CSS3的特性来实现的一种新颖的文字展示方式，它能吸引用户的注意力，提升网页的互动性和...
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果，它将普通的加载指示器与文字结合，为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言，只需通过CSS...
常见的文字样式
qq_41543169的博客
06-15 1000
1.行高 line-height 当我们将行高设置成当前元素的高度时，可以实现单行文字在该元素中垂直方向居中显示的效果。 2.水平对齐方式 text-align: left 或者 right或者 center,分别表示字体在盒子当中水平对齐方式。 3.字体大小 font-size,单位是px,一般情况下浏览器会有一个最小的字体大小。 4.字体颜色 color 。可以设置颜色单词，也可以设置十六进制数字 5.字体粗细 font-weight。 可以设置关键字，或者数值（100-900）一般关键字有n
js网页制作11
m0_62788719的博客
10-31 127
js网页制作11
CSS文字样式
weixin_44340137的博客
10-21 210
1.初识CSS <!DOCTYPE HTML> <html> <head> <title>初识CSS</title> <meta charset="UTF-8"> <!--设置的是文本内容的大小 30px之间不能有空格否则无效 设置字体之间的大小使用冒号而不是分好 所有的符号都必须在英文的状态下进行输入而非中文--...
css---常用文本样式练习示例代码
qq_43766304的博客
03-04 527
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
CSS 文本样式 包括单个文字样式、段落样式
ai_365的博客
04-15 821
CSS 文本样式 包括单个文字样式、段落样式
CSS基础知识3-文字样式
m0_57506941的博客
07-26 219
样式的继承 在CSS中，祖先元素的样式，也会被它的后代元素所继承。利用继承我们可以将一些基本样式设置给祖先元素，这样后代元素就会自动继承这些样式，但是并不是所有的样式都可以被子元素继承，比如：背景相关的样式并不会被继承。 我们可以通过参考手册的继承性判断该样式是否可以被继承。 选择器的优先级 当使用不同的选择器时，选中同一个元素并且设置同样的样式会产生冲突，最终到底是采用哪个选择器电仪的样式由选择器的优先级决定。 优先级顺序： 内联样式：优先级 1000 id选择器：优先级 ...
CSS设置像文字一样的按钮
天高任鸟飞
11-13 4549
CSS设置像文字一样的按钮           CSS可以将按钮变成普通的文字一样。           首先，跟普通的表单一样，定义、等标记，并设置相应的类型，以便控制它的样式。 <!--
Web前端——文字、文本样式，overflow，display
Singe_lq的博客
07-03 2621
与-webkit-line-clamp一起连用。取值：100~300(lighter) 细 400~500(normal) 正常 600~900(bold) 加粗。rgba(red,green,blue,alpha) alpha [0,1]设置不透明度 0 完全透明 1完全不透明。2.设置几行省略 -webkit-line-clamp。行高=字体大小+上间距+下间距 上间距=下间距。
CSS中文本样式（详解网页文本样式）
最新发布
百赢出品，必属精品
04-30 1448
CSS Text模块用于控制文本的外观和排版。它提供了一系列属性，允许开发者对文本进行格式化和布局，以实现各种视觉效果。文本样式属性：CSS提供了一系列属性来控制文本的外观，包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐：通过text-align属性可以控制文本在其容器中的水平对齐方式，如左对齐、右对齐、居中对齐等。文本装饰：使用属性可以添加文本装饰效果，如下划线、删除线等。行高和间距属性用于设置行高，和属性分别控制字母和单词之间的间距。文本转换。
CSS基础入门：文字样式与段落示例
CSS文字样式涉及到字体选择（如`font-family`）、颜色（`color`）、装饰（`text-decoration`）、粗细（`font-weight`）和大小（`font-size`）等。例如，作者提到如何模拟Google公司的logo，这通常需要细致地调整字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

faramita_of_mine

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值