微信小程序云开发教程-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语言。
想看视频版？
关注公号“微程序学堂”，我们的视频教程即将上线
如果你自己写了好文章想投稿
请联系我们
微信小程序云开发教程-WXSS入门-常用样式相关推荐
- 前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定
同学们大家好,我是小伊同学,今天带领大家学习WXML部分一个重要的知识点,数据绑定. 简单来讲,数据绑定就是通过双重花括号将一个变量绑定到界面上. 首先,我们为什么要将变量绑定到页面上呢?因为在制作一 ...
- ❤️微信小程序 云开发 教程合集（视频+图文）免费❤️
一.视频版 微信小程序云开发视频教程上线啦 二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
- 微信小程序云开发教程-微信小程序框架的介绍
同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...
- 微信小程序云函数传递数组_微信小程序云开发一周入门
作为一个程序员,一直想自己做一款程序,无奈工作以来一直做的是数据处理的工作.数据库用的挺溜,但前端就两眼一抹黑了.早在微信小程序刚出来的时候,就关注过,但考虑到前端后端的种种因素,一直没太做深入的了解 ...
- uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
- 微信小程序云开发教程-小程序端调用云函数
同学们大家好,我是小伊同学,前面我们已经做好了小程序的页面,在开发好了后端的接口之后,我们就需要对前后端进行联通,而在云开发下,这部分内容就是我们今天将要一起学习的--小程序端如何调用云函数. 在微信 ...
- 页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
- 微信小程序云开发教程-手把手：获取微信订阅消息的模板ID
本小节,我们将手把手带领大家一起实现第一个接口,获取微信订阅消息的模板ID 通过开发这个接口,我们将学会云函数的基本结构和函数返回值的格式定义. 开发接口前,我们必须先写接口文档.小程序后端的接口文档 ...
- 微信小程序注册开发教程（入门）
转眼到了17年,火了那么久的小程序的小程序终于在1月9号开放了,本着凑热闹的心态,打算感受一把.下面是一些大体的流程什么的,简单记录一下,可能不是很全了,想起来再添吧. 1.打开微信公众平台 ,选择立 ...
- 微信小程序云开发教程-互联网软件产品开发流程和团队分工
假设我们现在要开发的软件产品是"近义词查询"小程序. 首先我们得通过调研,明确用户需求,形成需求文档: 产品经理根据需求文档,进一步制作出产品原型,产品原型也可以称之为产品demo ...
最新文章
- python中的match和search的区别
- linux驱动：设备-总线-驱动（以TI+DM8127中GPIO为例）
- mysql同时购买两种商品_SQL题1——查询所有购入商品为两种或两种以上的购物人记录...
- Linux环境下如何编译和执行c程序
- Get Started with Apex Unit Tests
- | 一文读懂迁移学习（附学习工具包）
- CF536C-Tavas and Pashmaks【凸壳】
- [詹兴致矩阵论习题参考解答]习题1.13
- php session实现原理
- kafka中zookeeper的作用
- linux中c 网络编程,Linux下C网络编程(socket)
- WordPress 最新RiPro9.0修正升级版+WP两款美化包+稀有插件
- 【概率论】复习资料（手写复习）
- 二级路由dhcp关闭连不上wifi_如何做到让家里WiFi真正全覆盖的几个布线方案
- Tensorflow的ckpt转为npy格式的代码
- 想要做网页游戏怎么办 ？PixiJs 篇（四）
- 计算机网络技术组装与维护,计算机组装与维护计算机网络技术2010(组网)课程标准.doc...
- 5G技术在广播电视中的应用方式
- 《阿里云服务器搭建》------ 安装jdk
- Unity3D新手入门初中高级教程