设置 CSS 文本格式

CSS 中的文本属性允许您为日语网页（例如 Word 文档）定义字符间距、对齐方式、缩进等。CSS 中常用的文本属性包括：

text-align：设置文本的水平对齐方式。
text-decoration：设置文本装饰。
text-transform：设置中英文文本大小写如何转换。
text-indent：设置文本的缩进方式。
行高：设置行高。
letter-spacing：设置字母间距。
word-spacing：设置单词之间的间距（日语中禁用）。
text-shadow：设置文本阴影。
Vertical-align：设置文本的垂直对齐方式。
空白：设置如何处理文本中的空白。
方向：设置文本的方向。

1. 文本对齐

text-align 属性用于设置元素的日语文本的水平对齐方式，该属性的可选值有：

价值	解释
左边	默认，左对齐
正确的	右对齐
中心	中心对齐
证明合法	证明合法
继承	从父元素继承 text-align 属性的值

[示例] 使用text-align 属性设置文本的水平对齐方式。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*見やすさを重視して、p要素に境界線を設定しました*/
        }
        .text1 {
            text-align: left;    /*左揃え*/
        }
        .text2 {
            text-align: right;    /*右揃え*/
        }
        .text3 {
            text-align: center;    /*中央揃え*/
        }
    </style>
</head>
<body>
    <p class="text1">左揃え</p>
    <p class="text2">右揃え</p>
    <p class="text3">中央揃え</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_521”对齐=“aligncenter”宽度=“1024”] 图：Text-align属性演示

图：Text-align 属性演示[/caption]

当 text-align 设置为 justify 时，每行文本都会被拉伸（字符之间有更多空间），以便每行文本具有相同的宽度（除了最后一行）。这种排列方式通常用于杂志、杂志等出版物中。报纸。需要注意的是，如果元素中的文本少于一行，则不能两端对齐（默认情况下，它显示为左对齐）。仅当元素内的文本足够长以导致元素内自动换行时，除最后一行之外的所有文本都会被对齐。如下例所示：

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*文本の配置方法をより明確にするため、pタグにフレームを設定します*/
        }
        .text {
            width: 125px;
            text-align: justify;        /*両端揃えを設定します*/
        }
    </style>
</head>
<body>
    <p class="text">両端揃え、両端揃え</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_522”对齐=“aligncenter”宽度=“419”]

图：理由演示[/caption]

2. 文字装饰

text-decoration 属性用于设置或去除文本装饰，最常见的方法是使用text-decoration 属性去除<a>标签的默认下划线。向元素内的文本添加实现突出显示效果所需的装饰。

text-decoration 属性的可选值为：

价值	解释
没有任何	默认值，标准文本，无附加装饰，可用于去除已有的文本装饰
强调	在文本下方添加下划线
上划线	在文本上方添加滑动线
直通	定义一条在文本中间穿过文本的线（类似于删除线）
眨	定义闪烁文本（目前主流浏览器不支持）。
继承	继承父元素的text-decoration属性值

[示例] 使用text-decoration属性为文本添加装饰。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-decoration: none;
    }
    .underline {
        text-decoration: underline;
    }
    .overline {
        text-decoration: overline;
    }
    .line-through {
        text-decoration: line-through;
    }
    </style>
</head>
<body>
        <p class="none">装飾なしのテキスト</p>
        <p class="underline">下線の付いたテキスト</p>
        <p class="overline">上線の付いたテキスト</p>
        <p class="line-through">取り消し線の付いたテキスト</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_523”对齐=“aligncenter”宽度=“510”]

图：文字装饰属性演示[/caption]

3. 文本转换

text-transform 属性用于控制文本中英文字母的大小写，该属性可以让你将文本中的英文字母转换为小写、大写或大写，而无需改变原始文本。

text-transform 属性的可选值为：

价值	解释
没有任何	默认值，显示原文，不改变文字英文
大写	将文本中的所有单词更改为以大写字母开头
大写	将文本中的所有字母字符更改为大写
小写	将文本中的所有字母字符更改为小写
继承	从父元素继承 text-transform 属性的值

