常見css樣式:1.字體與顏色2.背景屬性3.文本屬性4.邊框屬性5.滑鼠游標屬性6.列表樣式7.定位屬性8.內外邊距9.浮動和清除浮動10.滾動條11.顯示和隱藏 文本:1.letter-spacing/*字間距*/2.word-spacing/*詞間距*/3.text-decoration/*下... ...
常見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/*字體粗細*/
*註意：font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/*font字體的簡寫:font:style weight size/line-heigt font-family*/ /*要求必須出現的2個是 size font-family*/ 其次word-break: break-all;/*文本折行 自動換行，中文的會自動換行，單詞ok，字母的不會，預設文本添加overflow: auto;word-break: break-all;*/
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>
