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

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

代码示例

1、属性设置

xxx.wxml

样式属性

背景属性

  
   


尺寸属性
 
  
  
  

边框属性
 
  
  
  

内边距属性
 
  
    
  

外边距属性
 
  
    
 

外边距合并属性(元素1上距10 + 元素2上距5，合并后取10，而不是15
 
  
    
 

轮廓
 
  
 


文本
 
  hello world 文本属性设置
 

字体
 
  hello world 字体属性
 

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

类选择器 .name{…}
ID选择器 #name{…}
元素选择器 name{…}


  包含选择器 parent child{…}
  子元素选择器 parent> child{…}

包含选择器 parent child{…} 
子元素选择器 parent child{…} 

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;
}