[示例] 使用text-transform定义中英文文本的大小写。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-transform: none;
    }
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    .capitalize {
        text-transform: capitalize;
    }
    </style>
</head>
<body>
    <p>原文： text-transform &emsp;<span class="none">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="uppercase">変換後：TEXT-TRANSFROM</span></p>
    <p>原文： TEXT-TRANSFROM &emsp;<span class="lowercase">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="capitalize">変換後：Text-Transform</span></p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_524”对齐=“aligncenter”宽度=“787”] 图：文本转换属性demo

图：文本转换属性演示[/caption]

4. 文字缩进

text-indent 属性用于在元素中缩进元素中的第一行文本，该属性的可选值有：

价值	解释
长度	以固定值和单位的形式定义压痕距离（例如，2em）。默认值为 0。
%	将缩进距离定义为基于父元素宽度的百分比
继承	从父元素继承 text-indent 属性的值

提示：无论使用特定值还是百分比，都可以设置负值，但这样做可能会导致文本内容超出元素区域。

[示例] 使用text-indent为文本添加首行缩进效果。

 <!DOCTYPE html>
<html>
<head>
<style>
    p {
        border: 1px solid #ccc;
        text-indent:2em;
    }
</style>
</head>
<body>
    <p>text-indentプロパティは、要素内のテキストに首行をインデントする効果を追加するために使用されます。左側からインデントするのか、右側からインデントするのかは、directionプロパティで定義されたテキストの方向に依存します。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_525”对齐=“aligncenter”宽度=“1024”]

图：文本缩进属性演示[/caption]

注意：文本是从左缩进还是从右缩进取决于direction属性定义的文本方向。

5、行高

line-height属性用于设置文本的行高，该属性的可选值有：

价值	解释
普通的	默认值，使用默认行高，不设置额外行高
数字	将行高设置为特定数字。该数字乘以当前字体大小，所得值将设置为行高。
长度	将固定行高设置为数字和单位
%	将行高设置为基于当前字体大小的百分比
继承	继承父元素的line-height属性值

[示例] 使用line-height 设置文本的行高。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p.small {
        line-height: 0.8;
    }
    p.big {
        line-height: 200%;
    }
    </style>
</head>
<body>
    <p>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
    </p>
    <p class="small">
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
    </p>
    <p class="big">
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_526”对齐=“aligncenter”宽度=“767”]

图：行高属性演示[/caption]

6. 字符间距

letter-spacing 属性用于设置字母之间的间距，该属性的可选值有：

价值	解释
普通的	默认值表示字符之间没有多余的空格
长度	将字符之间的固定间距设置为值加单位（允许负值）
继承	从父元素继承 letter-spacing 属性的值

[示例] 要设置字母之间的间距，请使用 letter-spacing 属性。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        letter-spacing: 2px;
    }
    </style>
</head>
<body>
    <p>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_527”对齐=“aligncenter”宽度=“1024”]

图：字符间距属性演示[/caption]

7. 字间距

word-spacing 属性用于设置单词之间的间距，但在日语中不起作用该属性的可选值有：

价值	解释
普通的	默认值。意味着单词之间没有多余的空格
长度	设置单词之间的固定间距为数字和单位（允许负值）
继承	从父元素继承 word-spacing 属性的值

[示例] 使用 word-spacing 属性设置字符之间的间距。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        word-spacing: 2em;
    }
    </style>
</head>
<body>
    <p>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_528”对齐=“aligncenter”宽度=“1024”] 图：Word-spacing属性演示

图：Word-spacing 属性演示[/caption]

8.文字阴影

text-shadow 属性用于为文本添加阴影和模糊效果。该属性的语法为：

text-shadow：h-阴影 v-阴影模糊颜色；

语法解释如下：

