Cascading Style Sheets (CSS)，层叠样式表，用于为 HTML、XML 等代码添加样式。其优点在于，能够批量选择 XML 中的某些组件，然后进行批量渲染。

css 的参考手册：https://www.w3school.com.cn/cssref/index.asp

注释

CSS 的注释使用 /*this is a commemnt*/。

选择器

选择器就是选择一些组件，然后就可以对选择的组件进行批量美化。

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

class 和 id 的区别是，id 往往是唯一的，而 class 表示了一类。

字体属性和文本属性

选中了 title 类，并将其按照如下设置进行渲染。

1
2
3
4
5
.title{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

其中 font-size 是属性；20px 是值；font-size: 20px 合起来是声明。

更多方法可见：

字体属性 备注
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-weight 规定字体的粗细。
文本属性 备注
color 设置文本的颜色。
line-height 设置行高。
text-align 规定文本的水平对齐方式。

图片

为图片添加圆角和阴影

可以给图片添加圆角和阴影。

1
2
3
4
5
.imglist .img{
  border-radius: 8px;
  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
  /* rgba 中的 alpha 为透明度，取值 0~1 之间，越靠近 0 越透明 */
}
圆角和阴影
圆角和阴影

圆形图片

示例 XML：

1
2
3
<view class="imglist">
    <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg"></image>
</view>

示例 CSS：

1
2
3
4
5
.imglist .circle{
  width: 200px;
  height: 200px;
  border-radius: 100%;
}
圆形图片
圆形图片

盒模型

盒模型教程：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

盒模型参数：https://www.w3school.com.cn/cssref/pr_padding.asp

常用大小单位

英文|中文
cm|厘米
px|像素
em|在 font-size 中使用是相对于父元素的字体大小

更多详见：https://www.w3school.com.cn/css/css_units.asp

背景属性

背景属性 备注
background 在一个声明中设置所有的背景属性。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 设置是否及如何重复背景图像。

如，想要给 id 为 wxmlinfo 的 view 组件加一个背景颜色以及 id 为 studyweapp 的 view 组件添加一个背景图片：

1
2
3
4
5
6
7
8
9
#wxmlinfo{
  background-color: #dae7d9;
}

#studyweapp{
  background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

渐变与动画

见 https://cloudbase.net/community/guides/handbook/tcb05

包括创造渐变色图片 Gradient、滤镜 Filter、变形 Transform、过渡 Transition 和动画 Animation。

由于时间关系就不细看了。

导入其他配置文件

1
@import "common.css";