评论

微信小程序云开发教程-WXSS入门-常用样式

微信小程序云开发教程

 同学们大家好,我是小伊同学,今天我们一起来学习一些常用样式,让我们的组件更加美观漂亮。


  在前面几节我们说了很多语法规则,大家已经对wxss有了一个基本的认识。用好wxss能够让我们的页面变得美观漂亮。那么大家一定很好奇,都能对组件设置哪些样式呢?下面我们就来介绍一下常用的样式属性。



  首先是设置组件的宽度,其属性名称是width,属性值的单位我们也已经讲过了。其次就是高度,他的属性名称是height。然后是颜色,其属性名称是color,这里的颜色表示的是组件内字体的颜色,如果想要设置背景颜色,那么就需要使用backgroundcolor。颜色的属性值可以使用颜色的英文,前提是编译器能够识别出这种颜色,常见的orange、red等都可以直接写在上面。当然,这只有固定的几种颜色,我们还可以使用十六进制的颜色值对颜色属性进行设置,大家可以百度搜索css在线取色器工具进行获取。最后是字体大小,其属性名称是font-size,同样也能够使用rpx的尺寸单位。


  此外还有很多属性,比如边框、投影等,这些属性和css是一样的,大家可以通过菜鸟教程,也就是右边的第一个链接学习更多内容。


  对于前端页面,有一个非常重要的概念:盒子模型。所有HTML元素都可以当做是一个盒子,可以分为4部分:实际内容,内边距,边框,外边距。



  实际内容Content,是指盒子装的内容,也就是我们可以看到的文本或者图像,比如说,这里的内容可以是一段话“天气好美”。

  内边距Padding,是指距离内容周围的区域,也就是指内容距离边框的距离。比如说,我们这里可以设置内容必须距离上边框10px。


  边框Border,是指围绕在内边距内容外的边框,可以设定宽度、材质、颜色。比如说,我们可以这个边框宽5px,实线,红色。


  外边距Margin,是指边框外的区域,也就是指其它元素必须距离该边框的距离,比如说,我们可以设置,其它元素必须距离该元素的上边框10px。


  好了,对于wxss的基本内容同学们已经了解的差不多了,最后,让我们从全局的角度看一下如何使用wxss。ppt上展示了三张截图,分别是wxml文件、wxss文件和页面的运行效果。



  在wxss中对代码进行注释只需要在代码或代码段的开头加上右斜杠星号,在结尾加上星号右斜杠,中间部分就会被注释掉了。对于自动生成的空白页面包括wxml、wxss和js文件,会自动在第一行以注释的方式生成页面路径页面名称


  这三张图展示了一个基本的wxml和wxss配合搭建简单页面的结果。可以看到,我们在wxml中对不同组件加了样式,将对应的样式内容写在了wxss中,最终展示出的效果和我们对组件设置的样式属性是一致的。


  在本节的最后,顺便说一下代码风格,在wxml和wxss中代码规范并不限制空行怎么处理,但是我们更推荐大家使用如图所示的代码风格,包括缩进等格式,在wxss中每一个声明写一行两个声明块之间空一行,这种是我们比较推荐的一种编码风格,看起来也简洁美观。如果觉得手动去调整代码缩进并不方便,我们可以在编译器中使用Alt+shift+F三个按键同时按自动格式化代码。


  好了,本节的内容就到这里,到此,我们已经完成了小程序视图层知识的学习,下一节我们将学习小程序的最后一种语言js语言。


点赞 0
收藏
评论

1 个评论

登录 后发表内容