Common css styles: 1. Font and color 2. Background property 3. Text property 4. Border property 5. Mouse cursor property 6. List style 7. Positioning property 8. Inner and outer margins 9. Floating and clearing floating 10. Scroll bar 11. Showing and hiding
Text: 1. Letter spacing / word spacing / 2. Word spacing / word spacing / 3. Text decoration / underline / 4. Text align / align / 5. Text indent / indent / 6. Line height / line height / 7.color / color / 8. Word break / text break/
Font: 1. Font family / font type / 2. Font size / font size / 3. Font style / font style / 4. Font weight / font thickness/
*Note: font: 24px / 1.5em 'lucida sans',' lucida sans regular ',' lucida Grande ',' lucida sans Unicode ', Geneva, Verdana, sans serif;
/Font abbreviation: font: style weight size / line heigt font family / / 2 required are size font family / followed by word break: break all; / text wrapping will automatically wrap, Chinese will automatically wrap, word ok, letter won't, default text will add overflow: Auto; word break: break all/
Specially established learning Q-q-u-n: 784783012 ，Share learning methods and small details that need attention, and keep updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>11 Commonly used css Text font learning of style</title>
7 <style type="text/css">
8 div.box1{
9 /*Typeface*/
10 font-family:"Microsoft Yahei";/*It is recommended to add quotation marks for font types*/
11 font-size:24px;/*font size*/
12 font-style:italic;/*Font appearance, italics equivalent to em*/
13 font-weight:900;/*Font weight defaults to 100-900, common bold equivalent value is 900 normal lighter weight*/
14 font:30px/1em "Blackbody";
15 }
16 /*font Font: style weight size / line heigt font family*/ /*2 required are size font family*/
17 font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 18 /*text*/
19 div.box2{
20 letter-spacing:1px;/*Word spacing*/
21 word-spacing: -5px;/*Word / character spacing*/
22 text-decoration: line-through;
23 /*Underline outline line through*/
24 text-align:justify;/*Align left right center justify*/
25 text-indent: 100px;/*indent*/
26 /* height: 40px; 27 background-color: #ccc; */
28 /*Block level element height is consistent with row height, and text is displayed vertically and centrally*/
29 line-height: 40px;
30 color: rebeccapurple;/*Color hex rgb word*/
31 /*Maliciously input letters, the system does not wrap lines, and a scroll bar appears, word break: break all*/
32 overflow: auto;
33 word-break: break-all;/*Text folding*/
34 }
35 </style>
36 </head>
37 <body>
38 <div class="box1">
39 May the stars do not ask passers-by, and time does not fail those who are willing to do so. "Your pressure comes from: you cannot self-discipline, just pretend to work hard; the status quo cannot keep up with your inner desire; so you are anxious and panic."
40 </div>
41 <div class="box">
42 text:1.letter-spacing/*Word spacing*/2.word-spacing/*Word spacing*/3.text-decoration/*Underline*/4.text-align/*alignment*/5.text-indent/*indent*/6.line-height/*Row height*/7.color/*colour*/8.word-break/*Text folding*/
43 </div>
44 <div class="box2">
45 https://www.cnblogs.com/dhnblog/May the starry sky not ask passers-by, time is worthy of the people who care about you "Your pressure comes from: you ca n't discipline yourself, just pretend to work hard; the status quo can't keep up with your inner desires; so you are anxious and panic"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
46 </div>
47 </body>
48 </html>