学好css优化HTML【基础版】

已于 2024-06-30 20:29:20 修改
阅读量1k 收藏 20
点赞数 33
分类专栏： HTML 文章标签： css html 前端
于 2024-05-14 21:06:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65450681/article/details/138866070
版权

目录

一、概述

二、认识css

1.css的意义

2.结构

3.运行结果

三、css的三种引入方式

1.行内式

  a.代码展示

  b.结果展示

2.内嵌式

a.代码展示

b.运行结果展示

3.外链式

四、通配符选择器（全局选择器）

1.结构组成

2.运行结果展示

五、ID选择器

1.结构

2.运行结果展示

六、类选择器

1.结构

2.运行结果展示

七、伪类选择器

1.结构

2.使用方法介绍

3.运行结果

八、文字属性

1.属性总结

a.代码展示

b.运行结果展示

2.简写属性

a.代码展示

b.运行结果

九、文字装饰效果

1.属性介绍

2.代码展示

3.运行结果

十、段落属性

1. 缩进与间距

2.运行结果

3.总结

十一、文本对齐方式

1.代码展示

2.运行结果展示

十二、图片对齐方式

1.代码展示

2.运行结果

3.注意

十三、子代选择器与后代选择器

1.子代选择器

a.代码展示

b.运行结果

2.后代选择器

a.代码展示

b.运行结果展示

十四、并集选择器

1.代码展示

2.运行结果

3.总结

十五、交集选择器

1.代码展示

2.运行结果

3.特殊处

十六、css的继承性

1.代码展示

2.运行结果

3.总结

十七、css的层叠性

1.代码展示

2.运行结果

3.总结

十八、css优先级

1.代码展示

2.运行结果展示

3.总结

一、概述

css是我们在制作网页的时候至关重要的一部分，主要作用就是装饰我们的网页外观，给我们更直观具体的展现出来，那么让我们来一起开始学习css吧~

二、认识css

1.css的意义

css：Cascading Style Sheets（英文全称）

        层叠样式表（中文含义），用于控制网页外观（作用）

2.结构

选择器{

            属性名（键名）：属性值（键值）

        }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
       
        p{
            color: pink;
            background-color: bisque;
            text-align: center;
        }
    </style>
</head>
<body>
   
    <p>喜欢你</p>
</body>
</html>

3.运行结果

三、css的三种引入方式

1.行内式

  a.代码展示

 <p  style="color: red;">第一种引入方式-行内式</p>

  b.结果展示

2.内嵌式

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
        background-color:brown;
         }
    </style> 
  
   
</head>
<body>
   
    <div>第二种引入方式 内嵌式 </div> 
    
</body>
</html>

b.运行结果展示

3.外链式

这种引入方式是我们以后常用的一种方式，会让我们的代码结构更加的整洁，不那么臃肿，那么这种方式需要我们再新建一个.css文档。具体如下展示哦~

注意：这个css文档中引用了2.css文档，意为将2.css模块化，可以引用在任何css文件中，引用时前面加上@important url即可。

四、通配符选择器（全局选择器）

1.结构组成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: aqua;
        }
        p{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
    <p>这是一个段落标签</p>
</body>

2.运行结果展示

小伙伴们注意看，如果我们不加全局选择器的话运行出来的结果是这样的：

注：全局选择器：设置所有标签使用同一样式，用*表示

五、ID选择器

1.结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
        #box{
            background-color: aqua;
        }
        p{
            background-color: aquamarine;
        }
        #box1{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="box">我不想学习了。。。。。</div>
    <div id="box1">人生不是轨道而是旷野。。。。</div>
    <p>日子和你都会闪闪发光</p>
</body>
</html>

2.运行结果展示

注：

ID选择器具有唯一性

   #ID名称{

            属性名：属性值；

        }

六、类选择器

1.结构

类选择器

         .类名{

            属性名：属性值；

         }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .box{
            background-color:pink;
            width: 800px;
            height: 50px;
            text-align: center;

        }
    </style>
