wxss文件关键字汇总（持续更新）

最新推荐文章于 2024-01-29 11:49:29 发布

原创最新推荐文章于 2024-01-29 11:49:29 发布 · 715 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文汇总了wxss文件中用于文本和字体样式设置的关键属性，对比了与css的区别，通过class和style来实现样式控制。同时，还涵盖了图像和声音的配置示例。

文本和文字样式设置

设置文本或字体的属性需要使用到wxss，与css有所不同。我们利用class和style来进行设置。


text-decoration: overline;
/*下划线underline */

text-decoration-color: chartreuse;
/*下划线颜色*/

line-height: 30px;
/*行间距*/

white-space: normal;
/*空白符的设置*/

text-align: center;
/*对齐方式 justify 两端对齐*/

color: chartreuse;
/* 也可以直接写以#开头的十六进制 */

letter-spacing:10px;
/* 汉字字符间距 英文字符间距换成word*/

text-indent:50px;
/* 首行缩进 */

text-transform: uppercase;
/* 英文字母全部转为大写 */

white-space: nowrap;
/* 空白符，保留原有,表示文本中的空白处 */

font-style: italic;
/* 字体倾斜 */

font-weight: bold;
/* 字体加粗er更粗 */

图像和声音设置示例

<!--index.wxml-->
<view class='box'>
  <view class='title'>图片和声音</view>
  <view style='text-align:center;'>
    <image src='{{imgSrc}}' bindtap='tapCat'></image>
  </view>
</view>

//index.js
Page({
  data: {
    imgSrc: '/images/kitty.png' //图片源文件
  },
  tapCat: function() {
    let audio = wx.createInnerAudioContext() //创建音频上下文
    audio.src = '/audios/meow.mp3' //声音源文件，需要放在根目录下
    audio.play() //播放音频
  }
})