Use of HTML-CSS paragraph styles

Text decoration: text decoration

Mode: underline, strikethrough, underline, do not add any decoration
Writing method: text decoration: underline | line through | overline | none
Note: multiple can be added, separated by spaces: text decoration: underline line through outline;

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#underline{
				text-decoration: underline;
			}
			#line-through{
				text-decoration: line-through;
			}
			#overline{
				text-decoration: overline;
			}
			#noe{
				text-decoration: none;
			}
			#all{
				text-decoration:line-through overline underline;
			}
		</style>
	</head>
	<body>
		<p id="underline">
			What does my family live in? Ha ha ha ha ha ha
		</p>
		<p id="line-through">
			What does my family live in? Ha ha ha ha ha ha
		</p>
		<p id="overline">
			What does my family live in? Ha ha ha ha ha ha
		</p>
		<p id="none">
			What does my family live in? Ha ha ha ha ha ha
		</p>
		<p id="all">
			What does my family live in? Ha ha ha ha ha ha
		</p>
	</body>

Text transform text case (for English paragraphs)

Mode: uppercase, lowercase, initial uppercase

Writing method: text transform: lowercase 𞓜 uppercase | capitalize (initial capital)

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#lowercase{
				text-transform: lowercase;
			}
			#uppercase{
				text-transform: uppercase;
			}
			#captalize{
				text-transform: capitalize;
			}
		</style>
	</head>
	<body>
		<p id="lowercase">
			AAAAAAaaaaaaaaaa
		</p>
		<p id="uppercase">
			AAAAAAaaaaaaaaaa
		</p>
		<p id="captalize">
			hi lovely 
		</p>
	</body>

Text indent: indent the first line of text

Writing method: text indent: number (PX / EM)

Indent the first line by two spaces

Method 1: empty the distance between two font sizes according to the font size

Mode 2: set 2em

EM unit: relative unit. 1em is always the same as the font size

Note: if English appears in the text, the distance between the two font sizes of completely blank numbers cannot be left, because there is still a gap between English and Chinese

Text align: text alignment

Mode: align left, align right, align center, align both ends

Text align: left | right | center | justify....

#uppercase{
				width: 200px;
				text-align: right;
				background-color: yellow;
			
			}
	#captalize{
				width: 200px;
				text-align: center;
				background-color: yellow;
				
			}

<p id="uppercase">
			AAAAAAaaaaaaaaaa
</p>
<p id="captalize">
			hi lovely 
</p>

Line height: define line height

Definition: the height of a line of text. Row height includes top margin, font size and bottom margin. The upper and lower margins of each row are equal by default. The upper margin of each row is the same by default, and the lower margin of each row is the same by default. The default value of row height is not a fixed value, but a variable value. Changing according to the current font size

Value: 1 Number (px) | scale (scale value, proportional to text size)

Text centered vertically

height==line-height

#none{
height: 50px;
line-height: 50px;
background-color: #008000;
}

Using scale: scale values

#none{
height: 45px;
background-color: #008000;
font-size: 15px;
line-height: 3;
}

Paragraph word spacing

Letter spacing: define word spacing

Writing method: letter spacing: number (PX)

Word spacing: define word spacing (for English)

Writing method: word spacing: number (PX)

It can only be the change of individual words and the word spacing between words. Even if there is a Chinese font in the middle, it can only be the change of the distance between the two sides of the text and the text remains unchanged