h-shadow：必需的值。设置阴影的水平位置。允许负值。
v-shadow：必需的值。设置阴影的垂直位置。允许负值。
模糊：可选值。设置模糊距离。
颜色：可选值。设置阴影颜色。

注意：text-shadow属性可以设置一种或多种阴影效果。您需要做的就是用逗号分隔每个组的值,类似于背景属性的用法）。

[示例] 使用text-shadow属性设置文本阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        text-shadow: 2px 15px red,
                     0px -15px 5px blue; /* テキストに影とぼかしを追加するtext-shadowプロパティ */
    }
    </style>
</head>
<body>
    <p>text-shadow 属性は、テキストに影とボケ効果を追加することができます</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_529”对齐=“aligncenter”宽度=“979”]

图：Text-shadow属性演示[/caption]

9. 垂直对齐

Vertical-align 属性用于定义元素内文本的垂直对齐方式，该属性的可选值有：

价值	解释
基线	默认情况下，将元素的基线与父元素的基线对齐
子	下标对齐降低了元素相对于其父元素的基线的基线
极好的	上标放置，使元素的基线相对于其父元素的基线升高
顶部	顶部对齐，将元素行内框的顶部与行框的顶部对齐。
文本顶部	将文本顶部和元素顶部与父元素字体的顶部对齐
中间	中心对齐通常用于图像，将图像的垂直中心线与文本的中心线（文本元素的行内框的中心线）对齐。
底部	底部对齐，将元素行内框的顶部与行框的底部对齐。
文本底部	对齐文本的底部。这会将元素的内联框的底部与行框的底行对齐。
长度	以数字和单位的形式（可以为负数）设置元素基线与父元素基线之间的距离。
%	使用“line-height”属性的百分比值来排列此元素。允许负值
继承	继承父元素的vertical-align属性值

上表提到了基线、底线、顶线、中线的概念，但它们到底指的是什么？

上排：日语汉字的顶部。
中线：穿过小写字母x中心的线。
基线：小写 x 的底边。
结论：日语汉字的下端。
内容区域：指以底行和顶行为界的区域。
行高：内容区域和基于内容区域对称增长的空白区域称为行高。它也可以被认为是相邻文本行的基线之间的距离。
行距：指相邻文本行之间上一个文本行的底行和下一个文本行的顶行之间的距离。
行内框：浏览器渲染模型中的一个概念，无法显示，但存在且高度与行高相同。
线框：类似于同一条线的内框，线框是指一条线的虚拟矩形框，也是一个浏览器渲染模式的概念。行框的高度等于行内所有元素中行内框的最大值（以行高最大的行内框为基准；其他行内框使用自己的对齐基准）。方法，最终计算出行框的高度）。

[示例] 使用vertical-align属性设置元素的垂直对齐方式。

 <!DOCTYPE html>
<html>
<head>
    <style>
    img.btn {
        vertical-align: super;
    }
    img.top {
        vertical-align: text-top;
    }
    </style>
</head>
<body>
    <p>vertical-alignの<img class="btn" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
    <p>vertical-alignの<img class="top" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_530”对齐=“aligncenter”宽度=“1024”] 图：垂直对齐属性演示

图：Vertical-align 属性演示[/caption]

10.空白

空白属性用于配置如何处理元素内的空白，该属性的可选值为：

价值	解释
普通的	默认情况下，文本中的空格被忽略
前	保留文本内的空白，类似于`<pre>`标记的效果
诺拉普	文本显示在单行上，不会换行，直到遇到`<br>`标记。
预包装	保留文本中的空白但通常换行
预线	合并文本中的空格但保留换行符
继承	从父元素继承空白属性值

[示例] 使用空白属性来处理元素内的空白。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p>
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。                         
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_531”对齐=“aligncenter”宽度=“975”]

图：空白属性演示[/caption]

Direction属性用于设置文本的方向，该属性的可选值有：

价值	解释
左转	默认情况下，文本从左到右输出
回程	文本从右向左输出
继承	从父元素继承方向属性值

