小程序CSS入门

小程序样式课程-第4课-类选择器语法

时间:2018/12/20 13:35:19  作者:互联网  来源:网络转载  查看:2806  评论:0
内容摘要:1.3 类选择器1.3.1 类选择器语法在 CSS 中,类选择器以一个点号显示:.center {text-align: center}在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意...

1.3 类选择器

1.3.1 类选择器语法

CSS 中,类选择器以一个点号显示:

.center {text-align: center}

在上面的例子中,所有拥有 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>

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

1.3.2 类选择器-小程序应用

Wxml代码

<view class='myclass01'>

    <text >普通文本</text>

</view>

<view class='myclass02'>

    <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;

}

效果如下图

  小程序样式课程-第4课-类选择器语法

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |