小程序wxss设置样式
小程序wxss设置样式
对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
一、视图容器(View Container)：二、基础内容(Basic Content)
组件名说明组件名
view视图容器icon
scroll-view可滚动视图容器text
swiper可滑动的视图容器progress
三、表单组件(Form)四、操作反馈组件(Interaction)
组件名说明组件名
button按钮action-sheet
form表单modal
input输入框progress
checkbox多项选择器toast
radio单项选择器五、导航(Navigation)
picker列表选择器组件名
slider滑动选择器navigator
switch开关选择器
label标签
六、多媒体(Media)七、地图(Map)
组件名说明组件名
audio音频map
image图片
video视频
八、画布(Canvas)
组件名说明
canvas画布
关于这八大类的属性和具体用法可参考以下参考文献链接：
一年车险大概多少钱
www.w3cschool/weixinapp/itz51q8o.html
mp.weixin.qq/debug/wxadoc/dev/component/
二、wxss
wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：
1.尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6s1rpx = 0.552px1px = 1.81rpx
2.样式导入
可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结
束。
例如：
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对
全局样式中的相同属性会覆盖。
对于小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：
签劳动合同注意事项
wxss样式属性
一、wxss display(显示)
属性说明
flex多栏多列布局flex-direction:row/c inline-block行内块元素
inline此元素会被显示为内联元素，元素前后没有换行符
inline-table作为内联表格来显示（类似 <table>），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示
none此元素不会被显示
block此元素将显示为块级元素，此元素前后会带有换行符
list-item此元素会作为列表显示
table会作为块级表格来显示（类似 <table>），表格前后带有换行符table-caption作为一个表格标题显示（类似 <caption>）
table-cell作为一个表格单元格显示（类似 <td> 和 <th>）
table-column作为一个单元格列显示（类似 <col>）
table-column-group作为一个或多个列的分组来显示（类似 <colgroup>）
table-row作为一个表格行显示（类似 <tr>）
table-row-group作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group作为一个或多个行的分组来显示（类似 <tfoot>）
inherit从父元素继承 display 属性的值
flex：多栏多列布局 www.360doc/content/14/0811/01/2633_400926000.shtml
二、wxss position(定位)
属性说明
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "lef 进行规定。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, ri inherit规定应该从父元素继承 position 属性的值
三、wxss float(浮动)
属性说明
left元素向左浮动
right元素向右浮动
none默认值元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。
四、wxss background(背景)
属性说明语法(属性值)
background简写属性，作用是将背景属性设置在一个声明中background: colo attachment image
background-color指定要使用的背景颜
background-position指定背景图像的位置background-posit background-size 指定背景图片的大小background-size: background-repeat指定如何重复背景图像repeat,repeat-x,r
background-origin指定背景图像的定位区域padding-box 背景图border-box 背景图content-box 背景图
background-clip指定背景图像的绘画区域属性值，同上
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚
动。
scroll 背景图片随页
fixed 背景图像是固
inherit 指定backgr
local 背景图片随滚动
小学生守则十条background-image指定要使用的一个或多个背景图像url('URL') 图像的U none 无图像背景会inherit 指定背景图像
五、wxss border(边框)
属性说明语法(属性值) border简写属性，用于把针对四个边的属性设置在一个声明border:5px soli
border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设
置宽度border-top-wid thick length
border-style 设置元素所有边框的样式，或者单独地为各边设置边框样
式。
border-top-wid
折纸花 康乃馨
solid,dashed,do
border-color 元素的所有边框中可见部分的颜，或为 4 个边分别设置
颜
border-top-wid
六、wxss 轮廓（outline）
属性说明语法(属性值)
outline在一个声明中设置所有的外边框属性outline: outline-color outline-color设置外边框的颜
outline-style设置外边框的样式。属性值：solid,dashed, outline-width设置外边框的宽度属性值：thin medium
冒险岛什么职业最厉害
七、wxss 文本属性（text）
属性说明语法(属性值)
color设置文本颜
direction设置文本方向。ltr：文本方向从左到右;r letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本left：把文本排列到左边right：把文本排列到右center：把文本排列到中justify：实现两端对齐文inherit: 规定应该从父元
text-decoration向文本添加修饰underline 定义文本下的overline 定义文本上的line-through 定义穿过blink 定义闪烁的文本。
text-indent缩进元素中文本的首行
text-shadow设置文本阴影text-shadow: h-shad h-shadow：水平阴影的位v-shadow：垂直阴影的位blur：模糊的距离; color：阴影的颜
text-transform控制元素中的字母capitalize 文本中的每个uppercase 定义仅有大lowercase 定义无大写字
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距
八、wxss 字体属性（font）
属性说明语法(属性值)
font在一个声明中设置所有字体属性font:font-style font-variant f
family(按顺序)
font-style指定文本的字体样式normal 默认值。浏览器显示一个italic 浏览器会显示一个斜体的字oblique 浏览器会显示一个倾斜的inherit 规定应该从父元素继承字
font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一small-caps 浏览器会显示小型大inherit 规定应该从父元素继承 f
font-weight指定字体的粗细normal 默认值。定义标准的字符bold 定义粗体字符。
bolder 定义更粗的字符。lighter 定义更细的字符。inherit 规定应该从父元素继承字
font-size指定文本的字体大小smaller 把 font-size 设置为比父larger 把 font-size 设置为比父length 把 font-size 设置为一个% 把 font-size 设置为基于父元
font-family指定文本的字体系列
九、wxss margin(外边距)（margin）
属性说明语法(属性值)
margin在一个声明中设置所有外边距属性。margin:10px 5px 15px 20px margin-top设置元素的上外边距。
margin-right设置元素的右外边距。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距
十、wxss padding(填充)（padding）
属性说明语法(属性值)
padding 使用缩写属性设置在一个声明中的所有填充属
性
padding:10px 5px 15px 20p
padding-top设置元素的顶部填充。
padding-right设置元素的右部填充
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
十一、wxss 选择器
教师节老师寄语选择器样例样例描述
.class(类选择器).intro选择所有拥有class="intro"的组#id(id选择器)#firstname选择拥有id="firstname"的组件element view选择所有view组件
element, element view checkbox选择所有文档的view组件和所有::after view::after在view组件后边插入内容
::before view::before在view组件前边插入内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。