微信小程序页面主要有4个页面,分别是:
js页面、json页面,wxml页面、wxss页面
他们的功能分别是:
js:页面逻辑文件
json:页面配置文件
wxml:页面描述文件
wxss:页面样式表文件
在这里插入图片描述
各种字体样式属性命名及其含义:

属性名称含义说明
font-family字体类型Serif、Sans-serif、Monospace、Cursive、Fantasy、…
font-size字体大小5px/rpx/cm, large, small,medium, larger, smaller, …
font-style字体倾斜italic, normal, oblique, …
font-weight字体加粗bold, bolder, lighter, …

这里分别用style和class属性设置字体样式,在index.wxss中定义样式类。文字包含在边框内。边框上方有居中标题。
实现效果:
在这里插入图片描述
各页面源代码:

<!--index.wxml-->
<view class="box">
<view class="title">标题</view>
	<view style="font-family:sans-serif;font-size:30px;">
		<view>利用style设置字体样式:</view>
		<view>字体:sans-serif,30像素
		</view>
	</view>
	=====================
	<view class="fontStyle">
		<view>利用class设置字体样式: </view>
		<view>字体:cursive,25像素,倾斜,加粗</view>
	</view>
</view>
/**index.wxss**/
.fontStyle{
  font-family: cursive;
  font-size: 25px;
  font-style: italic;
  font-weight: bold;
}
/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}
.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color:palevioletred;
}

view组件支持使用 style、class 属性来设置组件的样式,静态的样式一般写到 class 中,动态的样式一般写到 style 中,这样可以提高渲染速度。

class引用的样式类可以在index.wxss和app.wxss中定义。
在app.wxss中定义的样式类属于全局样式类,可以在项目的任何文件中使用。
在index.wxss中定义的样式类一般只在index.wxml中使用。

各种文本属性命名及其含义:

属性名称含义
color字体颜色
text-align文本的对齐方式
text-indent首行缩进
letter-spacing字母之间的距离
word-spacing单词间距,以空格来区分单词
white-space文档中的空白处
text-decoration文本修饰样式
text-decoration-color文本修饰颜色

样例图:
在这里插入图片描述
各页面源代码:

<!--index.wxml-->
<view class="box">
	<view class="title">文本样式设置</view>
	<view class="textStyle01">
		风急天高猿啸哀,渚清沙白鸟飞回。
		无边落木萧萧下,不尽长江滚滚来。
		万里悲秋常作客,百年多病独登台。
		艰难苦恨繁霜鬓,潦倒新停浊酒杯。
	</view>
	============================
	<view class="textStyle02">
		single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire.

	</view>
</view>
/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx;
}
.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color:palevioletred;
}
/**index.wxss**/
.textStyle01 {
  color: #00f;
  letter-spacing: 10px;
  text-align: left;
  text-indent: 50px;
  text-decoration: underline;
  text-decoration-color:aqua;
  line-height: 30px;
  white-space: normal;
}
.textStyle02{
  text-align: justify;
  word-spacing: 20px;
  text-transform: uppercase;
  white-space: pre-wrap;

}
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