当前阅读教程:微信小程序设计教程 > 类选择器 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: ID选择器 | 下一篇: 样式的几种写法 |
类选择器允许以一种独立于文档 元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。 提示:只有适当地标记文档 后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。 要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 1.基础语法在 CSS 中,类选择器以一个点号显示,代码示例 如下: .center {text-align: center} /* 定义名称为center的样式,可供class类选择器调用 */ 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 类选择器中的规则,代码示例 如下: <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文件代码示例 如下: <view><!—view是块级元素,显示为一行--> <text>普通文本</text><!—text是行内元素,多个text都是显示在一行--> </view> <view> <text >普通文本</text> </view> <view> <text class='myclass03'>普通文本</text> </view> .wxss文件代码示例 如下: /* 元素选择器 */ page{ background-color: gainsboro; } view{ background-color: aliceblue; } /* id选择器 */ .myclass01{ color: red; /* 字体为红色 */ } .myclass02{ color:purple; /* 字体为紫色 */ } .myclass03{ color:blue; /* 字体为蓝色 */ } 效果如图3-4所示。 |
|
上一篇: ID选择器 | 下一篇: 样式的几种写法 |