微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L

文字

width: fit-content;
font-size:20px;      /*设置文字字号*/
color:red;           /*设置文字颜色*/
font-weight:bold;    /*设置字体加粗*/
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/

font-family:"宋体";   /*设置字体为宋体*/

----------------------------------------------------------------------------------------

排版

font-style:italic;    /*文字排版--斜体*/
text-decoration:underline;   /*文字排版--下划线*/
text-decoration:line-through;/*文字排版--删除线*/
text-indent:2em;             /*段落排版--缩进*/
line-height:1.5em;           /*段落排版--行间距(行高)*/
letter-spacing:50px;         /*段落排版--中文字间距*/
word-spacing:50px;           /*字母间距*/

text-align:center;  right ; left ;  /*段落排版--对齐*/

----------------------------------------------------------------------------------------

元素

display:inline-flex; /*将对象作为内联块级弹性伸缩盒显示*/
display:block;        /*设置为块状元素*/
display:inline;        /*设置为内联元素*/

display:inline-block;     /*设置为内联块状元素*/

-----------------------------------------------------------------------------------------

换行与位置

word-break:keep-all;        /* 不换行 */ 
white-space:nowrap;         /* 不换行 */ 
vertical-align:middle;     /*把此元素放置在父元素的中部。*/

-----------------------------------------------------------------------------------------

边框

border-style(边框样式)常见样式有:  (border-color,border-width) 边框相关设置
dashed(虚线)| dotted(点线)| solid(实线)。
border-bottom border-top border-right border-left 上下左右线单独设置

-----------------------------------------------------------------------------------------

上下左右边距

box-sizing: border-box; //当使用padding的时候不影响大小
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left (margin:10px 10px 10px 10px; top、right、bottom、left)

原文地址:https://www.cnblogs.com/yocichen/p/10351700.html

时间: 2024-10-29 01:57:57

微信小程序 text属性设置 WXSS样式的相关文章

微信小程序尺寸单位rpx以及样式相关介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0 微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx =

微信小程序的网络设置,及网络请求:wx.request(OBJECT)

所有文章会优先在:微信公众号"颜家大少"中发布转载请标明出处? 微信小程序要实现网络请求,首先要对其进行设置,下面以"微信web开发者工具V1.01.170913"为例 一:对于服务器网站没有备案,或只需要做本地测试的用户 在"微信web开发者工具"的"设置"->"项目设置"->"项目设置"中选:不校验安全域名.TLS 版本以及 HTTPS 证书,如下图 二:对已有备案的网站

微信小程序:nginx 设置HTTPS

微信小程序需要HTTPS服务. 程序是NGINX做前段代理,现将NGINX设置HTTPS做个总结 微信小程序需要HTTPS服务,并且有相关要求: 开发通过https://www.qcloud.com/product/ssl#userDefined10 检测SSL,显示之前配置的https未能通过.主要是算法和域名没通过. 具体操作命令如下 1 先生成key,并设置密码 openssl genrsa -des3 -out server_new.key 2048 2 通过key 再生成csr ope

学习微信小程序之css4设置颜色,单位表示,字体样式

颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

微信小程序开发:设置消息推送

开发设置中,启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 不过照着说明去操作,即使按照最简单的明文方式去设置,还是提示Token验证失败.仔细研究说明,其实服务器验证过程很简单,用Get发来一个连接,然后在自己的页面中去检验,不想做也可以先不做,直接返回echostr即可.关键在,怎么返回,开始我还以为必须要按照xml或者json返回,试了半天,其实很简单,清空所有其他输出,直接返回echostr即可. Response.Clear()

微信小程序text标签

最近在做小程序,使用<text>标签的时候发现里面的文本text-family不生效, 经过试验,发现直接在text标签的class设置不生效,可以在外层包一个父元素就可以设置了. <view class="info"> <text class="text1">文本1</text> </view> .info{ width: 100%; height:640rpx; background: #fff; z-

微信小程序——button, swiper等默认样式更改

微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式,做一下汇总,不定期更新: 1.button的背景色,边框,圆角: button{ background-color: transparent; } button::after { border: 0; border-radius:0 } 2.swiper 的点的位置: .wx-swiper-dots

微信小程序导航键设置

<utils >文件夹下app.json插入代码 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "

微信小程序全局变量的设置、使用、修改

1. 全局变量的设置 在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false, openid: null }, onLaunch: function () { } }) 2.全局变量的使用 在app.js文件中,直接使用,如: this.globalData.hasLogin 在其他非app.js文件中使用,需要先申明app变量,如: var app = getApp() app