带你读《微信小程序商城开发:界面设计实战》之三:小程序样式基础-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

带你读《微信小程序商城开发:界面设计实战》之三:小程序样式基础

简介: 本书是讲解微信小程序前端界面设计的入门书籍,有详细的理论知识、布局分析、逻辑分析,还有丰富的实战案例以及详细的代码解说,具有很强的实用性。

点击查看第一章
点击查看第二章
第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也增加了一个背景颜色和红色文字。


image.png

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所示。

image.png

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所示。

image.png

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所示。

image.png

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;
}

.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所示。

image.png

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所示。

image.png

3.6 文本

CSS文本属性可定义文本的外观。通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进,等等。

3.6.1 水平对齐(text-align)

1.基础语法
text-align是一个基本的属性,它会影响一个元素中文本行互相之间的对齐方式。
西方语言都是从左向右读的,所以text-align的默认值是left。文本在左边界对齐,右边界呈锯齿状(也称为“从左到右”文本)。对于如希伯来语和阿拉伯语之类的语言,text-align默认为right,因为这些语言是从右向左读的。顾名思义,center会使每个文本行在元素中居中排列。
text-align属性值如下:
image.png
将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
(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>

.wxss文件代码示例如下:

text{
  background-color: gainsboro;
}

/*水平对齐*/
.mycenter{
  text-align: center;  /*居中*/
}
.myright{
  text-align: right;    /*居右*/
}
.myjustify{
  text-align:  justify;    /*实现两端对齐文本效果*/
}

水平对齐效果如图3-7所示。

image.png

3.6.2 文本最后行对齐(text-align-last)

text-align-last属性规定如何对齐文本的最后一行。
text-align-last属性只有在text-align属性设置为justify时才起作用。
text-align-last属性值如下:
image.png

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所示。

image.png

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所示。

image.png

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属性值如下:
image.png

3.6.6 文本溢出(text-overflow)

1.基础语法
text-overflow属性规定当文本溢出包含元素时应当怎么办。
属性值如下:
image.png
2.小程序应用
根据基础语法,下面在微信小程序中实现文本超出宽度后隐藏文本,并在后面跟上省略号。
.wxml文件代码示例如下:

<view class='cls'>
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。
</view>

.wxss文件代码示例如下:

.cls{
  width:19em;         /*定义宽度*/
  overflow: hidden;
  white-space: nowrap;     /*不换行,如果换行,则不会出现省略号*/
  text-overflow: ellipsis;
}

文本溢出效果如图3-10所示。

image.png

3.6.7 文本阴影(text-shadow)

1.基础语法
在CSS3中,可利用text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影具有两个或三个长度值和一个可选的颜色值。省略的长度是0。属性值如下:
image.png
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所示。

image.png

3.6.8 字符转换(text-transform)

1.基础语法
text-transform属性处理文本的大小写。
属性值如下:
image.png
作为一个属性,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所示。

image.png

3.6.9 处理空白符(white-space)

white-space属性负责处理元素内的空白。
这个属性声明在建立布局过程中如何处理元素中的空白符。值pre-wrap和pre-line是CSS 2.1中新增的。所有浏览器都支持white-space属性。
white-space可能的属性值如下:
image.png
任何的版本的Internet Explorer(包括IE8)都不支持属性值"inherit"。
小程序应用参考3.6.6节中的实例。

3.6.10 自动换行(word-break)

1.基础语法
word-break属性规定自动换行的处理方法。通过使用word-break属性,可以让浏览器实现在任意位置的换行。属性说明如下:
image.png
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所示。

image.png

3.6.11 长词换行(word-wrap)

1.基础语法
word-wrap属性允许长单词或URL地址换行到下一行。属性值说明如下:
image.png
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所示。

image.png

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>

属性值说明如下:
image.png
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所示。

image.png

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>

属性值说明如下:
image.png
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所示。

image.png

3.6.14 文本方向(direction)

1.基础语法
如果你阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的排列方向。并不是所有语言都如此。我们知道古汉语就是从右向左阅读,当然还包括希伯来语和阿拉伯语等。CSS2引入了direction属性来描述文字的方向性。
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向,以及两端对齐元素中最后一行的位置。
对于行内元素,只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
direction属性值说明如下:
值 描  述
image.png
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所示。

image.png

3.7 字体

CSS字体属性定义文本字体的大小、加粗、风格(如斜体)和变形(如小型大写字母)。

3.7.1 字体大小(font-size)

1.基础语法
管理文本大小的能力在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;}

代码非常有效。在所有浏览器中可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
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.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所示。

image.png

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所示。

image.png

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所示。

image.png

3.8 轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
1.基础语法
CSS的outline属性规定元素轮廓的样式、颜色和宽度。可以设置的属性分别是(按顺序):outline-color、outline-style、outline-width。如果不设置其中的某个值,也不会出问题,比如outline:solid #ff0000;也是允许的。
CSS轮廓属性值如下:
image.png
outline-color属性值如下:
image.png
outline-style属性值如下:
image.png
outline-width属性值如下:
image.png
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所示。

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接