Text property
Text alignment
Chinese text-align the elements present in a predetermined horizontal alignment
Property values: none, center, left, right, justify.
Text Color
color attribute
First line indent text
text-indent the first line indent text specified distance, the unit is recommended to use em.
Text-decoration
text-decoration attribute specifies the modified text style
Attribute value: none (default) | underline (underlined) | overline (a text line definition) | line-through (a line passing through the defined text) | the inherit (inherited value of the parent element of the text-decoration property. )
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 div{ 8 /* text-align: center; */ 9 color: green; 10 text-indent: 2em; 11 text-decoration: line-through; 12 } 13 </style> 14 15 </head> 16<body> . 17 18 is <div> rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers Rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers rangers . 19 20 is </ div> 21 is 22 is </ body> 23 is < / html>
Line height
High row line-height of the text attribute specifies
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 50px; 10 line-height: 50px; 11 background-color: green; 12 } 13 </style> 14 15 </head> 16 <body> . 17 18 is <div> rangers rangers </ div> . 19 20 is </ body> 21 is </ HTML>
Multiline text vertically centered
The first step, the width of a box of 300 * 300, see box shows the total of a few lines of text, if it is five rows, let's look at high line, if the line is high line-height: 30px; line-height then you know that 5 * = 150px
The second step, so that (the height of the box -150px) / 2 = 75; then set the cassette padding-top: 75px; height while ensuring that the box is 300px by, then to 225px height;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 160px; 10 font-size: 20px; 11 background-color: red; 12 line-height: 40px; 13 padding-top: 40px; 14 } 15 </ style> 16 </ head> . 17 <body> 18 is <div> Countries Country Country Country Country Country Country Country Country Country </ div> . 19 20 is </ body> 21 is </ HTML>
Font properties
font size
font-size specified font size, if set to inherit inherit the parent element represents the fonts.
Font weight
font-weight font weight representation
Attribute value: none (default standard thickness) | Bold (bold) | border (thicker) | Lighter (finer) | 100 ~ 900 (set specific thickness, 400 is equivalent to the normal, and is equivalent to 700 Bold) | inherit (inherited from the parent element font weight value)
Font family
font-family
font-family: "Microsoft Yahei", "Microsoft elegant black", "Arial", sans-serif
If your browser does not support the first font, it tries the next one. The browser uses the first value it recognizes. If you do not support the display Times New Roman
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 div{ 8 font-size: 40px; 9 font-weight: bold; 10 font-family: "华文行楷"; 11 } 12 </style> 13 14 </head> 15 <body> 16 . 17 <div> rangers rangers </ div> 18 is . 19 </ body> 20 is </ HTML>
vertical-align
The vertical alignment attribute of the element
Property values:
baseline: Default
top：
bottom：
middle：
Author: Rangers
Date: 2019-08-31