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

Posted 2021-02-01 tian-520

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字属性和div容器盒的使用基础相关的知识，希望对你有一定的参考价值。

 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>