[示例] 使用direction属性设置文本的方向。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .ltr {
            direction: ltr;
        }
        .rtl {
            direction: rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">direction 属性はテキストの方向を設定するために使用されます</p>
    <p class="rtl">direction 属性はテキストの方向を設定するために使用されます</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_532”对齐=“aligncenter”宽度=“1024”]

图：方向属性演示[/caption]

JSON

CSS 中的文本属性允许您为日语网页（例如 Word 文档）定义字符间距、对齐方式、缩进等。CSS 中常用的文本属性包括：

text-align：设置文本的水平对齐方式。
text-decoration：设置文本装饰。
text-transform：设置中英文文本大小写如何转换。
text-indent：设置文本的缩进方式。
行高：设置行高。
letter-spacing：设置字母间距。
word-spacing：设置单词之间的间距（日语中禁用）。
text-shadow：设置文本阴影。
Vertical-align：设置文本的垂直对齐方式。
空白：设置如何处理文本中的空白。
方向：设置文本的方向。

1. 文本对齐

text-align 属性用于设置元素的日语文本的水平对齐方式，该属性的可选值有：

价值	解释
左边	默认，左对齐
正确的	右对齐
中心	中心对齐
证明合法	证明合法
继承	从父元素继承 text-align 属性的值

[示例] 使用text-align 属性设置文本的水平对齐方式。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*見やすさを重視して、p要素に境界線を設定しました*/
        }
        .text1 {
            text-align: left;    /*左揃え*/
        }
        .text2 {
            text-align: right;    /*右揃え*/
        }
        .text3 {
            text-align: center;    /*中央揃え*/
        }
    </style>
</head>
<body>
    <p class="text1">左揃え</p>
    <p class="text2">右揃え</p>
    <p class="text3">中央揃え</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_521”对齐=“aligncenter”宽度=“1024”] 图：Text-align属性演示

图：Text-align 属性演示[/caption]

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*文本の配置方法をより明確にするため、pタグにフレームを設定します*/
        }
        .text {
            width: 125px;
            text-align: justify;        /*両端揃えを設定します*/
        }
    </style>
</head>
<body>
    <p class="text">両端揃え、両端揃え</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_522”对齐=“aligncenter”宽度=“419”]

图：理由演示[/caption]

2. 文字装饰

text-decoration 属性的可选值为：

价值	解释
没有任何	默认值，标准文本，无附加装饰，可用于去除已有的文本装饰
强调	在文本下方添加下划线
上划线	在文本上方添加滑动线
直通	定义一条在文本中间穿过文本的线（类似于删除线）
眨	定义闪烁文本（目前主流浏览器不支持）。
继承	继承父元素的text-decoration属性值

[示例] 使用text-decoration属性为文本添加装饰。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-decoration: none;
    }
    .underline {
        text-decoration: underline;
    }
    .overline {
        text-decoration: overline;
    }
    .line-through {
        text-decoration: line-through;
    }
    </style>
</head>
<body>
        <p class="none">装飾なしのテキスト</p>
        <p class="underline">下線の付いたテキスト</p>
        <p class="overline">上線の付いたテキスト</p>
        <p class="line-through">取り消し線の付いたテキスト</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_523”对齐=“aligncenter”宽度=“510”]

图：文字装饰属性演示[/caption]

3. 文本转换

text-transform 属性用于控制文本中英文字母的大小写，该属性可以让你将文本中的英文字母转换为小写、大写或大写，而无需改变原始文本。

text-transform 属性的可选值为：

价值	解释
没有任何	默认值，显示原文，不改变文字英文
大写	将文本中的所有单词更改为以大写字母开头
大写	将文本中的所有字母字符更改为大写
小写	将文本中的所有字母字符更改为小写
继承	从父元素继承 text-transform 属性的值

[示例] 使用text-transform定义中英文文本的大小写。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-transform: none;
    }
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    .capitalize {
        text-transform: capitalize;
    }
    </style>
