微信小程序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 | 画布 |
二、wxss
wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:
1.尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6s | 1rpx = 0.552px | 1px = 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/column |
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:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml |
二、wxss position(定位) | ||
属性 | 说明 | |
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
|
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明) | |
inherit | 规定应该从父元素继承 position 属性的值 |
三、wxss float(浮动) | ||
属性 | 说明 | |
left | 元素向左浮动 | |
right | 元素向右浮动 | |
none默认值 | 元素不浮动,并会显示在其在文本中出现的位置。 | |
inherit | 规定应该从父元素继承 float 属性的值。 |
四、wxss background(背景) | ||
属性 | 说明 | 语法(属性值) |
background | 简写属性,作用是将背景属性设置在一个声明中 | background: color position size repeat origin clip attachment image; |
background-color | 指定要使用的背景颜色 | |
background-position | 指定背景图像的位置 | background-position:center |
background-size | 指定背景图片的大小 | background-size:80px 60px;宽度 高度 |
background-repeat | 指定如何重复背景图像 | repeat,repeat-x,repeat-y,no-repeat,inherit |
background-origin | 指定背景图像的定位区域 | padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框 |
background-clip | 指定背景图像的绘画区域 | 属性值,同上 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | scroll 背景图片随页面的其余部分滚动。这是默认 fixed 背景图像是固定的 inherit 指定background-attachment的设置应该从父元素继承 local 背景图片随滚动元素滚动 |
background-image | 指定要使用的一个或多个背景图像 | url('URL') 图像的URL none 无图像背景会显示。这是默认 inherit 指定背景图像应该从父元素继承 |
五、wxss border(边框) | ||
属性 | 说明 | 语法(属性值) |
border | 简写属性,用于把针对四个边的属性设置在一个声明 | border:5px solid red; |
border-width | 用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 | border-top-width 上右下左边框厚度 属性值:thin medium thick length |
border-style | 设置元素所有边框的样式,或者单独地为各边设置边框样式。 | border-top-width 上右下左边框样式 属性值:solid,dashed,dotted,double等 |
border-color | 元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色 | border-top-width 上右下左边框颜色 |
六、wxss 轮廓(outline) | ||
属性 | 说明 | 语法(属性值) |
outline | 在一个声明中设置所有的外边框属性 | outline: outline-color, outline-style, outline-width |
outline-color | 设置外边框的颜色 | |
outline-style | 设置外边框的样式。 | 属性值:solid,dashed,dotted,double等 |
outline-width | 设置外边框的宽度 | 属性值:thin medium thick length |
七、wxss 文本属性(text) | ||
属性 | 说明 | 语法(属性值) |
color | 设置文本颜色 | |
direction | 设置文本方向。 | ltr:文本方向从左到右;rtl:文本方向从右到左 |
letter-spacing | 设置字符间距 | |
line-height | 设置行高 | |
text-align | 对齐元素中的文本 | left:把文本排列到左边。默认值,由浏览器决定。 right:把文本排列到右边。 center:把文本排列到中间。 justify:实现两端对齐文本效果。 inherit: 规定应该从父元素继承 text-align 属性的值。 |
text-decoration | 向文本添加修饰 | underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 |
text-indent | 缩进元素中文本的首行 | |
text-shadow | 设置文本阴影 | text-shadow: h-shadow v-shadow blur color; 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 font-weight font-size/line-height font-family(按顺序) |
font-style | 指定文本的字体样式 | normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。 |
font-variant | 以小型大写字体或者正常字体显示文本 | normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。 |
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 20px;(上填充,右填充,下填充,左填充) |
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组件和所有的checkbox组件 |
::after | view::after | 在view组件后边插入内容 |
::before | view::before | 在view组件前边插入内容 |
参考自:https://www.cnblogs.com/yang-shuai/p/6899430.html
微信小程序wxss设置样式的更多相关文章
- 微信小程序----wxss设置样式
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序tabbar设置样式在哪里改
微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序切换标签改变样式
微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...
- 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...
- less文件编译成微信小程序wxss文件
2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...
- 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...
- 微信小程序のwxss
一.wxss简介 wxss是微信小程序的样式文件,同h5框架的css类似,它具有以下特性: 二.外联样式导入 我们可以通过@import引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样 ...
- 微信小程序placeholder设置自定义颜色
原地址链接:https://blog.csdn.net/august_leo/article/details/80877382 这是微信小程序input组件的官方文档描述,下图红框里的placehol ...
随机推荐
- 来自lombok的注解(解决idea中的找不到get,set方法,找不到log的问题)
今天看代码,发现idea报错,仔细一看调用的get,set方法bean中都没有,但是运行起来却没有问题,这个让我很疑惑.后来发现在类上有一个以前没见过的注解@Data,大概就是因为有他的原因.这个注解 ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
- LeetCode OJ:Evaluate Reverse Polish Notation(逆波兰表示法的计算器)
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- UI-不常用控件 UIActivityIndicatorView、UIProgressView、UISegmentedControl、UIStepper、UISwitch、UITextView、UIAlertController
1 //UIActivityIndicatorView //小菊花,加载================================================================ ...
- DRF 的视图,路由和渲染器
DRF 的视图,路由和渲染器 1 视图 简单的增删改查 : ModelViewSet; 复杂的操作使用APIView 和 GenericViewSet APIView(View) class Home ...
- 限流之令牌桶算法——RateLimiter官方文档
原文链接 作者:Dimitris Andreou 译者:魏嘉鹏 校对:方腾飞 RateLimiter 从概念上来讲,速率限制器会在可配置的速率下分配许可证.如果必要的话,每个acquire() 会阻 ...
- 拦截器springmvc防止表单重复提交【1】
[参考博客:http://www.cnblogs.com/hdwpdx/archive/2016/03/29/5333943.html] springmvc 用拦截器+token防止重复提交 首先,防 ...
- Luogu 2530 化工厂装箱员
Written with StackEdit. Description \(118\)号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有\(3\ ...
- Struts2常用标签总结
Struts2常用标签总结 一 介绍 1.Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...
- 【4】JDK和CGLIB生成动态代理类的区别
当一个对象(客户端)不能或者不想直接引用另一个对象(目标对象),这时可以应用代理模式在这两者之间构建一个桥梁--代理对象. 按照代理对象的创建时期不同,可以分为两种: 静态代理:事先写好代理对象类,在 ...