|
微信小程序页面主要有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中定义样式类。文字包含在边框内。边框上方有居中标题。 实现效果：  各页面源代码：
标题
利用style设置字体样式：
字体：sans-serif，30像素
=====================
利用class设置字体样式：
字体：cursive，25像素，倾斜，加粗
/**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文本修饰颜色
样例图：  各页面源代码：
文本样式设置
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
============================
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.
/**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;
}
|