</head>
<body>
    <div class="box">日出江花红胜火，春来江水绿如蓝</div>
</body>
</html>

2.运行结果展示

注意：类选择器是用点加类名进行使用的。

七、伪类选择器

1.结构

下面我们用一个a标签举例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        a:link{
           color: aqua;
        }
        a:visited{
           color: blue;
        }
        a:hover{
           color: red;
        }
        a:active{
            color: plum;
        }
    </style>
</head>
<body>
    
    <a href="01认识css.html">认识css</a>
</body>

2.使用方法介绍

a:link 未被访问过，访问之前的状态

 a:visited 访问过后的状态、

  a:hover  鼠标滑过的状态

a:active 鼠标按下时的状态

3.运行结果

当运行出来时“认识css”是青色字体

鼠标滑过时是红色字体

鼠标按下时是淡紫色字体

访问过后返回时字体变为蓝色

八、文字属性

1.属性总结

字体颜色 color：颜色；

         字体大小 font-size：值px;

         字体 font-family ：字体样式；

         字体加粗 font-weight：100-900（整百值）

         字体倾斜 font-style：italic;

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        p{
            color: aqua;
            font-size: 20px;
            font-family:'华文新魏';
            font-weight: 500;
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>今天是个好天气，阳光明媚。</p>
</body>
</html>

b.运行结果展示

这是我们的文字属性，但是这样写有些繁琐，让整体结构看起来比较臃肿，那么我们就可以简写文字的属性，使用方法如下：

2.简写属性

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是按顺序：font-styl font-variant font-weight font-size/font-weight font-family

 font-size和font-family的值是必须的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .box1{
            font: italic bolder 30px/45px 华文新魏 ;
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="box1">空山新雨后，天气晚来秋。</div>
</body>
</html>

b.运行结果

九、文字装饰效果

1.属性介绍

 text-decoration:none(取消默认下划线)/underline(下划线)/line-through(删除线)/overline(上部线条)

2.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        p{
            text-decoration: line-through;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>天气太热了，不适合学习.....</p>
    <a href="#">锄禾日当午，汗滴禾下土。</a>
</body>
</html>

3.运行结果

这里只举例两个其他的小伙伴们自行尝试哦！~

十、段落属性

1. 缩进与间距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 500px;
            border: 1px solid rgb(111, 244, 28);
            margin: 0 auto;
            text-indent: 2em;
            letter-spacing: 6px;
           
        }
        div{
           
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <p>向山林间望去，有一位穿着粗布衣服的老者拉着牛准备回家。突然山林间传来一阵婴儿的啼哭声，他像是被什么召唤一样拉着牛走到了婴儿面前，就在这时婴儿停止了啼哭。这个放牛的老者心生怜悯，将婴儿抱回了家“看你生的好生俊俏就取名单字‘俊’吧”老者坐在破旧的床上说到。这个老者名叫牛固家里世代都以养牛为生，可是现在世事变迁只剩下他一人。</p>
    <div>I like you</div>
</body>
</html>

2.运行结果

3.总结

字与字（字母与字母）的间距letter-spacing

单词与单词之间的间距 word-spacing

首行缩进属性 text-indent

                   px 像素值 固定

                   em 相对单位 相对于其父元素的字体大小

                   rem 相对单位

十一、文本对齐方式

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .p1{
            text-align: center;
        }
        .p2{
            text-align: left;
        }
        .p3{
            text-align: right;
        }
        .p4{
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="p1">空山新雨后，天气晚来秋。</p>
    <p class="p2">人生不是轨道而是旷野</p>
    <p class="p3">温柔是一种力量，它能够化解我们内心的矛盾和焦虑，带给我们平静与安慰。</p>
    <p class="p4">一束鲜花，一盒巧克力，一段温柔的话语，这是来自生活的微小确幸。在平凡的日子里找到诗意，这些简单美好的事物带来暖心的治愈。</p>
  
</body>
</html>

2.运行结果展示

十二、图片对齐方式

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
   
    <div>
      
        <img src="./images/1.webp" alt="">
    </div>
</body>
</html>

2.运行结果

3.注意

div是块元素独占一行

 img 行内块元素

十三、子代选择器与后代选择器

1.子代选择器

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器 */
         .box>div{
            color: aqua;
         }
    </style>
</head>
<body>
    <div class="box">
        <p>这里是box里的p标签</p>
        <div>
            <p>这是div里的p标签</p>
            <div>这是div里的div标签</div>
        </div>
       <ul>
        <li>
            <div>11324325</div>
        </li>
       </ul>
    </div>
</body>
</html>

b.运行结果

这里只有两行变成了青色，因为这里我们把最外侧的div盒子命名为box,我们上面写道让box盒子里的div字体属性变为青色，也就是div是box的子代。所以运行结果如下：

2.后代选择器

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
         .box div{
            color: aqua;
         }
    </style>
</head>
<body>
    <div class="box">
        <p>这里是box里的p标签</p>
        <div>
            <p>这是div里的p标签</p>
            <div>这是div里的div标签</div>
        </div>
        <p>1235</p>
       <ul>
        <li>
            <div>11324325</div>
        </li>
       </ul>
    </div>
</body>
</html>

b.运行结果展示

这里我们可以清楚的看到box盒子里的所有div字体都变了颜色，也就是可以理解为父辈与子辈还有孙辈，只要是后代就可以进行改变，这就是后代选择器。

十四、并集选择器

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,h1{
          text-align: center;
        }
    </style>
</head>
<body>
    <p>锄禾日当午</p>
    <div>汗滴禾下土</div>
    <h1>谁知盘中餐</h1>
    <p>粒粒皆辛苦</p>
</body>
</html>

2.运行结果

3.总结

如果我们多个类需要同一种效果，可以将其罗列在一起实现，用逗号隔开。

十五、交集选择器

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box2{
          text-align: center;
        }
    </style>
</head>
<body>
    <p class="box1">锄禾日当午</p>
    <p  class="box1 box2" >汗滴禾下土</p>
    <p class="box1">谁知盘中餐</p>
    <p class="box1">粒粒皆辛苦</p>
</body>
</html>

2.运行结果

3.特殊处

十六、css的继承性

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        body{
            text-align: center;
            color: aqua;

        }
    </style>
</head>
<body>
    <p>离离原上草</p>
    <br>
   
    <a href="#">一岁一枯荣</a>
</body>
</html>

2.运行结果

3.总结

样式继承：如果标签本身具有该属性，就自身属性生效，如果没有该属性，则继承上一级（直到找到最外层body）

注意:仅仅文本的样式会继承

注意：如果标签自己有样式则生效自己的样式，不继承（仅是字体）

十七、css的层叠性

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: aqua;
        }
        div{
            color: blue;
        }
       
    </style>
</head>
<body>
    <div>今天天气好晴朗</div>
    <p>--------------</p>
    <div>好呀好晴朗</div>
</body>
</html>

2.运行结果

3.总结

相同的选择器 下面的样式会覆盖上面的

十八、css优先级

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
          <style>
            .box{
                color: aquamarine !important;
            }
            #box{
                color: rgb(235, 47, 213);
            }
            div{
                color: red;
            }
          </style>
</head>
<body>
    <
    <div id="box" class="box" style="color: aqua;">猜猜我是什么颜色</div>
</body>
</html>

2.运行结果展示

3.总结

css样式权重

    ！important >行内样式>id选择器>类选择器>标签选择器>全局选择器

辛-夷
关注
  • 33
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
怎么学好html5和css3,如何提高你的CSS水平
weixin_39615419的博客
06-17 312
在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。事实上，css是一...
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 729
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 1903
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
html css语言简介,CSS 介绍
weixin_39802132的博客
05-31 483
CSS 介绍CSS代表级联样式表( Cascading Style Sheets)。CSS是一种标准样式表语言，用于描述网页的表示形式(即布局和格式)。在CSS之前，HTML文档的几乎所有表示形式属性都包含在HTML标记内(特别是在HTML标签内)。所有字体颜色，背景样式，元素对齐方式，边框和大小都必须在HTML中明确描述。这样做产生的后果，就是由于样式信息被重复地添加到网站的每个页面中，因此大型...
HTML基础铺垫
小田是个程序员的博客欢迎你的到来呀~
08-04 793
HTML（HyperText Markup Language）是一种通用的标记语言，用于创建网页和在线应用程序。它使用标签来标记文档中的不同部分，以指定文档的结构和外观。 HTML标记可以指定文档的标题、段落、图像、链接、表格和其他元素。HTML标记也可以用于添加样式、语义和功能到网页中。
必学的web前端三大核心:JavaScript css3 HTML5
cpythonsz的博客
07-30 902
对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScript（ES6）是必须要学好的。这其中有很多很多的技术，比如，CSS3 引申出来的 Canvas（位图）、SVG（矢量图） 和 WebGL（3D 图），以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。ES6 简直就是把 JavaScript 带到了一个新的台阶，JavaScript 语言的强大，大大释放了前端开发人员的生产力，让前端得以开发更为复杂的代码和程序，于是像 Re
学好前端开发之HTML规范
软件开发-前端开发-IT
07-24 155
摘要 优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护 HTML 规范 缩进 统一两个空格缩进 命名规范 class 应以功能或内容命名，不以表现形式命名； class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔； 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class； DOC...
CSS 基础笔记
FAST_13469ND的博客
10-02 2160
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样...
如何学好java基础
热门推荐
iteen的博客
05-22 1万+
今天在公众号偶然发现这么一篇文章,对于笔者谈的:"一方面很努力学习，一方面又觉得不踏实",我感同身受.觉得文章写得不错,在此献给一些在java中努力修炼的道友,希望能有所收获.这是文章链接:https://mp.weixin.qq.com/s/IU_xCCGSRbEQQLkpqpaB3A文章内容我也全部copy过来:近日里，很多人邀请我回答各种j2ee开发的初级问题，我无一都强调java初学者要先...
学好html+css基础
09-25
### 学好HTML+CSS基础 #### 一、HTML+CSS概述 HTML（HyperText Markup Language，超文本标记语言）和CSS（Cascading Style Sheets，层叠样式表）是Web开发的基础技术之一，用于构建网页的基本框架和设计网页的表现...
HTML.css知识总结.md
06-19
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
html+css入门学习笔记
01-24
记住，理论知识与实践相结合是学好HTML+CSS的关键。 总之，HTML+CSS的学习是一段充满创造性和乐趣的旅程，只要你用心投入，一定能够打造出独具特色的网页作品。不断探索，持续学习，你将在网页设计的世界里游刃有余...
零基础如何快速学好web前端，HTML5 CSS3 3D魔方拼图网页开发源码
07-24
"零基础如何快速学好web前端.txt"和"web前端学习必看资料.txt"这两份文档很可能是提供学习策略和资源的指南，包含了学习路径建议、参考资料和练习项目，对于初学者来说是非常宝贵的指导。 为了更好地学习，你需要...
学好C从零基础开始
11-03
"学好C从零基础开始"这套资料显然是为了帮助初学者掌握C语言的基础知识而设计的。 在C语言的学习中，首先会接触到的是基础的语法结构，包括数据类型（如整型、浮点型、字符型等）、变量的声明与赋值、运算符的使用...
CSS的重绘和重排是什么？
最新发布
沐爸的博客
08-12 763
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
css实现水滴效果图
yinge0508的博客
08-12 438
【代码】css实现水滴效果图。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 743
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS（层叠样式表）
Chujun123528的博客
08-09 1195
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
HTML+CSS入门：打造首个网页，理解基础标签与结构
在"学好HTML+CSS基础"的教程中，本文主要介绍了Web前端开发的基础知识点，尤其是HTML和CSS这两个核心技术。HTML (HyperText Markup Language) 被誉为网页内容的语言，负责构建网页的结构和内容，包括文本、图像、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值