上一篇我们主要讲了如何写一个简单的小程序。说了写小程序，就不得不提一下里面的CSS样式内容怎么写了。让我们来看看。1.整体风格小程序允许在顶层放置一个app.fxss文件，它使用CSS语法来设置页面风格。该文件中的设置对所有页面都有效。注意，虽然小程序使用了CSS样式，但是样式文件的后缀一定要写成.fxss。打开上一教程示例根目录下的app.ftss文件，内容如下。由于FinClip小程序与微信小程序保持了高度统一，降低了开发者的学习或迁移门槛，其实你也可以在FIDE中直接基于微信小程序编辑项目内容，或者基于微信小程序编辑项目内容微信小程序内容验证通过后，同步上传到FinClip。.container{高度：100%；显示：弹性；弹性方向：列；对齐项目：居中；证明内容：空格之间；填充：200rpx0；box-sizing:border-box;}FIDEInitializeapplet页面已经在最外层标签中添加了容器类。这时在容器类名下添加一个颜色样式：color:#ff0000；保存后重新渲染页面，文字变红：内容变红。这是整体的样式，设置后会在所有页面生效。比如第二页的elementview也有class:container，那么它的文字颜色也是红色。page1中的文本也变为红色。2.页面样式小程序各个页面路径下的ftss文件中的样式内容只会影响当前页面。当我们在index页面的view元素中添加一个class："unique-class"，并在页面ftss文件中更改font-size样式：indexpage.unique-class{font-size:66px;}那么很明显index页面的view元素内容的字体大小会变成66px。此时page1页面也添加了class:"unique-class"，样式不受影响。三、内联样式小程序也是Elementscanbestyledinline，可以使用插值变量。同样，内联样式优先于类样式，与正常的css规则一致。我们使用内联样式后，最优先使用差异变量：将元素样式属性color的值改为自定义变量fontColorindexPage在pagedata中添加fontColor变量，赋给需要的颜色Page({data:{motto:'HelloWorld',fontColor:'#10aeff??'}})这样就可以控制了通过js实现元素的内联样式，类似的，插值变量的方法也可以应用到类中，达到类似的效果。4.大小单位rpx可以作为小程序中的大小单位。rpx（responsivepixel）可以根据屏幕宽度自适应。指定屏幕宽度为750rpx。例如iPhone6，屏幕宽度为375px，一共有750个物理像素，则750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。合理使用rpx会让小程序的体验更好。5.样式导入使用@import语句导入外部样式表。@import后面是要导入的外部样式表的相对路径，;用于指示语句的结束。/**common.wxss**/.small-p{padding:5px;}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}6.组件构建-in样式小程序提供的内置组件定义了自己的逻辑和默认样式，供开发者快速使用。当然，开发者也可以在此基础上修改其他的样式和行为。例如：小程序原生的组件可以让开发者快速使用图片轮播功能。在上面页面的图片上，有三个提醒点，表示一共有三张图片，可以切换显示。它的代码很简单，只需要改一下index.fxml文件，在/assets/images/目录下添加你要旋转的图片即可。<图片src="/assets/images/logo.png">在上面的代码中，component是轮播组件，包含三个组件，表示有3个轮播item，每个item是一个组件。组件的indicator-dots属性设置是否显示轮播圆点，autoplay属性设置是否自动播放轮播。它们的属性值都是布尔值，这里应该写成{{true}}。在下一篇文章中，我们将讲述如何使用JSS、服务器调用等相关内容，敬请期待。
