Heim >Web-Frontend >CSS-Tutorial >So legen Sie Zeilen- und Wortabstände in CSS fest
So legen Sie Zeilen- und Wortabstände in CSS fest
- 醉折花枝作酒筹Original
- 2021-04-09 13:57:206002Durchsuche
In CSS können Sie den Wortabstand über das Attribut „letter-spacing“ festlegen. Die Syntax lautet „letter-spacing: value“. Sie können den Zeilenabstand über das Attribut „line-height“ festlegen. Die Syntax lautet „line-height:“. relativer Wert|absoluter Wert".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS legt den Zeilenabstand fest
In CSS wird der Zeilenabstand über das Attribut line-height festgelegt. Der Wert von line-height stellt die Grundlinie zwischen zwei Textzeilen dar. Distanz. ine-height属性来实现行间距的设置，line-height的值表示的是两行文字之间基线的距离。
文字的基线，指的是如果给文字加上下划线，那么上下划线就是文字的基线。
Line-height的值设置为具体的数值，可以是相对数值，也可以设置为绝对数值，在静态页面中，文字大小固定时常常使用绝对数值，而对于论坛和博客这些用户可以自定义字体大小的页面，通常设置为相对数值，从而，可以随着用户自定义的字体大小改变相应的行间距。
<span style="font-size:24px;"><html>
<head>
<title>
行间距
</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt;
}
p.second{
font-size:18px;
}
p.third{font-size:10px;
}
p.second,p.third{
line-height:1.5em;
}
-->
</style>
</head>
<body>
<p class="one">9月23日是“秋分”，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180.一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分时节，我国常见流域及其以北的广大地区，均夏侯进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥橘黄，秋分是美好宜人的时节。</p>
<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>
</body>
</html>
</span>代码如上，第一段文字采用了绝对数值，并且行间距设置的比文字大小还要小，因此，文字发生了部分重叠的现象。
第二段和第三段，分别设置了不同的文字大小，但是由于使用了相对数值，因此，能够自动的调节行间距。
CSS设置字间距
CSS中通过letter-spacing
Der Wert der Zeilenhöhe ist auf einen bestimmten Wert festgelegt, der ein relativer Wert oder ein absoluter Wert sein kann. Bei statischen Seiten werden häufig absolute Werte verwendet. Für Foren und Blogs Sie können Schriftarten anpassen. Die Größe der Seite wird normalerweise auf einen relativen Wert eingestellt, sodass der entsprechende Zeilenabstand mit der benutzerdefinierten Schriftgröße geändert werden kann.
<span style="font-size:24px;"><html>
<head>
<title>
字间距
</title>
<style>
<!--
p.one{
font-size:10pt;
letter-spacing:-2pt;
}
p.second{
font-size:18px;
}
p.third{
font-size:11px;
}
p.second,p.third{
letter-spacing:.5em;
}
-->
</style>
</head>
<body>
<p classs="one">文字间距1，负数</p>
<p class="second">文字间距2，相对数值</p>
<p class="third">文字间距3，相对数值</p>
</body>
</html>
</span>Der erste Textabsatz verwendet absolute Werte und der Zeilenabstand ist kleiner als die Textgröße. Daher überlappt sich der Text teilweise.
Für den zweiten und dritten Absatz sind jeweils unterschiedliche Textgrößen eingestellt, aber aufgrund der Verwendung relativer Werte kann der Zeilenabstand automatisch angepasst werden. 🎜🎜🎜🎜CSS legt den Wortabstand fest🎜🎜🎜🎜 CSS verwendet das Attributletter-spacing, um den Wortabstand anzupassen. Dieses Attribut kann auch relative und absolute Werte festlegen. 🎜rrreee🎜 Der Code ist wie oben. Sie können sehen, dass das Textabstandsattribut „letter-spacing“ zusätzlich zur Verwendung relativer und absoluter Werte auch negative Zahlen verwenden kann, um den Effekt einer Textüberlappung zu erzielen. 🎜🎜🎜 [Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜]🎜Das obige ist der detaillierte Inhalt vonSo legen Sie Zeilen- und Wortabstände in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!