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 margin 9. Floating and clearing floating 10. Scroll bar 11 .Show and hide
Text: 1.letter-spacing / word spacing /2.word-spacing/ word spacing /3.text-decoration/ underlined /4.text-align/ aligned /5.text-indent/ indent /6.line-height / Line height / 7.color / color / 8.word- break / text line break /
Font: 1.font-family / font type /2.font-size/ font size /3.font-style/ font style /4.font-weight/ font weight /
* 注意 ： font: 24px / 1.5em 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/ Abbreviation of font font: font: style weight size / line-heigt font-family / / The two that must appear are size font-family / Second word-break: break-all; / Automatic line break of text line break Will automatically wrap, the word ok, the letter will not, the default text is added overflow: auto; word-break: break-all; /
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
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种常用css样式之文本字体学习</title>
7 <style type="text/css">
8 div.box1{
9 /*字体*/
10 font-family:"Microsoft Yahei";/*字体类型 添加引号有无均正常展示，建议添加*/
11 font-size:24px;/*字体大小*/
12 font-style:italic;/*字体外观,斜体等同em*/
13 font-weight:900;/*字体粗细 默认100-900，常用bold粗体等同值900 normal正常 lighter细体*/
14 font:30px/1em "黑体";
15 }
16 /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/
17 font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 18 /*文本*/
19 div.box2{
20 letter-spacing:1px;/*字间距*/
21 word-spacing: -5px;/*词/字符间距*/
22 text-decoration: line-through;
23 /*下划线 underline overline line-through*/
24 text-align:justify;/*对齐 left right center justify*/
25 text-indent: 100px;/*缩进*/
26 /* height: 40px; 27 background-color: #ccc; */
28 /*块级元素高度与行高一致，文本垂直居中展示*/
29 line-height: 40px;
30 color: rebeccapurple;/*颜色 16进制 rgb 单词*/
31 /*恶意输入字母，系统不换行，出现滚动条， word-break: break-all*/
32 overflow: auto;
33 word-break: break-all;/*文本折行*/
34 }
35 </style>
36 </head>
37 <body>
38 <div class="box1">
39 愿星空不问赶路人，时光不负有心人“你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌”
40 </div>
41 <div class="box">
42 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
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>