字型樣式和文本樣式,字型樣式文本樣式
一、字型樣式
<!doctype html> <html>
<head> <style> div{ color: #000; font-family: '微軟雅黑','宋體'; font-weight: 900; /*這是沒有單位的*/ font-style:italic; /*oblique*/ font-variant: small-caps; /*小型大寫字母:全部大寫*/ /*字型複合樣式寫法:font:字型大小/行高 字型風格 粗細 小型大寫字母 傾斜;*/ font: 12px/1.5 '微軟雅黑' blod small-caps italic; } </style>
</head>
<body> <!-- start wrap --> <div>ddddd</div> <!--- end wrap -->
</body></html>
二、文本樣式
1 <!doctype html> 2 <html> 3 <head> 4 <style> 5 div{ 6 /*控制文字大小寫*/ 7 text-transform: uppercase; /*全大寫*/ 8 text-transform: lowercase; /*全小寫*/ 9 text-transform: capitalize; /*首字母大寫*/10 11 /*字間距*/12 letter-spacing: 2em/px; 13 /*詞間距:當中間有空格的時候就會出現*/14 word-spacing:5em/px;15 16 /*文本不換行(英文預設不換行)*/17 white-space: nowrap;18 /*單詞內強制換行:英文有空格的話強制換行,中文有沒有都換行*/19 word-break: all-break;20 21 /*文本溢出的省略符號*/22 text-overflow: ellipsis; /*溢出的文本用省略符號*/23 overflow: hidden;/*元素溢出隱藏*/24 25 /*文本對齊*/ /*line-height*/26 text-align: center; 27 text-align: left; 28 text-align: right; 29 text-align:justify; /*左右對齊*/30 31 /*首行縮排*/32 text-indent: 2em/px; /*1em=預設最小font-size*/33 34 /*文本修飾*/35 text-decoration: none;36 text-decoration: underline; /*底線*/37 text-decoration: overline; /*上劃線*/38 text-decoration: line-throught; /*中劃線*/39 }40 </style>41 </head>42 <body>43 <!-- start wrap -->44 <div>sddddddddddsfd</div>45 <!-- end wrap -->46 </body>47 </html>