最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设计,为此我决定学习css

一:内联样式,css可以同过内联样式设置属性
如下:
<text syle= "color:red;fout-size:12px"></text>
设置text的颜色为红色,文字大小为12px
二:小程序好像不支持嵌入样式
&lt;style type = "css/text"&gt;
view {background:red;}
&lt;/style&gt;

<view>
这是一个view
</view>
运行没有效果
三:通配符选择标签
text{
color: palegreen;
}
四,支持ID选择器
#p1{
background-color: yellow;
font-size: 25px;
}
<view id = "p1">id选择器</view>

五:class选择器
.class_top{
color: red;
}
<view class = "class_top">类选择器</view>

&lt;!--后面加空格表示遵循两个类,下面表示遵循class_top,class_model两个类--&gt;
<view class = "class_top class_model">类选择器</view>}

六,后代选择器
.class_kecheng{
display: flex;
flex-direction: column;
}
.kecheng text{
color: palegreen;
}

<view class="class_kecheng kecheng">
<text>美术</text>
<text>音乐</text>
<text>舞蹈</text>
</view>

七,并集选择器

text,button{
color: palegreen;
}

<text>美术</text>
<text>音乐</text>
<text>舞蹈</text>
</view>

<text>心情好</text>
<button>并集选择器</button>

初学微信小程序的更多相关文章

  1. 初学微信小程序 TodoList

    微信小程序的学习 微信小程序的开始尝试 TodoList 微信开发者工具生成 目录如下: . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- ...

  2. 初学微信小程序——配置问题(1)

    一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com  点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...

  3. 初学微信小程序——配置问题(2)

    六.生命周期函数:   在微信公众平台指南中搜索生命周期,找到页面生命周期 比如,我打开cate.js并编写,代码如下: ** * 生命周期函数--监听页面加载 */ onLoad: function ...

  4. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  5. 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  6. 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...

  7. 《微信小程序七日谈》- 第一天:人生若只如初见

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  8. 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

  9. 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

随机推荐

  1. BZOJ 3236: [Ahoi2013]作业

    3236: [Ahoi2013]作业 Time Limit: 100 Sec  Memory Limit: 512 MBSubmit: 1393  Solved: 562[Submit][Status ...

  2. gulp watch出现Error: watch null EPERM的问题解释

    出现这样的问题,一般是第一次运行导致的,而且任务上有删除文件的操作. 我观察发现,只要把输出目录的文件删除,然后重新运行watch就一些ok,后者再运行一次gulp watch就一切正常.

  3. php cli配置文件问题

    引言 今天在教别人使用protobuf的时候,无意中发现了一个php cli模式下的诡异问题,费了老半天的找到解决方法了,这里拿出来分享下. 问题描述 我们这边最先引入了protobuf协议,使用的是 ...

  4. 求n!质因数分解之后素数a的个数

    n!质因数分解后P的个数=n/p+n/(p*p)+n/(p*p*p)+......直到n<p*p*p*...*p //主要代码,就这么点东西,数学真是厉害啊!幸亏我早早的就退了数学2333 do ...

  5. 基于 Arduino 的 RFID 识别实验

    http://www.it165.net/embed/html/201512/3287.html 2015年12月04日(周五) 上午  博士的智能卡实验--RFID识别实验,基于51单片机: 我们的 ...

  6. 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇

    原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...

  7. web在线打印,打印阅览,打印维护,打印设计

    winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕 ...

  8. Excel—身份证生日提取

    一.只有18位的身份证号码 如: 身份证号 330682199302264000 41120019890823729X 231081199002256839 131101198203154666 36 ...

  9. vijos1250 最勇敢的机器人

    背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述 机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n个物品,每个物品都有一个价 ...

  10. LYDSY模拟赛day1 Tourist Attractions

    /* 假设路径是 a − b − c − d,考虑枚举中间这条边 b − c,计 算有多少可行的 a 和 d. 设 degx 表示点 x 的度数,那么边 b − c 对答案的贡献为 (degb − 1 ...