玩转低代码-CSS介绍

Posted 低代码布道师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了玩转低代码-CSS介绍相关的知识,希望对你有一定的参考价值。


低代码是一种使用拖拽可视化开发的工具,使用低代码可以提高软件的开发效率和开发质量。作为小白要想熟练的使用低代码工具一些基础的知识如html、css、javascript是必不可少的。如果直接去学习基础知识学习周期长,而且学完不一定能将所有知识应用到开发中来。为了降低小白学习低码的难度缩短学习周期,特此制作了本系列的基础教程。

教程准备分成几个部分,上篇准备结合组件介绍CSS的语法知识,下篇结合低代码介绍javascipt的基础知识。学习完这两篇后就具备了一定的前端开发能力,基本上可以搭建常见的各类页面。

什么是CSS

css叫层叠样式表,主要是控制页面的显示效果,如字体大小、颜色、布局等。在传统开发中我们会将样式单独写到一个后缀为.css的文件中,页面通过引入样式文件来达到页面的渲染效果。

不同于传统开发,低码中我们的样式是定义在style的目录中,只要定义好即可在页面上进行引用

低代码中分为全局样式和局部样式,全局样式一般定义文字的整体大小比如字号,字体,局部样式会根据页面的显示效果不同做具体的定义。

CSS语法

css的语法一般包括一个名字和里边具体的内容,具体语法如下:

h1 {
	color:red;
	font-size:16px
}

我们在这里定义了一个h1标题的样式,有两个属性,分别是颜色和字体大小。那在低码里是如何设置的呢?

低码中的样式一般是和组件相关的,我们在组件库里选择不同的组件,然后具体的给组件设定样式。


低码中支持两种模式进行样式的设置,一种是直接通过可视化的方式进行设置,另外一种也支持代码编制

切换到代码模式后,我们就可以按照CSS的语法进行代码的编制

怎么查找CSS支持的模块

CSS里有很多模块,如字体、布局等,内容非常多,而且也在不断的更新,那日常我们要怎么掌握呢?我的建议是用好MDN。MDN是个宝库,里边介绍的非常清楚。比如我想学习一下CSS是如何设置字体的,我可以在百度里搜索MDN 字体


里边就是一篇长长的文章介绍字体的,需要仔细阅读。有很多初学的小伙伴看到这么长的教程就有点犯愁,能学会吗?没办法,计算机作为一门学科本身就很复杂,想要简简单单学会是不可能的。

先学习教程,学完就需要进行练习,只有循环往复才能真正掌握开发这门技巧。

实战讲解

好了,讲了这么多,光看是掌握不了的。我们以一个实际的例子来练习一下。首先你需要有一个微信号,这个号呢最好是绑定了卡的微信号,因为微搭是预付费模式,你要学习起码需要先付费开通了账号。

有的小伙伴会问,为啥不是免费的呢?因为咱们这个是商业版的软件,你发布之后就真正在互联网上使用了,常见的开发工具开发出来的产物还在你自己的电脑上,只能自娱自乐。所以要不要付费就看你学习的目的了。

账号开通之后我们打开低码控制台,在应用管理里新建一个应用,就是学习使用

点击新建应用后会弹出应用的选择,如果我们已经具备了开发能力可以选择新建普通应用,如果想让平台给你创建一些基础的组件,那么可以选择模型应用。

选择好了之后点击下一步就可以,输入我们的应用名称和应用标识,名称起汉语就行,标识起英文

点击确定应用就创建好了,创建好了之后我们可以看到应用列表里多了一个应用

点击编辑应用按钮就可以打开低码的编辑器

编辑器分为几个部分,包括导航栏,左侧的组件页面区,中间的编辑区,右边的属性配置区

有过产品设计经验的同学应该对这种页面布局比较熟悉,我们常见的原型工具axure和这个差不多。没有做过产品设计的也没有问题,我会一步步教会你使用这个工具。

应用创建好后默认会创建一个首页,我们就在首页上练习一下我们学到的知识。

小实验

  • 往中间的编辑区拖入一个标题组件
  • 设置标题的颜色为红色
  • 改变标题的字体大小

如果是按照传统的开发思路,我们一般需要创建一个html格式的文件,在里边写具体的代码如

<html>
<body>
<h1>我是标题</h1>
</body>
</html>

html语言的语法就是这种一对标签,然后里边放置具体的内容。低码开发不一样,像这种重复性的动作不用干了,直接往页面拖自己想要的组件就可以了。具体方法是在左侧的组件库里挑选合适的,我们这里选择了标题组件

有些组件在数据页签中只能设置属性,标题组件直接在数据页签中就可以设置样式,我们可以让标题左对齐,颜色改为红色,级别的话我们保持默认,不同的级别字体的大小不一样

是不是非常简单,我们进行了简单的几步操作就完成了一个组件的配置。赶紧练起来吧。

以上是关于玩转低代码-CSS介绍的主要内容,如果未能解决你的问题,请参考以下文章

玩转低代码开发-javascirpt基础语法

玩转低代码开发-条件语句

玩转低代码开发-函数介绍

玩转低代码开发-循环语句

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画