《CSS教程》05章 文本字符的设定

---

本章讲述行高、行对齐、行的纵向对齐、文字单词间距、首行缩进、空白改行、大小写等。

行高度

line-height: 行高
行高：normal, 数值，带单位的数值，百分比%

s05_01.htm

【CSS】
#sample1 { line-height: normal }
#sample2 { line-height: 1.5 }
#sample3 { line-height: 180% }
em {
  color: #ff3300;
  background-color: #ffffff;
  font-style: normal
}

【HTML】
<h1>文本字符的设定</h1>

<h2>line-height: <em>normal</em></h2>
<p id="sample1">
陈淮说，我印象最深的是总理说的四句话：第一句是，我有主心骨，不会动摇；
第二句是，我每天都关注大学生的签约率；第三句是，就是在疫情最严重的时刻，
我们的改革也没有停步；第四句是，中国经济发展正处于重要的机遇期。
</p>
<h2>line-height: <em>1.5</em></h2>
<p id="sample2">
陈淮说，我印象最深的是总理说的四句话：第一句是，我有主心骨，不会动摇；
第二句是，我每天都关注大学生的签约率；第三句是，就是在疫情最严重的时刻，
我们的改革也没有停步；第四句是，中国经济发展正处于重要的机遇期。
</p>
<h2>line-height: <em>180%</em></h2>
<p id="sample3">
陈淮说，我印象最深的是总理说的四句话：第一句是，我有主心骨，不会动摇；
第二句是，我每天都关注大学生的签约率；第三句是，就是在疫情最严重的时刻，
我们的改革也没有停步；第四句是，中国经济发展正处于重要的机遇期。
</p>

行对齐的设定

text-align: 对齐方式
对齐方式：left，center，right

s05_02.htm

【CSS】
p { font-size: x-large }
#sample1 { text-align: left }
#sample2 { text-align: center }
#sample3 { text-align: right }
em {
  font-style: normal;
  color: #ff3300;
  background-color: #ffffff
}

【HTML】
<p id="sample1">text-align: <em>left</em></p>
<p id="sample2">text-align: <em>center</em></p>
<p id="sample3">text-align: <em>right</em></p>

行的纵向对齐的设定

vertical-align: 纵向对齐方式
纵向对齐方式：
    top               上对齐
    middle            中间对齐
    bottom            下对齐
    baseline          与默认行高想一致
    text-top          与该行字体上对齐(字体高度不等于行高时)
    text-bottom       与该行字体下对齐(字体高度不等于行高时)
    super             与该行的上标对齐
    sub               与该行的下标对齐
    带单位的数值      该行的baseline将或略不计
    百分比%           该行的baseline将或略不计，行高的百分比

s05_03.htm

【CSS】
.vtop { vertical-align: top }
.vmid { vertical-align: middle }
.vbtm { vertical-align: bottom }
em {
  font-style: normal;
  font-weight: bold;
  color: #ff6600;
  background: #ffffff
}
td {
  width: 6em;
  height: 6em;
  text-align: center
}

【HTML】
<p>
vertical-align:
<img class="vmid" src="leaf.gif" width="80" height="80" alt="">
<em>middle</em>
</p>
<p>
vertical-align:
<img src="leaf.gif" width="80" height="80" alt="">
<em class="vtop">top</em>
<em class="vbtm">bottom</em>
</p>

<table border="3">
<tr>
<td class="vtop"><em>top</em></td>
<td class="vmid"><em>middle</em></td>
<td class="vbtm"><em>bottom</em></td>
</tr>
</table>

文字间隔和单词间隔的设定

letter-spacing: 文字间隔
word-spacing:   单词间隔
文字、单词间隔： normal，带单位的数值

s05_04.htm

【CSS】
.sample1 { letter-spacing: 0.5em }
.sample2 { letter-spacing: 1em }
.sample3 { letter-spacing: 2em }
.sample4 { word-spacing: 0.8em }
.sample5 { word-spacing: 1.5em }
em {
  font-style: normal;
  font-weight: bold;
  color: #ff6600;
  background: #ffffff
}

【HTML】
<h1>文字间隔和单词间隔</h1>

<h2>■ letter-spacing</h2>
<p>letter-spacing: <em>normal</em></p>
<p class="sample1">letter-spacing: <em>0.5em</em></p>
<p class="sample2">文字间隔：<em>1em</em></p>
<p class="sample3">文字间隔：<em>2em</em></p>

<h2>■ word-spacing</h2>
<p>It specifies spacing behavior between words.</p>
<p class="sample4">It specifies spacing behavior between words.</p>
<p class="sample5">It specifies spacing behavior between words.</p>

首行缩进的设置

text-indent: 缩进
缩进： 带单位的数值，百分比%

s05_05.htm

【CSS】
#sample1 { text-indent: 1em }
#sample2 { text-indent: 3em }
#sample3 { text-indent: 5em }
em {
  font-style: normal;
  font-weight: bold;
  color: #ff6600;
  background: #ffffff
}

【HTML】
<p>
这是首行缩进的缺省值“<em>0</em>”。
</p>
<p id="sample1">
本行的首行缩进设置为“<em>1em</em>”请改变浏览器宽度看效果。
首行缩进指一段文字的第一行的第一个字向右缩进。
</p>
<p id="sample2">
本行的首行缩进设置为“<em>3em</em>”请改变浏览器宽度看效果。
首行缩进指一段文字的第一行的第一个字向右缩进。
これが「<em>3em</em>」だけインデントされた状態です。
1行目の開始位置を、指定した距離だけ右に移動させます。
</p>
<p id="sample3">
本行的首行缩进设置为“<em>5em</em>”请改变浏览器宽度看效果。
首行缩进指一段文字的第一行的第一个字向右缩进。
</p>

保留空白和回车的设定

white-space:  pre

s05_06.htm

【CSS】
code { white-space: pre }

【HTML】
<p>
<code>
function resetRadio() {
  for(var i = 0; i < document.form1.type.length; i++) {
    if(document.form1.type[i].defaultChecked == true)
      document.form1.type[i].checked = true
    else
      document.form1.type[i].checked = false
  }
}
</code>
</p>

禁止改行的设定

white-space: nowrap

s05_07.htm

【CSS】
.sample1 { white-space: nowrap }

【HTML】
<h1>禁止改行</h1>

<h2>■普通状态</h2>
<p>
white-space属性设定为「nowrap」、这个范围的文字就不能改行。
该属性不设置时为允许改行。本行为改行状态。
</p>

<h2>■ white-space: nowrap</h2>
<p class="sample1">
white-space属性设定为「nowrap」、这个范围的文字就不能改行。
该属性不设置时为允许改行。本行为不改行状态。
</p>

文字大写小写的转换设定

text-transform: 大写，小写的指定
大写，小写的指定：  uppercase   所有文字变成大写
                    lowercase   所有文字变成小写
                    capitalize  各单词的首字母大写

s05_08.htm

【CSS】
#sample1 { text-transform: lowercase }
#sample2 { text-transform: uppercase }
#sample3 { text-transform: capitalize }
h2 {
  color: #ff6600;
  background: #ffffff
}

【HTML】
<h1>大文字和小文字</h1>

<h2>lowercase</h2>
<p id="sample1">
CAPITALIZATION EFFECTS OF AN ELEMENT'S TEXT.
</p>

<h2>uppercase</h2>
<p id="sample2">
capitalization effects of an element's text.
</p>

<h2>capitalize</h2>
<p id="sample3">
capitalization effects of an element's text.
</p>