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 组件前边插入内容

classid 的区别是,id 往往是唯一的,而 class 表示了一类。

字体属性和文本属性

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

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

其中 font-size属性20pxfont-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%;
}
圆形图片
圆形图片

盒模型

盒子模型就像一个长方形的盒子,它有长度、高度、也有边框 border,以及内边距 padding 与外边距 margin

调整内边距:

1
2
3
4
5
6
#wxmlinfo,#studyweapp{
padding-top:20px;
padding-right:15px;
padding-bottom:20px;
padding-left:15px;
}

也可以简写为 padding 属性:

1
2
3
#wxmlinfo,#studyweapp{
padding:20px 15px
}

当只有两个参数时,则是 上下、左右;四个参数时为 上、右、下、左;三个参数时为 上、左右、下;一个参数则为四边等距。

更多详见:https://www.w3school.com.cn/cssref/pr_padding.asp

常用属性,这里给出关键词供搜索用:

内边距属性 备注
padding 在一个声明中设置所有内边距属性。
padding-top 设置元素的上内边距。
padding-right 设置元素的右内边距。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
外边距属性 备注
margin 在一个声明中设置所有外边距属性。
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
边框属性 备注
border 在一个声明中设置所有的边框属性。比如 border:1px solid #ccc;
border-top 在一个声明中设置所有的上边框属性。
border-right 在一个声明中设置所有的右边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-left 在一个声明中设置所有的左边框属性。
border-width 设置四条边框的宽度。
border-style 设置四条边框的样式。
border-color 设置四条边框的颜色。
border-radius 简写属性,设置所有四个 border-*-radius 属性。
box-shadow 向方框添加一个或多个阴影。

常用大小单位

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

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

背景属性

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

如,想要给 id 为 wxmlinfoview 组件加一个背景颜色以及 id 为 studyweappview 组件添加一个背景图片:

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