最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个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. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  2. Google开源库-Volley的使用

    一.什么是Volley? Volley is an HTTP library that makes networking for Android apps easier and most import ...

  3. Javascript实现前端简单路由

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  4. 30个要点帮你完成java代码优化

    通过java代码规范来优化程序,优化内存使用情况,防止内存泄露 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容 ...

  5. SDL 截图、录像、录像播放

    截图 使用sdl很简单,视频显示窗口大小,不是视频分辨率大小 int i = Sdl.SDL_SaveBMP(surfacePtr, path); if(i != 0) { MessageBox.Sh ...

  6. SDK 支付

    充值:用什么买什么 MSDK: Q点:百科 http://baike.baidu.com/link?url=Dw8ySUIvv6AAprULG_wnI7Mst61gG4bO2qzfpfi1j9xx6c ...

  7. Linux中挂载window7的共享文件

    window7主机: 设置要共享的文件夹 Linux Fedora: 0 su su root 1 samba-client yum install samba-client 2 cifs-utils ...

  8. esnext:最后一个参数后面也允许加逗号了

    https://jeffmo.github.io/es-trailing-function-commas 目前是一个 stage 3 的提案,Chakra 和 JSC 已经实现了,它允许我们在函数定义 ...

  9. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

  10. 搭建XMPP学习环境

    XMPP(Extensible Messaging and Presence Protocol,前称Jabber)是一种以XML为基础的开放式IM协议.xmpp被人熟知,google talk肯定有一 ...