1. Set the font
font-family: "Times New Roman",Arial;
font-family: Microsoft Yahei, Hei, Song;
Note: The font to be set is the one that comes with the operating system. Set multiple fonts separated by commas. If the first one is not available, use the second one, and select them in turn. The following fonts are all alternative fonts.
2. Set the tilt effect of the text
font-style: italic; /*Italian*/
3. Set the bold effect of the text
font-weight: bold;/*bold*/
font-weight: normal;/*do not bold*/
4. Set the English letter case conversion
text-transform: capitalize;/*capitalize*/
text-transform: uppercase;/*all uppercase*/
text-transform: lowercase;/*all lowercase*/
5. Set the size of the text
font-size: 36px;
6. Set the decorative effect of the text
text-decoration: none; /*no decoration*/
text-decoration: underline;/*underline*/
text-decoration: line-through;/* strikethrough original price 990*/
text-decoration: overline;/*overline*/
7. Indent the first line of a paragraph
text-indent: 2em;
Description: 2em means indent two Chinese characters.
8. Set word spacing
word-spacing: 20px;/*Set the left and right spacing of English words*/
letter-spacing: 2px;/*Set the left and right spacing of a single letter*/
Description: Chinese text represents a letter, so Chinese text is set with letter-spacing.
9. Set the word line height
line-height: 1.5;
Note: The default line height of the font is 1.2, which means that the line height of the font is 1.5 times the font height.
10. Set the horizontal position of the text
text-align: left;/*left alignment*/
text-align: right; /* right alignment */
text-align: center;/*center alignment*/
text-align:justify;/*justify both ends*/
Description: text-align:justify is mainly used for paragraph articles, which is the same as the effect of aligning text at both ends in world.
11. Set the color of the text and background
color: blue;/*set font color*/
background-color: red; /* set the background color */
12. Set vertical alignment (using three layers of divs)
<html>
<head>
<title>Universal vertical center with CSS (set vertical alignment)</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>