微信小程序学习3(wxss)

1.id与class选择器

选择器就是wxss大括号前面的部分,id选择器样式为( #id ),class选择器样式为( .class名 )

区别:class可以重复使用,即wxml中多个组件可以有相同的class名,id则不可重复使用

2.颜色设置

颜色有三种设置方式:

十六进制式,RGB式,颜色名称式

给出对照表:http;//tool.oschina.net/commons?type=3

3.css中文本常见样式

 1.text-align(对齐方式)

center  left  right

2.text-decoration(划线效果)

overline(上划线)  linethrough(中划线)    underline(下划线)

3.color(字体颜色)

4.font-size(字体大小)

4.边框属性

1.padding(内边距:内容到边框距离):如果只用一个值顺序为上右下左(顺时针)

2.margin属性(外边距):如果只用一个值顺序为上右下左(顺时针)

3.border属性

border-style:solid(实线)  dashed(虚线)  dotted(点线)

border-color

border-width

border-radius:当他被设置为宽高的一半时为圆形,也可设置为50%

可以直接使用border属性直接设置,只需要有这三个属性即可而且他们的顺序是可交换的

还可以border-方向(left,top,buttom,right)-属性(width,color,style,radius)

5.px与rpx

px为像素单位,在不同机型下屏幕的宽度不一致,会有适配问题出现,微信提供了一种单位rpx,规定屏幕的宽度为750rpx,使用rpx可以解决适配问题

6.image组件

 默认宽高为:320×240

使用src=' '属性来添加图片

缩放与裁剪方式(这部分看官方文档)

7.swiper组件

构成例如:

<swiper>

<swiper-item> 里面可以放一些例如image的组件

</swiper-item>

</swiper>

注意:在swiper中只能放swiper-item

属性:indicator-dots(是否显示面板指示点)   indicator-color(指示点颜色)  indicator-active-color(当前选中指示点颜色)等