位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 类选择器
阅读(22555525)      收藏       赞(5685)      分享
上一篇: ID选择器 下一篇: 样式的几种写法

类选择器允许以一种独立于文档小白教程网元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。

提示:只有适当地标记文档小白教程网后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

1.基础语法

CSS 中,类选择器以一个点号显示,代码示例

小白教程网www.2d5.net

如下:

.center {text-align: center}  /* 定义名称为center的样式,可供class类选择器调用 */

在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中,h1 p 元素都有 center 类。这意味着两者都将遵守 ".center" 类选择器中的规则,代码示例

小白教程网www.2d5.net

如下:

<h1>  <!—class类选择器:应用样式名为center的样式-->
     This heading will be center-aligned
</h1>
<p>  <!—class类选择器:应用样式名为center的样式-->
     This paragraph will also be center-aligned.
</p>

注意:类名的第一个字符不能使用数字!

2.小程序应用

下面举例说明在微信小程序中如何定义3行不同颜色的文本。

微信小程序中的view组件相当于div是块级元素,我们在写小程序里面的布局的时候;我们可以将view当做是div来操作;每个view自成一行;小程序中的text组件是行内元素,可以理解为类似span元素;如果将3个文本text放在同一个view里面,则都显示在同一行。定义在view组件里面的text文本颜色会继承view的颜色;如果view组件内的text重新定义了颜色样式,会覆盖view组件里面定义的颜色。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view><!—view是块级元素,显示为一行-->
    <text>普通文本</text><!—text是行内元素,多个text都是显示在一行-->
</view>
<view>
    <text >普通文本</text>
</view>
<view>
    <text  class='myclass03'>普通文本</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

/* 元素选择器 */
page{
  background-color:  gainsboro;
}
view{
 background-color:  aliceblue;
}
/* id选择器 */
.myclass01{
  color: red; /* 字体为红色 */
}
.myclass02{
  color:purple; /* 字体为紫色 */
}
.myclass03{
  color:blue;   /* 字体为蓝色 */
}

效果如图3-4所示

image.png

上一篇: ID选择器 下一篇: 样式的几种写法
毕业设计网             广告联系QQ:45157718(微信同号)