码迷,mamicode.com
首页 > 其他好文 > 详细

字体样式和文本样式

时间:2017-07-24 01:35:55      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:div   blog   大写   cin   中划线   首字母   字母   行高   form   

一、字体样式

 <!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>

 

字体样式和文本样式

标签:div   blog   大写   cin   中划线   首字母   字母   行高   form   

原文地址:http://www.cnblogs.com/supersswhite/p/7226611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!