文字屬性和div容器盒的使用基礎
阿新 • • 發佈：2019-01-04
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
這裡是傾斜文字
這裡是文字間距
這裡 是詞 間距
這裡是首行縮排
這裡是上劃線
這裡是下劃線
這裡是刪除線
這裡是襯托文字
這裡是非襯托文字
這裡是容器盒的陰影