最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设计,为此我决定学习css
一:内联样式,css可以同过内联样式设置属性
如下:
<text syle= "color:red;fout-size:12px"></text>
设置text的颜色为红色,文字大小为12px
二:小程序好像不支持嵌入样式
<style type = "css/text">
view {background:red;}
</style>
<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>
<!--后面加空格表示遵循两个类,下面表示遵循class_top,class_model两个类-->
<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>
八