The font style is aimed at the shape effect of "the text itself", and the text style is aimed at the typesetting effect of the "entire paragraph". The font style focuses on the individual, and the text style focuses on the whole. The common text styles are as follows.
| Attributes | Description |
|---|---|
| text-indent | First line indent |
| text-align | Horizontal alignment |
| text-decoration | Text decoration |
| line-height | Row height |
| text-transform | Case conversion |
| letter-spacing、word-spacing | Letter spacing, word spacing |
Next, let's take a look at the use of these attributes.
text-indent
The first line of the p element is not automatically indented, so we often use 6 (spaces) in HTML to indent the first line of two spaces. But this way will lead to a lot of redundant code. So use the text-indent attribute to define the indentation of the first line of the p element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>首行缩进</title>
<style type="text/css">
p{
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<p>从明天起，做一个幸福的人，喂马，劈柴，周游世界；从明天起，关心粮食和蔬菜，我有一所房子，面朝大海，春暖花开；从明天起，和每一个亲人通信，告诉他们我的幸福。那幸福的闪电告诉我的，我将告诉每一个人；给每一条河每一座山取一个温暖的名字。陌生人，我也为你祝福，愿你有一个灿烂的前程；愿你有情人终成眷属；愿你在尘世获的幸福；我也愿面朝大海，春暖花开。</p>
</body>
</html>
text-align
Use the text-align attribute to control the alignment of the text in the horizontal direction.
Text-align attribute value:
- left (left justified)
- center (center alignment)
- right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>水平对齐</title>
<style type="text/css">
.p1{
text-align: center;
}
.p2{
text-align: right;
}
.p3{
text-align: left;
}
</style>
</head>
<body>
<p class="p1">我爱学习</p>
<p class="p2">我爱学习</p>
<p class="p3">我爱学习</p>
</body>
</html>
text-decoration
Use the text-decoration attribute to define the text decoration effect (underline, midline, topline). There are 4 values for the text-decoration attribute, as shown in the following table.
| Attribute value | Description |
|---|---|
| none | Remove all scribing effects |
| underline | Underscore |
| line-through | Underline |
| overline | Top line |
In HTML, you can use the s element to implement the underline, and the u element to implement the underline. But with CSS, they are all implemented using the text-decoration attribute. The structure uses html tags, and the appearance generally uses CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>文本修饰</title>
<style type="text/css">
.p1{
text-decoration: underline;
}
.p2{
text-decoration: line-through;
}
.p3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="p1">我爱学习</p>
<p class="p2">我爱学习</p>
<p class="p3">我爱学习</p>
</body>
</html>
line-height
You can use the line-height property to control the height of a line of text.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>行高</title>
<style type="text/css">
.p1{
line-height: 15px;
}
.p2{
line-height: 30px;
}
.p3{
line-height: 50px;
}
</style>
</head>
<body>
<p class="p1">我爱学习</p><hr />
<p class="p2">我爱学习</p><hr />
<p class="p3">我爱学习</p>
</body>
</html>
text-transform
You can use the text-transform attribute to convert the text case. There are 4 values for the text-transform attribute, as shown in the following table.
| Attribute value | Description |
|---|---|
| none | No conversion |
| uppercase | Convert to uppercase |
| lowercase | Convert to lower case |
| capitalize | Capitalize only the first letter of each English word |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>大小写</title>
<style type="text/css">
.p1{
text-transform: uppercase;
}
.p2{
text-transform: lowercase;
}
.p3{
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day</p>
<p class="p2">Study hard and make progress every day</p>
<p class="p3">Study hard and make progress every day</p>
</body>
</html>
letter-spacing
You can use the letter-spacing attribute to control the distance between words. Every Chinese character is regarded as a "character", and every English letter is also regarded as a "character".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字间距</title>
<style type="text/css">
.p1{
letter-spacing: 0px;
}
.p2{
letter-spacing: 5px;
}
.p3{
letter-spacing: 10px;
}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day.好好学习，天天向上</p>
<p class="p2">Study hard and make progress every day.好好学习，天天向上</p>
<p class="p3">Study hard and make progress every day.好好学习，天天向上</p>
</body>
</html>
word-spacing
Use the word-spacing attribute to define the distance between two words. Generally speaking, word-spacing is only for English words.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>词间距</title>
<style type="text/css">
.p1{
word-spacing: 0px;
}
.p2{
word-spacing: 5px;
}
.p3{
word-spacing: 10px;
}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day.好好学习，天天向上</p>
<p class="p2">Study hard and make progress every day.好好学习，天天向上</p>
<p class="p3">Study hard and make progress every day.好好学习，天天向上</p>
</body>
</html>