第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.2 ID選擇器
有些情況下，文檔中會出現某個特定ID值，但是并不知道它會出現在哪個元素上，是以你想聲明獨立的ID。ID選擇器允許以一種獨立于文檔元素的方式來指定樣式，類似于類，可以獨立于元素來選擇ID。
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文檔中出現一次。
小程式中ID選擇器使用方式同CSS，在WXML頁面的元件中定義ID，然後在WXSS中使用#号來定義元件的樣式。
<view>
<text>普通文本</text>
<text id="myid">ID選擇器裡面的文本</text><!—在元件中定義樣式的id-->
</view> /*元素選擇器*/
page{
background-color: gainsboro;
}
view{
background-color: aliceblue;
}
/* id選擇器*/
#myid{
color: white;background-color: black; /*定義在wxml頁面中對應id的樣式*/
} ID選擇器使用效果如圖3-2所示。
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文本顯示為紅色。
<view>
<text>普通文本</text>
<text id="myid">ID選擇器裡面的文本</text> <!—定義id選擇器名為myid-->
</view>
<view id="myid2"> <!—定義id選擇器名為myid2-->
<text>普通文本</text>
</view> /*元素選擇器*/
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 類選擇器
要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。
隻有恰當地标記文檔後，才能使用這些選擇器，是以使用這兩種選擇器通常需要先做一些構想和計劃。
在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> 類名的第一個字元不能使用數字！
下面舉例說明在微信小程式中如何定義3行不同顔色的文本。
微信小程式中的view元件相當于div塊級元素，每個view自成一行；小程式中的text元件是行内元素，可以了解為類似span元素；如果将3個文本text放在同一個view裡面，則都顯示在同一行。定義在view元件裡面的text文本顔色會繼承view的顔色；如果view元件内的text重新定義了顔色樣式，會覆寫view元件裡面定義的顔色。
<view class='myclass01'><!—view是塊級元素，顯示為一行-->
<text>普通文本</text><!—text是行内元素，多個text都是顯示在一行-->
</view>
<view class='myclass02'>
<text >普通文本</text>
</view>
<view>
<text class='myclass03'>普通文本</text>
</view> /*元素選擇器*/
page{
background-color: gainsboro;
}
view{
background-color: aliceblue;
}
/* id選擇器*/
.myclass01{
color: red; /*字型為紅色*/
}
.myclass02{
color:purple; /*字型為紫色*/
}
.myclass03{
color:blue; /*字型為藍色*/
} 類選擇器使用效果如圖3-4所示。
3.4 樣式的幾種寫法
CSS允許以多種方式規定樣式資訊。樣式可以規定在單個的HTML元素中，也可以在HTML頁的頭元素中，或在一個外部的CSS檔案中，甚至可以在同一個HTML文檔内部引用多個外部樣式表。
當同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊于一個新的虛拟樣式表中，其中4）擁有最高的優先權。
1）浏覽器預設設定。
2）外部樣式表。
3）内部樣式表（位于
标簽内部）。
4）内聯樣式（在HTML元素内部）。
3.4.1 Web中樣式的幾種寫法
當浏覽器讀到一個樣式表時，會根據它來格式化HTML文檔。插入樣式表的方法有3種。
第1種：外部樣式表
當樣式需要應用于很多頁面時，外部樣式表是理想的選擇。在使用外部樣式表時，你可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用标簽連結到樣式表。标簽在（文檔的）頭部，代碼示例如下：
<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;
} <view>
<text class='mytext01'>文本内容1</text> <!--第1種樣式定義：小程式預設樣式寫法-->
<text style='color:blue;'>文本内容2</text><!--第2種樣式定義：樣式寫在元件裡-->
<text class='mytext03'>文本内容3</text><!--第3種樣式定義：外部定義樣式，然後引用-->
</view> @import '/style/mycss.wxss';
/*第3種樣式定義：外部定義樣式，然後引用*/
.mytext01{
color: red; /*第1種樣式定義：小程式預設樣式寫法*/
} 效果如圖3-5所示。
3.5 背景顔色
CSS允許應用純色作為背景。
可以使用background-color屬性為元素設定背景色。該屬性接受任何合法的顔色值。
根據這條規則把元素的背景設定為灰色，代碼示例如下：
p {background-color: gray;} 如果希望背景色從元素中的文本與外邊框有一定的空隙，隻需增加一些内邊距，代碼示例如下：
p {background-color: gray; padding: 20px;} 可以為所有元素設定背景色，包括從body到em和a等行内元素。
background-color不能繼承，其預設值是transparent。transparent有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。
下面舉例說明在小程式中定義view元件和text元件的背景。
<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> .cls01{
background-color: gainsboro;
}
.cls02{
background-color: goldenrod;
}
.cls3-1{
background-color: oldlace;
}
.cls3-2{
background-color: orange;
} 背景顔色使用效果如圖3-6所示。
3.6 文本
CSS文本屬性可定義文本的外觀。通過文本屬性，可以改變文本的顔色、字元間距、對齊文本、裝飾文本、對文本進行縮進，等等。
3.6.1 水準對齊（text-align）
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）來确定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。
下面舉例說明如何在微信小程式中定義text文本在view中的水準對齊方式和兩端對齊文本。
<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> 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）
把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元素的縮進值。
根據基礎文法，下面在微信小程式中實作文本的縮進。
<view class='cls1'>
文本内容（塊級元素支援縮進）
</view>
<view >
<text class='cls2'>文本内容（行内元素不支援縮進）</text>
</view>
<view class='cls3'>
<text>文本内容（文本縮進）</text>
</view> /*縮進文本*/
.cls1{
text-indent: 2em; /*縮進2個字距*/
}
.cls2{
text-indent: 2em;
/*可以為所有塊級元素應用text-indent，但無法将該屬性應用于行内元素*/
}
.cls3{
text-indent: 2em;
} 縮進文本效果如圖3-8所示。
3.6.4 文本裝飾（text-decoration）
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;} 如果顯式地用這樣一個規則去掉連結的下劃線，那麼錨（連結文字）與正常文本之間在視覺上的唯一差别就是顔色（至少預設是這樣的，不過也不能完全保證其顔色肯定有差別）。
根據基礎文法，下面在微信小程式中實作如何定義文本的頂端線條、底部線條、中間貫穿線。
說明：text是行内元素，是以這裡都是指一行；如果想每個text一行，需要在每個text外面加上view，view是塊級元素，每個view自成一行。
<view>
<text class='cls1'>頂端線條</text>
<text class='cls2'>底部線條</text>
<text class='cls3'>中間貫穿線</text>
</view> view{
margin-top: 10px; /*距離頂部的外邊距*/
}
/*文本裝飾*/
.cls1{
text-decoration: overline; /*上劃線*/
}
.cls2{
text-decoration: underline; /*下劃線*/
}
.cls3{
text-decoration: line-through; /*中間畫一個貫穿線*/
} 文本裝飾效果如圖3-9所示。
3.6.5 單詞間隔（text-justify）
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）
text-overflow屬性規定當文本溢出包含元素時應當怎麼辦。
屬性值如下：
根據基礎文法，下面在微信小程式中實作文本超出寬度後隐藏文本，并在後面跟上省略号。
<view class='cls'>
小程式是一種不用下載下傳就能使用的應用，也是一項門檻非常高的創新，經過将近兩年的發展，已經構造了新的小程式開發環境和開發者生态。
</view> .cls{
width:19em; /*定義寬度*/
overflow: hidden;
white-space: nowrap; /*不換行，如果換行，則不會出現省略号*/
text-overflow: ellipsis;
} 文本溢出效果如圖3-10所示。
3.6.7 文本陰影（text-shadow）
在CSS3中，可利用text-shadow屬性向文本添加一個或多個陰影。該屬性是逗号分隔的陰影清單，每個陰影具有兩個或三個長度值和一個可選的顔色值。省略的長度是0。屬性值如下：
根據基礎文法，下面在微信小程式中實作文本的不同陰影效果。
<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.6.8 字元轉換（text-transform）
text-transform屬性處理文本的大小寫。
作為一個屬性，text-transform可能無關緊要，不過，如果突然決定把所有h1元素變為大寫，這個屬性就很有用。你不必單獨修改所有h1元素的内容，隻需使用text-transform完成這個修改，代碼示例如下：
h1 {text-transform: uppercase} 使用text-transform有兩方面的好處。首先，隻需寫一個簡單的規則就能完成這個修改，而無須修改h1元素本身。其次，如果你以後決定将所有大小寫再切換為原來的大小寫，可以更容易地完成。
根據基礎文法，下面在微信小程式中實作字元的大小寫轉換。
<view class='cls1'> <!--通過樣式轉換成全部大寫-->
huang ju HUA
</view>
<view class='cls2'> <!--通過樣式轉換成全部小寫-->
huang ju HUA
</view>
<view class='cls3'> <!--通過樣式轉換成單詞首字母大寫-->
huang ju HUA
</view> .cls1{
text-transform: uppercase; /*大寫*/
}
.cls2{
text-transform:lowercase; /*小寫*/
}
.cls3{
text-transform: capitalize;
/*首字母大寫*/
} 字元轉換效果如圖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）
word-break屬性規定自動換行的處理方法。通過使用word-break屬性，可以讓浏覽器實作在任意位置的換行。屬性說明如下：
根據基礎文法，下面在微信小程式中實作文本裡面換行。
<view>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view>
<view class='cls1'>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view> view{
width: 150px;
border: 1rpx solid gainsboro;
margin: 5px;
}
.cls1{
word-break: break-all; /*允許在單詞内換行。*/
} 自動換行效果如圖3-13所示。
3.6.11 長詞換行（word-wrap）
word-wrap屬性允許長單詞或URL位址換行到下一行。屬性值說明如下：
根據基礎文法，下面在微信小程式中實作文本中的長單詞換行。
<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> 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.6.12 單詞間隔（word-spacing）
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> 屬性值說明如下：
實根據基礎文法，下面在微信小程式中實作對單詞的間隔（中文無效）的定義。
<view>
This is some text。這裡是一些文本。
</view>
<view class='da'>
This is some text。這裡是一些文本。
</view>
<view class='xiao'>
This is some text。這裡是一些文本。
</view> .da{
word-spacing: 10px; /*增加字（單詞）之間*/
}
.xiao{
word-spacing: -0.5em; /*減少字（單詞）之間*/
} 單詞間隔效果如圖3-15所示。
3.6.13 字母間隔（letter-spacing）
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> 根據基礎文法，下面在微信小程式中實作對文本字之間間隔的定義。
<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.6.14 文本方向（direction）
如果你閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的排列方向。并不是所有語言都如此。我們知道古漢語就是從右向左閱讀，當然還包括希伯來語和阿拉伯語等。CSS2引入了direction屬性來描述文字的方向性。
direction屬性影響塊級元素中文本的書寫方向、表中列布局的方向、内容水準填充其元素框的方向，以及兩端對齊元素中最後一行的位置。
對于行内元素，隻有當unicode-bidi屬性設定為embed或bidi-override時才會應用direction屬性。
direction屬性值說明如下：
值 描 述
根據基礎文法，下面在微信小程式中實作文本方向的效果。
<view>
Some text. Left-to-right direction.一些文本-從左到右
</view>
<view class='myrtl'>
Some text. Right-to-left direction.一些文本-從右到左
</view> .myrtl{
direction: rtl; /*從右到左*/
} 文本方向效果如圖3-17所示。
3.7 字型
CSS字型屬性定義文本字型的大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
3.7.1 字型大小（font-size）
管理文本大小的能力在Web設計領域很重要。font-size值用于設定字型的大小。但是，不要通過調整文本大小使段落看上去像标題，或者使标題看上去像段落。請始終使用正确的HTML标題，比如使用
-
來标記标題，使用
來标記段落。
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;} 代碼非常有效。在所有浏覽器中可以顯示相同的文本大小，并允許所有浏覽器縮放文本的大小。
根據基礎文法，下面在微信小程式中實作對字型的大小的定義。
<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> .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.7.2 字型風格（font-style）
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;} 根據基礎文法，下面在微信小程式中實作對字型風格的定義。
<view>
<text>預設字型</text>
</view>
<view >
<text class='cls1'>字型italic</text>
</view>
<view >
<text class='cls2'>字型oblique</text>
</view> .cls1{
font-style: italic;
}
.cls2{
font-style: oblique;
} 字型風格效果如圖3-19所示。
3.7.3 字型變形（font-variant）
font-variant屬性可以設定小型大寫字母。小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用了不同大小的大寫字母。
p {font-variant:small-caps;} 根據基礎文法，下面在微信小程式中實作對小型大寫字母的定義。
<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> .cls1{
font-variant: normal;
}
.cls2{
font-variant: small-caps;
} 字型變形效果如圖3-20所示。
3.7.4 字型加粗（font-weight）
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;} 根據基礎文法，下面在微信小程式中實作對字型加粗的定義。
<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> .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.8 輪廓
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
CSS的outline屬性規定元素輪廓的樣式、顔色和寬度。可以設定的屬性分别是（按順序）：outline-color、outline-style、outline-width。如果不設定其中的某個值，也不會出問題，比如outline:solid #ff0000;也是允許的。
CSS輪廓屬性值如下：
outline-color屬性值如下：
outline-style屬性值如下：
outline-width屬性值如下：
根據基礎文法，下面在微信小程式中設定text和view的輪廓樣式。這裡文字外圍的點線就是我們所實作的輪廓樣式。
<view class='cls1'>
這裡是文本内容
</view>
<view>
<text class='cls1'>這裡是文本内容</text>
</view> .cls1{
margin: 30px;
border: 3px solid gainsboro;
outline: thick dotted orangered;
} 輪廓效果如圖3-22所示。