第二部分 小程序样式入门
第3章 小程序样式基础
小程序WXSS中的样式语法沿用了传统的CSS和CSS3语法，本章主要讲解在小程序中如何应用一些基础的CSS语法，主要涉及元素选择器、ID选择器、类选择器、样式的几种写法、背景颜色、文本、字体、轮廓等知识点。
每个小节我们会先讲解常规CSS的基础语法，然后介绍在微信小程序中如何应用。
3.1 元素选择器
在W3C标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档树中该元素类型的每一个实例。在网页开发中，元素选择器可以理解为HTML的元素；在微信小程序中，元素选择器可以理解为微信小程序中的组件。
1．基础语法
最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常是某个HTML元素，比如p、h1、em、a，甚至可以是HTML本身，代码示例如下：
html {color:black; }
h1 {color:blue; }
h2 {color:silver; }
可以将某个样式从一个元素切换到另一个元素。假设将上面的段落文本（而不是h1元素）设置为灰色，只需要把h1选择器改为p，代码示例如下：
html {color:black; }
p {color:gray; }
h2 {color:silver; }
2．小程序应用
微信小程序中，我们可以把每个组件当作一个元素，比如小程序中常用的view组件和text组件。我们可以借鉴CSS的使用方式。
.wxml文件代码示例如下：
<view>
<text>文本</text>
</view>
.wxss文件代码示例如下：
/＊元素选择器＊/
page{
background-color: gainsboro; /＊ page表示整个页面＊/
}
view{
background-color: aliceblue; /＊定义整个view的背景颜色＊/
}
text{
background-color: burlywood; color: red; /＊定义text的背景颜色和字体颜色＊/
}
元素选择器使用效果如图3-1所示。给view加了一个背景颜色，给text也增加了一个背景颜色和红色文字。
图3-1 元素选择器的使用效果
3.2 ID选择器
有些情况下，文档中会出现某个特定ID值，但是并不知道它会出现在哪个元素上，所以你想声明独立的ID。ID选择器允许以一种独立于文档元素的方式来指定样式，类似于类，可以独立于元素来选择ID。
1．基础语法
ID选择器以"#"来定义。ID选择器可以为标有特定ID的HTML元素指定特定的样式。
例如，有两个ID选择器，第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色，代码如下：
#red {color:red; } /＊定义红色＊/
#green {color:green; } /＊定义绿色＊/
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色：
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意
id属性只能在每个HTML文档中出现一次。
2．小程序应用
小程序中ID选择器使用方式同CSS，在WXML页面的组件中定义ID，然后在WXSS中使用#号来定义组件的样式。
.wxml文件代码示例如下：
<view>
<text>普通文本</text>
<text id="myid">ID选择器里面的文本</text><! —在组件中定义样式的id-->
</view>
.wxss文件代码示例如下：
/＊元素选择器＊/
page{
background-color: gainsboro;
}
view{
background-color: aliceblue;
}
/＊ id选择器＊/
#myid{
color: white; background-color: black; /＊定义在wxml页面中对应id的样式＊/
}
ID选择器使用效果如图3-2所示。
图3-2 ID选择器使用效果
3. ID派生选择器
在现代布局中，ID选择器常常用于建立派生选择器。代码示例如下：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于ID是sidebar的元素内的段落。这个元素很可能是div或者是表格单元，或者其他块级元素，甚至可以是一个内联元素，比如<em></em>或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素<span>中嵌入<p>。
一个选择器可以有多种用法。即使被标注为sidebar的元素只能在文档中出现一次，这个ID选择器作为派生选择器也可以被使用很多次，代码示例如下：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了特殊的处理。
我们尝试用上小节的知识点来实现：将view组件里面的所有text文本显示为红色。
.wxml文件代码示例如下：
<view>
<text>普通文本</text>
<text id="myid">ID选择器里面的文本</text> <! —定义id选择器名为myid-->
</view>
<view id="myid2"> <! —定义id选择器名为myid2-->
<text>普通文本</text>
</view>
.wxss文件代码示例如下：
/＊元素选择器＊/
page{
background-color: gainsboro;
}
view{
background-color: aliceblue;
}
/＊ id选择器＊/
#myid{
color: white; background-color: black;
/＊定义text黑色背景，白色字体＊/
}
#myid2 text{ /＊派生选择器，定义id为myid2的组
件内的text文本字体颜色为red＊/
color:red;
}
ID派生选择器使用效果如图3-3所示。
图3-3 ID派生选择器使用效果
3.3 类选择器
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
提示
只有恰当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
1．基础语法
在CSS中，类选择器以一个点号显示，代码示例如下：
.center {text-align: center} /＊定义名称为center的样式，可供class类选择器调用＊/
在例子中，所有拥有center类的HTML元素均为居中。
在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守".center"类选择器中的规则，代码示例如下：
<h1 class="center"> <! —class类选择器：应用样式名为center的样式-->
This heading will be center-aligned
</h1>
<p class="center"> <! —class类选择器：应用样式名为center的样式-->
This paragraph will also be center-aligned.
</p>
注意
类名的第一个字符不能使用数字！
2．小程序应用
下面举例说明在微信小程序中如何定义3行不同颜色的文本。
微信小程序中的view组件相当于div块级元素，每个view自成一行；小程序中的text组件是行内元素，可以理解为类似span元素；如果将3个文本text放在同一个view里面，则都显示在同一行。定义在view组件里面的text文本颜色会继承view的颜色；如果view组件内的text重新定义了颜色样式，会覆盖view组件里面定义的颜色。
.wxml文件代码示例如下：
<view class='myclass01'><! —view是块级元素，显示为一行-->
<text>普通文本</text><! —text是行内元素，多个text都是显示在一行-->
</view>
<view class='myclass02'>
<text >普通文本</text>
</view>
<view>
<text class='myclass03'>普通文本</text>
</view>
.wxss文件代码示例如下：
/＊元素选择器＊/
page{
background-color: gainsboro;
}
view{
background-color: aliceblue;
}
/＊ id选择器＊/
.myclass01{
color: red; /＊字体为红色＊/
}
.myclass02{
color:purple; /＊字体为紫色＊/
}
.myclass03{
color:blue; /＊字体为蓝色＊/
}
类选择器使用效果如图3-4所示。
图3-4 类选择器使用效果图
3.4 样式的几种写法
CSS允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，也可以在HTML页的头元素中，或在一个外部的CSS文件中，甚至可以在同一个HTML文档内部引用多个外部样式表。
当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中4）拥有最高的优先权。
1）浏览器默认设置。
2）外部样式表。
3）内部样式表（位于<head>标签内部）。
4）内联样式（在HTML元素内部）。
3.4.1 Web中样式的几种写法
当浏览器读到一个样式表时，会根据它来格式化HTML文档。插入样式表的方法有3种。
第1种：外部样式表
当样式需要应用于很多页面时，外部样式表是理想的选择。在使用外部样式表时，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部，代码示例如下：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件mystyle.css中读到样式声明，并根据该声明来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以．css扩展名进行保存。下面是一个样式表文件的例子，代码如下：
hr {color: sienna; }
p {margin-left: 20px; }
body {background-image: url("images/back40.gif"); }
第2种：内部样式表
当单个文档需要特殊的样式时，应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表，代码示例如下：
<head>
<style type="text/css">
hr {color: sienna; }
p {margin-left: 20px; }
body {background-image: url("images/back40.gif"); }
</style>
</head>
第3种：内联样式
由于要将表现和内容混杂在一起，内联样式会损失样式表的许多优势，例如当样式仅需要在一个元素上应用一次时，请慎用这种方法。
要使用内联样式，需要在相关的标签内使用样式（style）属性。style属性可以包含任何CSS属性。下面的代码示例展示了如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对h3选择器的三个属性，代码如下：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对h3选择器的两个属性，代码如下：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，代码示例如下：
color: red;
text-align: right;
font-size: 20pt;
那么h3得到的样式，即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
3.4.2 小程序中样式的几种写法
微信小程序中如何插入样式表？当读到一个样式表时，小程序会根据样式来格式化显示页面。插入样式表的方法有三种：
第1种：默认微信小程序的每个程序对应一个.wxss文件，样式直接写在该文件即可。
第2种：直接在WXML组件里写样式（类似Web中的内联样式写法）。
第3种：样式写在外部.wxss文件中，在默认小程序对应的.wxss文件中引用。
此处，在根目录下的style文件下定义了一个自定义样式文件mycss.wxss, .wxss文件代码示例如下：
.mytext03{
color: green;
}
.wxml文件代码示例如下：
<view>
<text class='mytext01'>文本内容1</text> <! --第1种样式定义：小程序默认样式写法-->
<text style='color:blue; '>文本内容2</text><! --第2种样式定义：样式写在组件里-->
<text class='mytext03'>文本内容3</text><! --第3种样式定义：外部定义样式，然后引用-->
</view>
.wxss文件代码示例如下：
@import '/style/mycss.wxss';
/＊第3种样式定义：外部定义样式，然后引用＊/
.mytext01{
color: red; /＊第1种样式定义：小程序默认样式写法＊/
}
效果如图3-5所示。
图3-5 小程序中样式的几种写法效果
3.5 背景颜色
CSS允许应用纯色作为背景。
1．基础语法
可以使用background-color属性为元素设置背景色。该属性接受任何合法的颜色值。
根据这条规则把元素的背景设置为灰色，代码示例如下：
p {background-color: gray; }
如果希望背景色从元素中的文本与外边框有一定的空隙，只需增加一些内边距，代码示例如下：
p {background-color: gray; padding: 20px; }
可以为所有元素设置背景色，包括从body到em和a等行内元素。
background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
2．小程序应用
下面举例说明在小程序中定义view组件和text组件的背景。
.wxml文件代码示例如下：
<view > <--默认，不做任何定义-->
文本内容01
</view>
<view class='cls01'> <--定义view的背景-->
文本内容02
</view>
<view>
<text class='cls02'>文本内容03</text> <--定义text的背景-->
</view>
<--定义view的背景，其内嵌套text（也定义背景）-->
<view class='cls3-1'>
<text class='cls3-2'>文本内容04</text>
</view>
.wxss文件代码示例如下：
.cls01{
background-color: gainsboro;
}
.cls02{
background-color: goldenrod;
}
.cls3-1{
background-color: oldlace;
}
.cls3-2{
background-color: orange;
}
背景颜色使用效果如图3-6所示。
图3-6 背景颜色使用效果
3.6 文本
CSS文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进，等等。
3.6.1 水平对齐（text-align）
1．基础语法
text-align是一个基本的属性，它会影响一个元素中文本行互相之间的对齐方式。
西方语言都是从左向右读的，所以text-align的默认值是left。文本在左边界对齐，右边界呈锯齿状（也称为“从左到右”文本）。对于如希伯来语和阿拉伯语之类的语言，text-align默认为right，因为这些语言是从右向左读的。顾名思义，center会使每个文本行在元素中居中排列。
text-align属性值如下：
提示
将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
（1）text-align:center与<CENTER>
你可能会认为text-align:center与<CENTER>元素的作用一样，但实际上二者大相径庭。
<CENTER>不仅影响文本，还会把整个元素居中。text-align不会控制元素的对齐，而只影响内部内容。即元素本身不会受影响，只是其中的文本受影响。
（2）justify属性
justify将文本设置为两端对齐，即文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。需要注意的是，要由用户代理（而不是CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。
2．小程序应用
下面举例说明如何在微信小程序中定义text文本在view中的水平对齐方式和两端对齐文本。
.wxml文件代码示例如下：
<view > <! --文本默认在view中居左-->
文本内容（默认居左）
</view>
<view class='mycenter'><! —定义文本在view中居中-->
文本内容（居中）
</view>
<view class='mycenter'><! —定义文本text在view中居中-->
<text>文本内容（居中）</text>
</view>
<view class='myright'><! —定义文本在view中居右-->
文本内容（居右）
</view>
<view class='myright'><! —定义文本text在view中居中-->
<text>文本内容（居右）</text>
</view>
<view class='myjustify'><! —定义文本在view中两端对齐-->
小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的
小程序开发环境和开发者生态
</view>
<view > <! —默认效果，见图3-7，右侧虚线框处没有对齐-->
小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的
小程序开发环境和开发者生态
</view>
图3-7 水平对齐效果
.wxss文件代码示例如下：
text{
background-color: gainsboro;
}
/＊水平对齐＊/
.mycenter{
text-align: center; /＊居中＊/
}
.myright{
text-align: right; /＊居右＊/
}
.myjustify{
text-align: justify; /＊实现两端对齐文本效果＊/
}
水平对齐效果如图3-7所示。
3.6.2 文本最后行对齐（text-align-last）
text-align-last属性规定如何对齐文本的最后一行。
注意
text-align-last属性只有在text-align属性设置为justify时才起作用。
text-align-last属性值如下：
3.6.3 缩进文本（text-indent）
1．基础语法
把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。下面的代码示例会使所有段落的首行缩进5 em：
p {text-indent: 5em; }
一般来说，可以为所有块级元素应用text-indent属性，但无法将该属性应用于行内元素，图像之类的元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示
如果想把一个行（非首行）内元素“缩进”，可以用左内边距或外边距创造这种效果。
（1）使用负值
text-indent还可以设置为负值。可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边，代码示例如下：
p {text-indent: -5em; }
在为text-indent设置负值时要小心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距，代码示例如下：
p {text-indent: -5em; padding-left: 5em; }
（2）使用百分比值
text-indent可以使用所有长度单位，包括百分比值。
百分数相对于元素父元素的宽度进行缩进。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在下例中，缩进值是父元素的20%，即100px，代码示例如下：
div {width: 500px; }
p {text-indent: 20%; }
<div>
<p>this is a paragragh</p>
</div>
（3）继承
text-indent属性可以继承，示例代码如下：
div#outer {width: 500px; }
div#inner {text-indent: 10%; }
p {width: 200px; }
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上标记中的段落也会缩进50px，这是因为这个段落继承了id为inner的div元素的缩进值。
2．小程序应用
根据基础语法，下面在微信小程序中实现文本的缩进。
.wxml文件代码示例如下：
<view class='cls1'>
文本内容（块级元素支持缩进）
</view>
<view >
<text class='cls2'>文本内容（行内元素不支持缩进）</text>
</view>
<view class='cls3'>
<text>文本内容（文本缩进）</text>
</view>
.wxss文件代码示例如下：
/＊缩进文本＊/
.cls1{
text-indent: 2em; /＊缩进2个字距＊/
}
.cls2{
text-indent: 2em;
/＊可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素＊/
}
.cls3{
text-indent: 2em;
}
缩进文本效果如图3-8所示。
图3-8 缩进文本效果
3.6.4 文本装饰（text-decoration）
1．基础语法
text-decoration是一个很有意思的属性，它提供了很多非常有趣的行为。text-decoration有5个值：none、underline、overline、line-through、blink。
顾名思义，underline会对元素加下划线，就像HTML中的U元素一样。overline的作用恰好相反，会在文本的顶端加上划线。值line-through则在文本中间画一个贯穿线，等价于HTML中的S和strike元素。blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。
none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认会有下划线。如果希望去掉超链接的下划线，可以使用CSS达到目的，代码示例如下：
a {text-decoration: none; }
注意
如果显式地用这样一个规则去掉链接的下划线，那么锚（链接文字）与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。
2．小程序应用
根据基础语法，下面在微信小程序中实现如何定义文本的顶端线条、底部线条、中间贯穿线。
说明：text是行内元素，所以这里都是指一行；如果想每个text一行，需要在每个text外面加上view, view是块级元素，每个view自成一行。
.wxml文件代码示例如下：
<view>
<text class='cls1'>顶端线条</text>
<text class='cls2'>底部线条</text>
<text class='cls3'>中间贯穿线</text>
</view>
.wxss文件代码示例如下：
view{
margin-top: 10px; /＊距离顶部的外边距＊/
}
/＊文本装饰＊/
.cls1{
text-decoration: overline; /＊上划线＊/
}
.cls2{
text-decoration: underline; /＊下划线＊/
}
.cls3{
text-decoration: line-through; /＊中间画一个贯穿线＊/
}
文本装饰效果如图3-9所示。
图3-9 文本装饰效果
3.6.5 单词间隔（text-justify）
1．基础语法
text-justify改变单词间的间隔，即改变字与字之间的间距使得文字在行内排齐，代码示例如下：
div
{
text-align:justify;
text-justify:inter-word;
}
只有Internet Explorer支持text-justify属性；而火狐、Chrome、Safari和Opera不支持。
text-justify属性只有在text-align属性设置为justify时才起作用。
该属性规定如何对齐行文本进行对齐和分隔。
text-justify属性值如下：
3.6.6 文本溢出（text-overflow）
1．基础语法
text-overflow属性规定当文本溢出包含元素时应当怎么办。
属性值如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现文本超出宽度后隐藏文本，并在后面跟上省略号。
.wxml文件代码示例如下：
<view class='cls'>
小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新
的小程序开发环境和开发者生态。
</view>
.wxss文件代码示例如下：
.cls{
width:19em; /＊定义宽度＊/
overflow: hidden;
white-space: nowrap; /＊不换行，如果换行，则不会出现省略号＊/
text-overflow: ellipsis;
}
文本溢出效果如图3-10所示。
图3-10 文本溢出效果
3.6.7 文本阴影（text-shadow）
1．基础语法
在CSS3中，可利用text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影具有两个或三个长度值和一个可选的颜色值。省略的长度是0。属性值如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现文本的不同阴影效果。
.wxml文件代码示例如下：
<view class='cls1'>
文字阴影模糊效果
</view>
<view class='cls2'>
白色的文本文字阴影
</view>
<view class='cls3'>
霓虹灯的光芒文字阴影
</view>
.wxss文件代码示例如下：
/＊文字阴影模糊效果＊/
.cls1{
text-shadow: 2px 2px 8px #FF0000;
}
/＊白色的文本文字阴影＊/
.cls2{
color:white;
text-shadow:2px 2px 4px #000000;
}
/＊霓虹灯的光芒文字阴影＊/
.cls3{
text-shadow:0 0 3px #FF0000;
}
文本阴影效果如图3-11所示。
图3-11 文本阴影效果
3.6.8 字符转换（text-transform）
1．基础语法
text-transform属性处理文本的大小写。
属性值如下：
作为一个属性，text-transform可能无关紧要，不过，如果突然决定把所有h1元素变为大写，这个属性就很有用。你不必单独修改所有h1元素的内容，只需使用text-transform完成这个修改，代码示例如下：
h1 {text-transform: uppercase}
使用text-transform有两方面的好处。首先，只需写一个简单的规则就能完成这个修改，而无须修改h1元素本身。其次，如果你以后决定将所有大小写再切换为原来的大小写，可以更容易地完成。
2．小程序应用
根据基础语法，下面在微信小程序中实现字符的大小写转换。
.wxml文件代码示例如下：
<view class='cls1'> <! --通过样式转换成全部大写-->
huang ju HUA
</view>
<view class='cls2'> <! --通过样式转换成全部小写-->
huang ju HUA
</view>
<view class='cls3'> <! --通过样式转换成单词首字母大写-->
huang ju HUA
</view>
.wxss文件代码示例如下：
.cls1{
text-transform: uppercase; /＊大写＊/
}
.cls2{
text-transform:lowercase; /＊小写＊/
}
.cls3{
text-transform: capitalize;
/＊首字母大写＊/
}
字符转换效果如图3-12所示。
图3-12 字符转换效果
3.6.9 处理空白符（white-space）
white-space属性负责处理元素内的空白。
这个属性声明在建立布局过程中如何处理元素中的空白符。值pre-wrap和pre-line是CSS 2.1中新增的。所有浏览器都支持white-space属性。
white-space可能的属性值如下：
注意
任何的版本的Internet Explorer（包括IE8）都不支持属性值"inherit"。
小程序应用参考3.6.6节中的实例。
3.6.10 自动换行（word-break）
1．基础语法
word-break属性规定自动换行的处理方法。通过使用word-break属性，可以让浏览器实现在任意位置的换行。属性说明如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现文本里面换行。
.wxml文件代码示例如下：
<view>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view>
<view class='cls1'>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view>
.wxss文件代码示例如下：
view{
width: 150px;
border: 1rpx solid gainsboro;
margin: 5px;
}
.cls1{
word-break: break-all; /＊允许在单词内换行。＊/
}
自动换行效果如图3-13所示。
图3-13 自动换行效果
3.6.11 长词换行（word-wrap）
1．基础语法
word-wrap属性允许长单词或URL地址换行到下一行。属性值说明如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现文本中的长单词换行。
.wxml文件代码示例如下：
<view>
This is a veryveryveryve long paragraph.
</view>
<view class='cls1'>
This is a veryveryveryve long paragraph.
</view>
<view class='cls2'>
This is a veryveryveryve long paragraph.
</view>
.wxss文件代码示例如下：
view{
width: 150px;
border: 1rpx solid gainsboro;
margin: 5px;
}
.cls1{
word-break: break-all; /＊允许在单词内换行。＊/
}
.cls2{
word-wrap: break-word; /＊在长单词或URL地址内部进行换行。＊/
}
word-wrap效果如图3-14所示。
图3-14 word-wrap效果
3.6.12 单词间隔（word-spacing）
1．基础语法
word-spacing属性可以改变字（单词）之间的标准间隔，其默认值normal与设置值为0是一样的，即word-spacing:normal和word-spacing:0效果一样。word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把字间隔拉近，甚至使字符有交叉代码示例如下：
p.spread {word-spacing: 30px; }
p.tight {word-spacing: -0.5em; }
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
属性值说明如下：
2．小程序应用
实根据基础语法，下面在微信小程序中实现对单词的间隔（中文无效）的定义。
.wxml文件代码示例如下：
<view>
This is some text。这里是一些文本。
</view>
<view class='da'>
This is some text。这里是一些文本。
</view>
<view class='xiao'>
This is some text。这里是一些文本。
</view>
.wxss文件代码示例如下：
.da{
word-spacing: 10px; /＊增加字（单词）之间＊/
}
.xiao{
word-spacing: -0.5em; /＊减少字（单词）之间＊/
}
单词间隔效果如图3-15所示。
图3-15 单词间隔效果
3.6.13 字母间隔（letter-spacing）
1．基础语法
letter-spacing属性与word-spacing的区别在于，letter-spacing修改的是字符或字母之间的间隔。
与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal（与letter-spacing:0相同）。输入的长度值会使字母之间的间隔增加或减少指定的量，允许使用负值，这会让字母之间挤得更紧。代码示例如下：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
属性值说明如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现对文本字之间间隔的定义。
.wxml文件代码示例如下：
<view>
This is some text。这里是一些文本。
</view>
<view class='da'>
This is some text。这里是一些文本。
</view>
<view class='xiao'>
This is some text。这里是一些文本。
</view>
.wxss文件代码代码示例如下
.da{
letter-spacing: 5px; /＊增加字符间之空间＊/
}
.xiao{
letter-spacing: -0.3em; /＊减少字符间之空间＊/
}
字母间隔效果如图3-16所示。
图3-16 字母间隔效果
3.6.14 文本方向（direction）
1．基础语法
如果你阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的排列方向。并不是所有语言都如此。我们知道古汉语就是从右向左阅读，当然还包括希伯来语和阿拉伯语等。CSS2引入了direction属性来描述文字的方向性。
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
注意
对于行内元素，只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
direction属性值说明如下：
2．小程序应用
根据基础语法，下面在微信小程序中实现文本方向的效果。
.wxml文件代码示例如下：
<view>
Some text. Left-to-right direction．一些文本-从左到右
</view>
<view class='myrtl'>
Some text. Right-to-left direction．一些文本-从右到左
</view>
.wxss文件代码示例如下：
.myrtl{
direction: rtl; /＊从右到左＊/
}
文本方向效果如图3-17所示。
图3-17 文本方向效果
3.7 字体
CSS字体属性定义文本字体的大小、加粗、风格（如斜体）和变形（如小型大写字母）。
3.7.1 字体大小（font-size）
1．基础语法
管理文本大小的能力在Web设计领域很重要。font-size值用于设置字体的大小。但是，不要通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。请始终使用正确的HTML标题，比如使用<h1> - <h6>来标记标题，使用<p>来标记段落。
font-size值可以是绝对值或相对大小。
❏ 绝对值：将文本设置为指定的大小。不允许用户在所有浏览器中改变文本大小（不利于可用性）。绝对大小在确定了输出的物理尺寸时很有用。
❏ 相对大小：相对于周围的元素来设置大小。允许用户在浏览器上改变文本大小。
注意
如果没有规定字体大小，普通文本（比如段落）的默认大小是16像素（16px=1em)。
（1）使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制，代码示例如下：
h1 {font-size:60px; }
h2 {font-size:40px; }
p {font-size:14px; }
在Firefox, Chrome和Safari浏览器中，可以重新调整上面例子的文本大小，但是在Internet Explorer中不行。
虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于对文本的调整。
（2）使用em来设置字体大小
为了解决在Internet Explorer中无法调整文本的问题，许多开发者以em为单位代替像素。
W3C推荐使用em尺寸单位。
1em等于当前的字体尺寸。如果一个元素的font-size为16像素（16px），那么对于该元素，1em就等于16像素。在设置字体大小时，em的值会参照父元素的字体大小改变。
浏览器中默认的文本大小是16像素。因此1em的默认尺寸是16像素。
可以使用公式将像素转换为em:em=pixels/16。
注意
16等于父元素的默认字体大小，假设父元素的font-size为20px，那么公式需改为：em=pixels/20。
代码示例如下：
h1 {font-size:3.75em; } /＊ 60px/16=3.75em ＊/
h2 {font-size:2.5em; } /＊ 40px/16=2.5em ＊/
p {font-size:0.875em; } /＊ 14px/16=0.875em ＊/
（3）结合使用百分比和em
在所有浏览器中均有效的方案是，针对body元素（父元素），以百分比设置默认的font-size值。
代码示例如下：
body {font-size:100%; }
h1 {font-size:3.75em; }
h2 {font-size:2.5em; }
p {font-size:0.875em; }
代码非常有效。在所有浏览器中可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
2．小程序应用
根据基础语法，下面在微信小程序中实现对字体的大小的定义。
.wxml文件代码示例如下：
<view>
<text>默认字体大小</text>
</view>
<view >
<text class='cls1'>字体大小25px</text> <! --样式定义在text-->
</view>
<view class='cls1'>
<text>字体大小25px</text> <! --样式定义在view-->
</view>
<view >
<text class='cls2-a'>字体大小1em</text>
<text class='cls2-b'>字体大小2em</text>
</view>
<view >
<text class='cls3-a'>字体大小100%</text>
<text class='cls3-b'>字体大小150%</text>
</view>
.wxss文件代码示例如下：
.cls1{
font-size: 25px;
}
.cls2-a{
font-size: 1em;
}
.cls2-b{
font-size: 2em;
}
.cls3-a{
font-size: 100%;
}
.cls3-b{
font-size: 150%;
}
字体大小应用效果如图3-18所示。
图3-18 字体大小效果
3.7.2 字体风格（font-style）
1．基础语法
font-style属性最常用于规定斜体文本。font-style属性包括以下3个值。
❏ normal：文本正常显示。
❏ italic：文本斜体显示。
❏ oblique：文本倾斜显示。
唯一有点复杂的是，要知道italic文本和oblique文本之间的差别。italic是一种简单的字体风格，对每个字母的结构有一些小改动来反映变化的外观。而oblique则是正常竖直文本的一个倾斜版本。通常情况下，italic和oblique文本在Web浏览器中看上去完全一样。
代码示例如下：
p.normal {font-style:normal; }
p.italic {font-style:italic; }
p.oblique {font-style:oblique; }
2．小程序应用
根据基础语法，下面在微信小程序中实现对字体风格的定义。
.wxml文件代码示例如下：
<view>
<text>默认字体</text>
</view>
<view >
<text class='cls1'>字体italic</text>
</view>
<view >
<text class='cls2'>字体oblique</text>
</view>
.wxss文件代码示例如下：
.cls1{
font-style: italic;
}
.cls2{
font-style: oblique;
}
字体风格效果如图3-19所示。
图3-19 字体风格效果
3.7.3 字体变形（font-variant）
1．基础语法
font-variant属性可以设定小型大写字母。小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用了不同大小的大写字母。
代码示例如下：
p {font-variant:small-caps; }
2．小程序应用
根据基础语法，下面在微信小程序中实现对小型大写字母的定义。
.wxml文件代码示例如下：
<view>
<text>默认字体</text>
</view>
<view >
<text class='cls1'>字体This is font:normal</text>
</view>
<view >
<text class='cls2'>字体This is font:small-caps</text>
</view>
.wxss文件代码示例如下：
.cls1{
font-variant: normal;
}
.cls2{
font-variant: small-caps;
}
字体变形效果如图3-20所示。
图3-20 字体变形效果
3.7.4 字体加粗（font-weight）
1．基础语法
font-weight属性设置文本的粗细。使用bold关键字可以将文本设置为粗体。关键字包含100～900的数字，指定了九级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。数字400等价于normal，而700等价于bold。
如果将元素的加粗关键字设置为bolder，浏览器会设置比所继承值更粗的一个加粗字体；关键字lighter与此相反。
代码示例如下：
p.normal {font-weight:normal; }
p.thick {font-weight:bold; }
p.thicker {font-weight:900; }
2．小程序应用
根据基础语法，下面在微信小程序中实现对字体加粗的定义。
.wxml文件代码示例如下：
<view>
<text>默认字体</text>
</view>
<view >
<text class='cls1'>字体normal</text>
</view>
<view >
<text class='cls2'>字体bold</text>
</view>
<view >
<text class='cls3-a'>字体100</text>
</view>
<view >
<text class='cls3-b'>字体500</text>
</view>
<view >
<text class='cls3-c'>字体900</text>
</view>
.wxss文件代码示例如下：
.cls1{
font-weight: normal;
}
.cls2{
font-weight: bold;
}
.cls3-a{
font-weight: 100;
}
.cls3-b{
font-weight: 500;
}
.cls3-c{
font-weight: 900;
}
字体加粗效果如图3-21所示。
图3-21 字体加粗效果
3.8 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
1．基础语法
CSS的outline属性规定元素轮廓的样式、颜色和宽度。可以设置的属性分别是（按顺序）:outline-color、outline-style、outline-width。如果不设置其中的某个值，也不会出问题，比如outline:solid #ff0000；也是允许的。
CSS轮廓属性值如下：
outline-color属性值如下：
outline-style属性值如下：
outline-width属性值如下：
2．小程序应用
根据基础语法，下面在微信小程序中设置text和view的轮廓样式。这里文字外围的点线就是我们所实现的轮廓样式。
.wxml文件代码示例如下：
<view class='cls1'>
这里是文本内容
</view>
<view>
<text class='cls1'>这里是文本内容</text>
</view>
.wxss文件代码示例如下：
.cls1{
margin: 30px;
border: 3px solid gainsboro;
outline: thick dotted orangered;
}
轮廓效果如图3-22所示。
图3-22 轮廓效果