CSS text style is a style modification relative to the content. Because in the cascading relationship, the content is higher than the background. So text style is relatively more important.
CSS control text properties:
1. Set text indent: text-indent:length (length unit ) can be negative
2. Text horizontal alignment: text-align: left, center, right
3. Blank processing: white-space:nowrap (nowrap is forced to be displayed in one line, pre newlines and spaces are retained, normal automatically wraps)
4 , Case control: text-transform: (capitalize the first letter of each word in uppercase, uppercase every letter in uppercase, lowercase every letter in lowercase, none normal size)
5. Text vertical alignment: vertical-align: (sub sets the text as subscript, super sets the text as superscript, top is aligned with the top, text-bottom is aligned with the bottom)
6, text color: color sets the color of the text
##First line indentation
Definition:
First line indentation is to indent the first line of a paragraph, which is a commonly used text formatting effect. Generally, when writing in Chinese, there are two blank spaces at the beginning, similar to this.
[Note] This attribute can be negative
text-indent
## Value: <length> | < ;percentage> | inherit
Initial value: 0
Applies to: block-level elements (including block and inline-block)
Inheritance: Yes
Percentage: relative to the width of the containing block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>亚冠联赛是亚洲最高等级的俱乐部赛事，相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯，高于亚足联杯和亚足联主席杯，
获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>
</body>
</html>
Horizontal alignment
Definition:
Horizontal alignment is the horizontal alignment that affects text within an element.
text-align
Values: left | center | right | justify | inherit
Initial value: left
Applies to: block-level elements (including block and inline-block)
Inheritance: Yes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>亚冠联赛是亚洲最高等级的俱乐部赛事，相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯，高于亚足联杯和亚足联主席杯，</p>
<p>获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>
</div>
</body>
</html>Text conversion
Text transformation is used to handle English case conversion
text-transform
Value: uppercase (all uppercase) | lowercase (all uppercase) lowercase) | capitalize (capitalize the first letter) | none | inherit
Initial value: none
Applies to: all elements
Inheritance: yes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转换</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">hello css</p>
<p class="lowercase">hello css</p>
<p class="capitalize">hello css</p>
</html>Text modification
Definition: Text modification is used to provide decorative lines for text
[Note] The color of text modification lines is the same as the text color
text-decoration
Value: none | [underline (underline) || overline (upperline) || line-through (center line)] | inherit
Initial value: none
Applies to: all elements
Inheritance: none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本修饰</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>这是用来进行文本修饰的</h1>
<h2>这是用来进行文本修饰的</h2>
<h3>这是用来进行文本修饰的</h3>
</body>
</html>
Next Section