wxss语言是设计样式的编程语言，它能设置各个标签的风格。比如：字体颜色，大小，背景色，形状，布局，边框，动画等
举一个简单的例子： 比如用户想要制作个人名片: 下面是他的个人需求
wxss属性用户需求背景色cyan（青蓝色）边框实线、圆角、绿色字体微软雅黑 15px 粗体 蓝色实现这个需求，我们可以用wxss语言来写它的样式代码。 首先我们定义一个类型：叫什么名字好呢？就叫card吧！ 我们要在index.wxss完成样式代码设计
index.wxss:
.card{ /*设置背景色为青蓝色*/ background:cyan; /*先暂时记住下面三行代码*/ /*这三行代码是可以让子标签保持水平居中的*/ display: flex; flex-direction: column; align-items: center; /*设置圆角*/ border-radius:20px; /*设计边框*/ border: 2rpx solid green; /*设计字体*/ font-family:'微软雅黑'; /*设置字体大小*/ font-size: 15px; /*设置加粗*/ font-weight:bold; /*设置内边距*/ padding: 15px; /*设置字体颜色*/ color:blue }这个样式代码必须要在index.wxml中引用才能生效！！！ 那我们现在就去引用一下
index.wxml:
<view class="card"> <text> 姓名：程竹楠\n 学号：18413001\n 学院：软件工程学院\n 专业：软件工程 </text> </view>我们写完代码后按下ctrl+s运行下： 运行效果：
view是一种视图容器，view嵌套的话可以理解为往容器里面放容器
我们通过图来理解view的嵌套 对应上面的图，我们有相应的代码： index.wxml
<view class="card"> <view class="detail"> </view> </view>index.wxss
.card{ width:200px; height:150px; border-radius:10px; background:cyan } .detail{ width:80%; height: 100%; border-radius:10px; background:blue }运行结果： 我们还可以使蓝色的块块居中 在样式代码中，我们看到我对detail（蓝色块）的宽度设置的是width:80% 也就是说它占外部容器宽度的80%,右面剩余20% 要想使它居中在青蓝色块中，只需向右移动10%; 那我们修改wxss代码
.card{ width:200px; height:150px; border-radius:10px; background:cyan } .detail{ width:80%; /*距离左面10%就是向右移动10%*/ margin-left:10%; height: 100%; border-radius:10px; background:blue }wxml代码不变
<view class="card"> <view class="detail"> </view> </view>运行效果 现在我们理解了，如果内部容器写width:80%;就是占外部容器的80% 这个就很棒 接下来我们要理解一下，外部容器样式渲染内部容器样式 我们修改index.wxml代码
<view class="card"> <view class="detail"> 微信小程序 </view> </view>我们知道如果想要改变”微信小程序“这几个字的：字体大小、颜色属性需要对detail进行设置，那好我现在就偏不这么做 我要对card进行设置，看看”微信小程序“字体大小、颜色变化
.card{ width:200px; height:150px; border-radius:10px; /*设置字体相关*/ font-size: 20px; color: white; /*字体加粗*/ font-weight: bold; background:cyan } .detail{ width:80%; margin-left: 10%; /*下面这三行代码是设置文字水平、垂直居中的*/ /*暂时先记下来*/ display: flex; justify-content: center; align-items: center; height: 100%; border-radius:10px; background:blue }运行结果： 总结：
我们熟练认识了wxss小程序样式代码我们熟练认识了wxml小程序视图代码理解了容器的嵌套，和外部样式作用内部样式理解了内部容器的参照系是外部容器，width:80%是外部容器宽度80%这里让大家记忆的三行代码是flex布局相关内容，我们下期再见