</head>
<body>
    <p>原文： text-transform &emsp;<span class="none">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="uppercase">変換後：TEXT-TRANSFROM</span></p>
    <p>原文： TEXT-TRANSFROM &emsp;<span class="lowercase">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="capitalize">変換後：Text-Transform</span></p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_524”对齐=“aligncenter”宽度=“787”] 图：文本转换属性demo

图：文本转换属性演示[/caption]

4. 文字缩进

text-indent 属性用于在元素中缩进元素中的第一行文本，该属性的可选值有：

价值	解释
长度	以固定值和单位的形式定义压痕距离（例如，2em）。默认值为 0。
%	将缩进距离定义为基于父元素宽度的百分比
继承	从父元素继承 text-indent 属性的值

提示：无论使用特定值还是百分比，都可以设置负值，但这样做可能会导致文本内容超出元素区域。

[示例] 使用text-indent为文本添加首行缩进效果。

 <!DOCTYPE html>
<html>
<head>
<style>
    p {
        border: 1px solid #ccc;
        text-indent:2em;
    }
</style>
</head>
<body>
    <p>text-indentプロパティは、要素内のテキストに首行をインデントする効果を追加するために使用されます。左側からインデントするのか、右側からインデントするのかは、directionプロパティで定義されたテキストの方向に依存します。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_525”对齐=“aligncenter”宽度=“1024”]

图：文本缩进属性演示[/caption]

注意：文本是从左缩进还是从右缩进取决于direction属性定义的文本方向。

5、行高

line-height属性用于设置文本的行高，该属性的可选值有：

价值	解释
普通的	默认值，使用默认行高，不设置额外行高
数字	将行高设置为特定数字。该数字乘以当前字体大小，所得值将设置为行高。
长度	将固定行高设置为数字和单位
%	将行高设置为基于当前字体大小的百分比
继承	继承父元素的line-height属性值

[示例] 使用line-height 设置文本的行高。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p.small {
        line-height: 0.8;
    }
    p.big {
        line-height: 200%;
    }
    </style>
</head>
<body>
    <p>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
    </p>
    <p class="small">
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
    </p>
    <p class="big">
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_526”对齐=“aligncenter”宽度=“767”]

图：行高属性演示[/caption]

6. 字符间距

letter-spacing 属性用于设置字母之间的间距，该属性的可选值有：

价值	解释
普通的	默认值表示字符之间没有多余的空格
长度	将字符之间的固定间距设置为值加单位（允许负值）
继承	从父元素继承 letter-spacing 属性的值

[示例] 要设置字母之间的间距，请使用 letter-spacing 属性。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        letter-spacing: 2px;
    }
    </style>
</head>
<body>
    <p>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_527”对齐=“aligncenter”宽度=“1024”]

图：字符间距属性演示[/caption]

7. 字间距

word-spacing 属性用于设置单词之间的间距，但在日语中不起作用该属性的可选值有：

价值	解释
普通的	默认值。意味着单词之间没有多余的空格
长度	设置单词之间的固定间距为数字和单位（允许负值）
继承	从父元素继承 word-spacing 属性的值

[示例] 使用 word-spacing 属性设置字符之间的间距。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        word-spacing: 2em;
    }
    </style>
</head>
<body>
    <p>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_528”对齐=“aligncenter”宽度=“1024”] 图：Word-spacing属性演示

图：Word-spacing 属性演示[/caption]

8.文字阴影

text-shadow 属性用于为文本添加阴影和模糊效果。该属性的语法为：

text-shadow：h-阴影 v-阴影模糊颜色；

语法解释如下：

h-shadow：必需的值。设置阴影的水平位置。允许负值。
v-shadow：必需的值。设置阴影的垂直位置。允许负值。
模糊：可选值。设置模糊距离。
颜色：可选值。设置阴影颜色。

注意：text-shadow属性可以设置一种或多种阴影效果。您需要做的就是用逗号分隔每个组的值,类似于背景属性的用法）。

