首页 > 代码库 > 字体样式和文本样式

字体样式和文本样式

2024-11-04 20:53:39   205人阅读

一、字体样式

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

 

字体样式和文本样式


联系
我们