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

文字属性和div容器盒的使用基础

时间:2019-01-04 22:37:47      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:sha   radius   back   charset   lang   letter   margin   cal   属性   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .center{
11             width: 200px;
12             margin: auto;
13         }
14         /* 这里是加粗文字 */
15         .p1 {
16             font-weight: bold;
17         }
18         /* 这里是倾斜文字 */
19         .p2 {
20             font-style: italic;
21         }
22         /* 这里是文字间距 */
23         .p3 {
24             letter-spacing: 10px;
25         }
26         /* 这里 是词 间距 */
27         .p4 {
28             word-spacing: 10px;
29         }
30         /* 这里是首行缩进 */
31         .p5 {
32             text-indent: 10px;
33         }
34         /* 这里是上划线 */
35         .p6 {
36             text-decoration: overline;
37         }
38         /* 这里是下划线 */
39         .p7 {
40             text-decoration: underline;
41         }
42         /* 这里是删除线 */
43         .p8 {
44             text-decoration: line-through;
45         }
46         /* 这里是衬托文字 */
47         .p9 {
48             font-family: serif;
49         }
50         /* 这里是非衬托文字 */
51         .p10 {
52             font-family: sans-serif;
53         }
54         /* 这里是容器盒的阴影 */
55         .box {
56             width: 200px;
57             height: 300px;
58             background: red;
59             box-shadow: 10px 10px 10px #ccc;
60         }
61         /* 这里是 文字的阴影 */
62         h1 {
63             text-shadow: 10px 10px 10px #ccc;
64         }
65         /* border边框属性 */
66         .border{
67             width: 200px;
68             height: 200px;
69             border-radius: 50% 50%;
70             background: yellow;
71             text-align: center;
72             line-height: 200px;
73         }
74     </style>
75 </head>
76 
77 <body>
78     <div class="center">
79         <p class="p2">这里是倾斜文字</p>
80         <p class="p3">这里是文字间距</p>
81         <p class="p4">这里 是词 间距</p>
82         <p class="p5">这里是首行缩进</p>
83         <p class="p6">这里是上划线</p>
84         <p class="p7">这里是下划线</p>
85         <p class="p8">这里是删除线</p>
86         <p class="p9"> 这里是衬托文字</p>
87         <p class="p10">这里是非衬托文字</p>
88         <div class="box">这里是容器盒的阴影</div>
89         <h1>这里是文字的阴影</h1>
90         <div class="border">我是一个圆</div>
91        
92     </div>
93 </body>
94 
95 </html>

 

Document

这里是倾斜文字

这里是文字间距

这里 是词 间距

这里是首行缩进

这里是上划线

这里是下划线

这里是删除线

这里是衬托文字

这里是非衬托文字

这里是容器盒的阴影

这里是文字的阴影

我是一个圆

文字属性和div容器盒的使用基础

标签:sha   radius   back   charset   lang   letter   margin   cal   属性   

原文地址:https://www.cnblogs.com/tian-520/p/10222772.html

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