[示例] 使用text-shadow属性设置文本阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        text-shadow: 2px 15px red,
                     0px -15px 5px blue; /* テキストに影とぼかしを追加するtext-shadowプロパティ */
    }
    </style>
</head>
<body>
    <p>text-shadow 属性は、テキストに影とボケ効果を追加することができます</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_529”对齐=“aligncenter”宽度=“979”]

图：Text-shadow属性演示[/caption]

9. 垂直对齐

Vertical-align 属性用于定义元素内文本的垂直对齐方式，该属性的可选值有：

价值	解释
基线	默认情况下，将元素的基线与父元素的基线对齐
子	下标对齐降低了元素相对于其父元素的基线的基线
极好的	上标放置，使元素的基线相对于其父元素的基线升高
顶部	顶部对齐，将元素行内框的顶部与行框的顶部对齐。
文本顶部	将文本顶部和元素顶部与父元素字体的顶部对齐
中间	中心对齐通常用于图像，将图像的垂直中心线与文本的中心线（文本元素的行内框的中心线）对齐。
底部	底部对齐，将元素行内框的顶部与行框的底部对齐。
文本底部	对齐文本的底部。这会将元素的内联框的底部与行框的底行对齐。
长度	以数字和单位的形式（可以为负数）设置元素基线与父元素基线之间的距离。
%	使用“line-height”属性的百分比值来排列此元素。允许负值
继承	继承父元素的vertical-align属性值

上表提到了基线、底线、顶线、中线的概念，但它们到底指的是什么？

上排：日语汉字的顶部。
中线：穿过小写字母x中心的线。
基线：小写 x 的底边。
结论：日语汉字的下端。
内容区域：指以底行和顶行为界的区域。
行高：内容区域和基于内容区域对称增长的空白区域称为行高。它也可以被认为是相邻文本行的基线之间的距离。
行距：指相邻文本行之间上一个文本行的底行和下一个文本行的顶行之间的距离。
行内框：浏览器渲染模型中的一个概念，无法显示，但存在且高度与行高相同。
线框：类似于同一条线的内框，线框是指一条线的虚拟矩形框，也是一个浏览器渲染模式的概念。行框的高度等于行内所有元素中行内框的最大值（以行高最大的行内框为基准；其他行内框使用自己的对齐基准）。方法，最终计算出行框的高度）。

[示例] 使用vertical-align属性设置元素的垂直对齐方式。

 <!DOCTYPE html>
<html>
<head>
    <style>
    img.btn {
        vertical-align: super;
    }
    img.top {
        vertical-align: text-top;
    }
    </style>
</head>
<body>
    <p>vertical-alignの<img class="btn" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
    <p>vertical-alignの<img class="top" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_530”对齐=“aligncenter”宽度=“1024”] 图：垂直对齐属性演示

图：Vertical-align 属性演示[/caption]

10.空白

空白属性用于配置如何处理元素内的空白，该属性的可选值为：

价值	解释
普通的	默认情况下，文本中的空格被忽略
前	保留文本内的空白，类似于`<pre>`标记的效果
诺拉普	文本显示在单行上，不会换行，直到遇到`<br>`标记。
预包装	保留文本中的空白但通常换行
预线	合并文本中的空格但保留换行符
继承	从父元素继承空白属性值

[示例] 使用空白属性来处理元素内的空白。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p>
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。                         
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。
    </p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_531”对齐=“aligncenter”宽度=“975”]

图：空白属性演示[/caption]

Direction属性用于设置文本的方向，该属性的可选值有：

价值	解释
左转	默认情况下，文本从左到右输出
回程	文本从右向左输出
继承	从父元素继承方向属性值

[示例] 使用direction属性设置文本的方向。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .ltr {
            direction: ltr;
        }
        .rtl {
            direction: rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">direction 属性はテキストの方向を設定するために使用されます</p>
    <p class="rtl">direction 属性はテキストの方向を設定するために使用されます</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_532”对齐=“aligncenter”宽度=“1024”]

图：方向属性演示[/caption]

JSON