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 类,并将其按照如下设置进行渲染。

.title{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

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

更多方法可见:

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

# 图片

# 为图片添加圆角和阴影

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

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

圆角和阴影

# 圆形图片

示例 XML:

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

示例 CSS:

.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 为 wxmlinfoview 组件加一个背景颜色以及 id 为 studyweappview 组件添加一个背景图片:

#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

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

# 导入其他配置文件

@import "common.css";