CSS text styles

  • The text style
    • Set the text color
    • Sets the horizontal alignment of elements
    • Sets the indentation of the first line of text
    • Sets the line height of the text
    • Set the text decoration

The text style

The property name meaning For example,
color Set the text color color:#00C
text-align Sets the horizontal alignment of elements text-align:right
text-indent Sets the indentation of the first line of text text-indent:20px
line-height Sets the line height of the text line-height:25px
text-decoration Set the text decoration text-decoration:underline

Set the text color

Value method: 1. color name 2. hexadecimal notation 3.R GB three primary colors 4.RGBA three primary colors, A is control transparency Alpha 0-1, 1 completely opaque, 0 completely transparent

<p style="color: red;">Use color names</p>
<p style="color: #006699;">Use hexadecimal</p>
<p style="color: rgb(0,0,0);">Use hexadecimal</p>
<p style="Color: rgba (0,0,0,1);">Rgba transparency is 1</p>
<p style="Color: rgba (0,0,0,0);">Rgba transparency is 0</p>
Copy the code

Sample code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="color: red;">Use color names</p>
		<p style="color: #006699;">Use hexadecimal</p>
		<p style="color: rgb(0,0,0);">Use hexadecimal</p>
		<p style="Color: rgba (0,0,0,1);">Rgba transparency is 1</p>
		<p style="Color: rgba (0,0,0,0);">Rgba transparency is 0</p>
	</body>
</html>
Copy the code

Effect screenshot:

The last line is completely transparent and invisible ↓

So you can see the ↓

Sets the horizontal alignment of elements

Alignment of text left right center

<p style="text-align: left;">Align text left</p>
<p style="text-align: right;">Text aligned right</p>
<p style="text-align: center;">Align the text toward center</p>
Copy the code

Sample code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="text-align: left;">Align text left</p>
		<p style="text-align: right;">Text aligned right</p>
		<p style="text-align: center;">Align the text toward center</p>
	</body>
</html>
Copy the code

Effect screenshot:

Sets the indentation of the first line of text

<p style="text-indent: 50px;">Write a paragraph here</p>
Copy the code

Sample code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p >Founded in 1999, CSDN (Chinese Software Developer Network) is dedicated to providing Chinese Software developers with life-cycle services such as knowledge dissemination, online learning and career development. IT owns: professional Chinese IT community: CSDN.NET; Exclusive apps for mobile developers: CSDN APP, CSDN Academy APP; New media Matrix wechat official account: CSDN Information, Program Life, GitChat, CSDN Academy, AI Technology base camp, blockchain base camp, CSDN cloud computing, GitChat elite courses, artificial intelligence headlines, CSDN enterprise recruitment; IT technology training and learning platform: CSDN College; Tech knowledge mobile community: GitChat; IT HR services: Clarifocus; University IT technology learning and growth platform: University club.</p>
		<p style="text-indent: 50px;">Founded in 1999, CSDN (Chinese Software Developer Network) is dedicated to providing Chinese Software developers with life-cycle services such as knowledge dissemination, online learning and career development. IT owns: professional Chinese IT community: CSDN.NET; Exclusive apps for mobile developers: CSDN APP, CSDN Academy APP; New media Matrix wechat official account: CSDN Information, Program Life, GitChat, CSDN Academy, AI Technology base camp, blockchain base camp, CSDN cloud computing, GitChat elite courses, artificial intelligence headlines, CSDN enterprise recruitment; IT technology training and learning platform: CSDN College; Tech knowledge mobile community: GitChat; IT HR services: Clarifocus; University IT technology learning and growth platform: University club.</p>
	</body>
</html>
Copy the code

Effect screenshot:

The effect is obvious, the first paragraph is not indent, the second paragraph is indent

Sets the line height of the text

Line height, used in conjunction with vertical center to align the line height of the text with the height of the container

<div style="border: solid 1px red; height: 100px; line-height: 100px;">
CSDN
</div>
Copy the code

Sample code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="border: solid 1px red; height: 100px; line-height: 100px;">
		CSDN
		</div>
	</body>
</html>
Copy the code

Effect screenshot:

Set the text decoration

Text decoration – line attribute values instructions
none Standard text defined by the default value
underline Sets the underline of the text
overline Sets the underscore of the text
line-through Sets the strikeout for text
Text decoration – style attribute values instructions
solid The default value line will appear as a single line
double The lines will appear as double lines
dotted The lines will appear as dotted lines
dashed The lines will appear as dashed lines
wavy Lines will appear as wavy lines
Text decoration – color attribute values instructions
Choose a color The lines show the corresponding colors

Sample code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div  style="text-decoration-line: none;">CSDN</div><br/>	
		<div  style="text-decoration-line: line-through;">CSDN</div><br/>
		<div  style="text-decoration-line: underline;">CSDN</div><br/>
		<div  style="text-decoration-line: overline;">CSDN</div><br/>
		
		<div  style="text-decoration-line: underline; text-decoration-style: solid;">CSDN</div><br/>	
		<div  style="text-decoration-line: underline; text-decoration-style: dashed;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: dotted;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: wavy;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: unset;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: double;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: none;">CSDN</div><br/>
		<div  style="text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red;">CSDN</div><br/>
		
	</body>
</html>
Copy the code

Effect screenshot:

Effects can be superimposed, as shown in ↑

Writing is not easy, read if it helps you, thank you for your support!

If you’re on a computer, see the”Three even a key“Yeah, click on it.”

Come on!

Work together!

Keafmd