小程序样式入门

作者: Phant | 来源:发表于2019-02-22 16:08 被阅读0次

小程序样式入门
【教程】微信小程序入门
微信小程序常用知识-基础篇
小程序入门日记(1)
小程序样式
小程序组件简明说明
微信小程序
小程序radio,checkbox,以及元素样式改变样式
【总结】2017.02.17
设计知识科普：美观的小程序样式怎么做

微信小程序中 view、text可以看作一个元素
页面隐藏属性page：整个页面

元素选择器

<view>
  <text>我是文本文字</text>
</view>

view标签是整个一行，这里的view标签类似于网页开发中的div,如果没有特别定义每个view标签就是一行
text是行列元素
同个view里面的多个text会一行显示
但如果text在不同的view里面，则会多行显示

ID选择器
id选择器可以为标有特定id的html元素指定特定的样式。
id选择器以“#”来定义

WeChat23a0190594129f03ad01985031605543.png

WeChat3541bf5b18192b7cd501fb5042816e6b.png

如果id放在文本处则只是文本的背景变化，如果id放在view处，则整行的背景都变化

<view>
  <text>普通文本</text>
</view>

<view>
  <text id='myid'>ID选择器里面的文本</text>
</view>

<view id='myid'>
  <view>我是view里面的文本</view>
  <text>ID选择器里面的文本</text>
</view>

!
WeChat93d62fdaa721b6ae414754c2ca2972c4.png

如果text的背景是另外定义的，而不是view中定义的那个样子的，那么就需要用到派生选择器。
派生选择器：
在现代布局中，id选择器常常用于建立派生选择器
相当于在id选择器或者元素选择器中，对某个元素进行单独的定义!
!
WeChat86d4c6097447d6e1ecc210d31752edfd.png