常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏
文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
字体:1.font-family/*字体类型*/2.font-size/*字体大小*/3.font-style/*字体样式*/4.font-weight/*字体粗细*/
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 } 15 /*文本*/ 16 div.box2{ 17 letter-spacing:1px;/*字间距*/ 18 word-spacing: -5px;/*词/字符间距*/ 19 text-decoration: line-through; 20 /*下划线 underline overline line-through*/ 21 text-align:justify;/*对齐 left right center justify*/ 22 text-indent: 100px;/*缩进*/ 23 /* height: 40px; 24 background-color: #ccc; */ 25 /*块级元素高度与行高一致，文本垂直居中展示*/ 26 line-height: 40px; 27 color: rebeccapurple;/*颜色 16进制 rgb 单词*/ 28 /*恶意输入字母，系统不换行，出现滚动条， word-break: break-all*/ 29 overflow: auto; 30 word-break: break-all;/*文本折行*/ 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box1"> 36 愿星空不问赶路人，时光不负有心人“你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌” 37 </div> 38 <div class="box"> 39 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/ 40 </div> 41 <div class="box2"> 42 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 43 </div> 44 </body> 45 </html>