字体样式和文本样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体样式和文本样式相关的知识，希望对你有一定的参考价值。
一、字体样式
<!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>
以上是关于字体样式和文本样式的主要内容，如果未能解决你的问题，请参考以下文章