姓名：张兴才
学号：19011210349
转载自：https://tencentcloudbase.github.io/handbook/tcb02.html
【嵌牛导读】相信通过前面的学习，大家对一个完整的小程序的文件结构有了一个大致的了解，对小程序的开发者工具也有了一定的认识，那这节我们来开始动手写一下小程序的代码，同时介绍WXML与WXSS.
【嵌牛鼻子】WXML WXSS
【嵌牛提问】WXML WXSS文件分别是什么？
【嵌牛正文】
WXML与WXSS
相信通过前面的学习，大家对一个完整的小程序的文件结构有了一个大致的了解，对小程序的开发者工具也有了一定的认识，那这节我们来开始动手写一下小程序的代码。
编辑WXML文件
我们在开发者工具里打开之前修改的模板小程序home文件夹下的home.wxml，里面有如下代码
这个第1行，是一句注释，也就是一句说明，不会显示在小程序的前端，第2行就是一个
接下来我们会广泛使用到小程序的
大家可以结合上面的代码，来了解一下组件的基本写法
view组件是可以嵌套写的，
为了让视觉上更好看，写代码的时候要有缩进（虽然不缩进也不会有影响）
我们可以把这个页面写的更加复杂一点。
WXSS选择器
大家是不是已经发现我们写的小程序页面有点丑？那我们需要对这个小程序页面进行美化。但是我们的代码里面
id与class选择器
这个时候我们就要先了解一下选择器的概念。选择器是用来干什么的呢？从名字里我们就可以看出来，就是为了选择。比如学校有1000个人，我们要选择出其中一个人，那我们可以给所有人一个学号，这个学号是唯一的，我们可以称这个学号为id，用于精准的选择；还有的时候我们需要对一群人进行分类选择，比如整个班级或者所有男生，这个班级、性别，我们可以称为class，用于分类选择。
在wxss技术文档这里有关于选择器的描述。
技术文档：WXSS技术文档
给组件增加属性
比如上面的view组件实在太多了，为了区分它们，我们给他们加一些属性，这样我们就可以用选择器选择它们了。
以及比较复杂的那一段代码的view组件也加上属性。给组件添加属性在外观上并不会有什么效果哦~
那要学好技术，应该依循什么样的学习方法和教学方法呢？
大家在学习的过程中，要随时在开发者工具的模拟器上查看效果，也要经常用微信扫码预览所生成的二维码来查看效果，千万不要只看教程怎么说，而是自己要动手去实战。
CSS参考手册
给wxml文件的组件加了选择器之后，我们就可以在wxss文件里给指定的某个
技术文档：CSS参考手册
这里大家只需要了解CSS的字体属性、文本属性、背景属性、边框属性、盒模型
CSS涉及的知识点非常多，现在大家也只需要知道有这些概念即可，学技术千万不要在没有看到实际效果的情况下来死记概念。概念没有记住一点关系都没有，因为大家可以随时来查文档。接下来我们也会有实际的例子让大家看到效果，大家想深入学习的时候可以回头再看这些文档。
字体属性与文本属性
下面这些关于CSS的基础知识点，大家可以结合我们是如何调整Word、PPT的样式的来理解，比如我们是怎么调整文本的大小、颜色、粗细等等的，添加样式的时候要注意随手实战了解了效果再说。
比如class为title的
.title{
font-size: 20px;
font-weight: 600;
text-align: center;
}
通过 .title这个选择器，我们就选择到了类class为 title的组件，然后就可以精准地对它进行美化，对它的美化代码不会用在其他组件上了。
大家也要留意css的写法，这里font-size，font-weight，text-align外面称之为属性，冒号:后面的我们称之为值，属性:值这一整个我们叫做声明，每个声明我们用分号;隔开。大家不要记这些概念，知道是个什么东西就行了。
class为item-title的
.item-title{
font-size:18px;
font-weight:500;
color: #c60;
}
我们希望描述类的文字颜色浅一点，不要那么黑，我们可以换一个浅一点的颜色，我们在home.wxss下面继续加代码。
1
2
3
.desc,.item-desc{
color: #333;
}
大家注意，我们这里有两个选择器，一个是desc，一个是item-desc，当我们希望两个不同的选择器有相同的css代码时，可以简化一起写，然后用逗号,隔开。
除了标题（class为title和item-title的
#wxmlinfo,#studyweapp{
font-size:16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
line-height: 1.6;
}
为了大家方便查阅技术文档，我们把这些常用的css技术文档整理到以下表格，方便大家更深入的去学习。
字体属性
font-family规定文本的字体系列。
font-size规定文本的字体尺寸。
font-weight规定字体的粗细。
文本属性
color设置文本的颜色。
line-height设置行高。
text-align规定文本的水平对齐方式。
盒模型
大家有没有发现段落之间的距离、文字之间的距离，以及与边框之间的距离都比较拥挤？这个时候就需要用到盒子模型啦。盒子模型就像一个长方形的盒子，它有长度、高度、也有边框，以及内边距与外边距。我们通过实战来了解一下。
长度、高度、边框我们比较好理解，那这个内边距和外边距是什么意思呢？
内边距就是这个长方形的边框与长方形里面的内容之间的距离，有上边距，右边距、下边距、左边距这个四个内边距，分别为padding-top，padding-right，padding-bottom，padding-left。注意是上、右、下、左，这样一个顺时针。
那外边距就是这个长方形的边框与长方形外面的内容之间的距离，同样也有上边距margin-top，右边距margin-right，下边距margin-bottom，左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。
比如我们给id为wxmlinfo和studyweapp的
#wxmlinfo,#studyweapp{
padding-top:20px;
padding-right:15px;
padding-bottom:20px;
padding-left:15px;
}
padding的简写 上面这四个padding是可以做一定的简写的，关于padding的简写，大家可以去阅读以下技术文档，多用就会了，CSS padding属性 ，在这里有四个padding简写的案例，比如上面的这四条声明可以简写成padding:20px 15px。大家可以业余深入了解一下。
class为title的view组件是标题，我们希望它和下面的文字距离大一点，我们可以添加以下样式:
1
2
3
.title,.item-title{
margin-bottom:0.9em;
}
这里咋又冒出了一个em的单位，em是相对于当前字体尺寸而言的单位，如果当前你的字体大小为16px，那1em为16px；如果当前你的字体大小为18px，那1em为18px。
为了让class为item-title的
.item-title{
border-left: 3px solid #c60;
padding-left: 15px;
}
这样，小程序的一篇文章的样式看起来就算马马虎虎可以接受啦。
【嵌牛总结】：以上即是今天介绍的关于微信小程序开发的WXML与WXSS知识