微信小程序开发——设置属性及样式选择器

WeChat小程序交流（QQ群：769977169）

代码示例

1、属性设置

xxx.wxml

<view style='background-color:#DC143C;width:100%;height:30px;'>样式属性</view>

<view style='background-color:#D8BFD8;width:100%;height:30px;'>背景属性</view>
<view style='display:flex'>
  <view class='backgroundStyle'></view>
  <view style='width:200px;height:200px;background-image:url("../../images/icon/icon.png");backgound-repeat:no-repeat'></view> 
</view>

<view style='background-color:#D8BFD8;width:100%;height:30px;'>尺寸属性</view>
<view style='display:flex'> 
  <view class='sizeStyle'></view>
  <view class='sizeStyle2'></view>
 </view> 

<view style='background-color:#D8BFD8;width:100%;height:30px;'>边框属性</view>
<view style='display:flex'> 
  <view class='borderStyle'></view>
  <view class='borderStyle2'></view>
 </view> 

<view style='background-color:#D8BFD8;width:100%;height:30px;'>内边距属性</view>
<view style='display:flex;background-color:yellow;width:100%;height:200px;'> 
  <view class='paddingStyle'></view>
   <view class='paddingStyle2'></view> 
 </view> 

<view style='background-color:#D8BFD8;width:100%;height:30px;'>外边距属性</view>
<view style='display:flex;background-color:green;width:100%;height:200px;'> 
  <view class='marginStyle'></view>
   <view class='marginStyle2'></view> 
 </view>

<view style='background-color:#D8BFD8;width:100%;height:50px;'>外边距合并属性(元素1上距10 + 元素2上距5，合并后取10，而不是15</view>
<view style='display:flex;flex-direction:column;background-color:orange;width:100%;height:200px;'> 
  <view class='marginTotalStyle'></view>
   <view class='marginTotalStyle2'></view> 
 </view>

<view style='background-color:#D8BFD8;width:100%;height:50px;'>轮廓</view>
<view style='display:flex;background-color:yellow;width:100%;height:100px;'> 
  <view class='outlineStyle'></view>
 </view>


<view style='background-color:#D8BFD8;width:100%;height:30px;'>文本</view>
<view style='display:flex;background-color:green;width:100%;height:100px;'> 
  <view class='textStyle'>hello world 文本属性设置</view>
 </view>

<view style='background-color:#D8BFD8;width:100%;height:30px;'>字体</view>
<view style='display:flex;background-color:yellow;width:100%;height:100px;'> 
  <view class='fontStyle'>hello world 字体属性</view>
 </view>

xxx.wxss

.backgroundStyle{
  width: 50px;
  height: 50px;

  background-color: #0000FF;
}

.backgroundStyle2{
  width: 50px;
  height: 50px;

  /* wxss中设置背景图像无效 */
  /* background-image:url("../../images/icon/error.png"); */
}

.sizeStyle{
  width: 50px;
  height: 50px;

  background-color: #0000FF;
}

.sizeStyle2{
  /* width: 30%;
  height: 30%;  */

  min-height: 100px;
  width: 30px; 
  background-color: #6A5ACD;
}

.borderStyle{
  width: 80px;
  height: 80px;

  background-color: orange;

  border-radius: 10px;

  border: 5px solid green;
}

.borderStyle2{
  width: 80px;
  height: 80px;

  background-color: yellow;

  border-top: 5px groove blue;
  border-left: 3px dashed red;
  border-right: 2px double green;
  border-bottom: 3px dotted red;
}

.paddingStyle{
  width: 40px;
  height: 40px;

  background-color: blue;

  padding-top: 10px;
  padding-left: 10px;
}

.paddingStyle2{
  width: 80px;
  height: 80px;

  background-color: orange;
  
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 80px;
}

.marginStyle{
  width: 40px;
  height: 40px;

  background-color: blue;

  margin: 10px;
}

.marginStyle2{
  width: 400px;
  height: 200px; 

  background-color: rebeccapurple;

  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 10px;
  margin-left: 100px;
}

.marginTotalStyle{
  width: 40px;
  height: 40px;

  background-color: blue;

  margin-top: 10px;
  margin-bottom: 10px;
}

.marginTotalStyle2{
  width: 40px;
  height: 40px;

  background-color: red;

  margin-top: 5px;
}

.outlineStyle{
  width: 60px;
  height: 60px;

  background-color: blue;

  border: green dotted 3px;
  margin: 10px;

  outline: red solid 3px;
}

.textStyle{
  width: 80%;
  height: 60px;

  background-color: lightblue;
  margin: auto;

  color: red;
  direction: rtl;
  line-height: 60px;
  letter-spacing: 5rpx;
  text-align: center;
  text-decoration: line-through;
  text-shadow: gray;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 10rpx; 
}

.fontStyle{
  width: 80%;
  height: 60px;

  background-color: lightblue;
  margin: auto;

  font-size: 20px;
  font-stretch: wider;
  font-style: italic;
  font-weight: bolder; 
  font-size-adjust: 0.6;
  font-family: Arial, Helvetica, sans-serif;
}

2、属性选择器

xxx.wxml

<view class='classStyle'>类选择器 .name{…}</view>
<view id='idStyle'>ID选择器 #name{…}</view>
<view>元素选择器 name{…}</view>

<view class="parentStyle">
  <view class='allChildStyle'>包含选择器 parent child{…}</view>
  <view class='nextChildStyle'>子元素选择器 parent> child{…}</view>
</view>
<view class='allChildStyle'>包含选择器 parent child{…}</view> <!-- 无效 -->
<view class='nextChildStyle'>子元素选择器 parent child{…}</view> <!-- 无效 -->

xxx.wxss

/* 类选择器 */
.classStyle{
  width: 100%;
  height: 40px;

  background-color: lightblue;
}

/* id选择器 */
#idStyle{
  width: 200px;
  height: 40px;

  background-color: lightgreen;
}

/* 元素选择器 */
 view{
  width: 240px;
  height: 40px;

  background-color: olivedrab;
} 

/* 包含选择器 */
.parentStyle{
  height: 80px;

  background-color: orange;
}
.parentStyle .allChildStyle{
  width: 280px;
  height: 30px;
  background-color: purple;
}

.parentStyle> .nextChildStyle{
  width: 250px;
  height: 30px;
  background-color: goldenrod;
}