這個範例解說標題、內文及圖形的各種基本Css應用技巧。
| 編號 | 程式碼 | 說明 |
| 1 | <html> |
|
| 2 | <head> |
|
| 3 |
|
|
| 4 | <style type="text/css"> |
|
| 5 |
|
|
| 6 | body |
|
| 7 | { |
|
| 8 | background-color: white; | 背景顏色：白 |
| 9 | } |
|
| 10 |
|
|
| 11 | h1 |
|
| 12 | { |
|
| 13 | color: #ffff00; | 字的顏色 |
| 14 | background-color: #aaaaff; | 背景顏色 |
| 15 | font-size: 180%; | 字大小 |
| 16 | font-family: 微軟正黑體; | 字體 |
| 17 | } |
|
| 18 |
|
|
| 19 | h2 { |
|
| 20 | background-color: transparent; | 透明色 |
| 21 | text-indent: 1cm; | 縮排1cm |
| 22 | } |
|
| 23 |
|
|
| 24 | h3 |
|
| 25 | { |
|
| 26 | background-color: #eeeeee; |
|
| 27 | text-indent: 2cm; |
|
| 28 | } |
|
| 29 |
|
|
| 30 | h5 |
|
| 31 | { |
|
| 32 | background-color: #eeeeee; |
|
| 33 | text-align: center; | 靠中對齊 |
| 34 | border-style: solid; | 實線外框 |
| 35 | border-width: 1px; | 外框寬度為1px |
| 36 | border-bottom-width: 3px; | 下方框寬度為3Px |
| 37 | border-right-width: 3px; | 右方框寬度為3Px |
| 38 | font-size: 100%; | 字體大小為100% |
| 39 | } |
|
| 40 |
|
|
| 41 | p |
|
| 42 | { |
|
| 43 | background-color: rgb; |
|
| 44 | text-indent: 0.8cm; |
|
| 45 | } |
|
| 46 |
|
|
| 47 | p.noindent {text-indent: 0cm;} | 設為不縮排 |
| 48 | p.font1 {font-family: 標楷體} | 設為標楷體 |
| 49 |
|
|
| 50 | div.rtl | 靠右對齊設定 |
| 51 | { |
|
| 52 | direction: rtl |
|
| 53 | } |
|
| 54 |
|
|
| 55 | img | 圖形設定 |
| 56 | { |
|
| 57 | float:right; | 定位於右邊 |
| 58 | border:1px solid #888888; | 外框寬度設為1Px顏色為#888888(灰色) |
| 59 | border-width: 1px; |
|
| 60 | border-bottom-width: 3px; | 下方框寬度為3Px |
| 61 | border-right-width: 3px; | 右方框寬度為3Px |
| 62 | margin:0px 0px 15px 20px; | 邊界設定 |
| 63 | } |
|
| 64 |
|
|
| 65 | </style> |
|
| 66 | </head> |
|
| 67 |
|
|
| 68 | <body> |
|
| 69 | <h1>標題1</h1> | 標題測試 |
| 70 | <h2>標題2</h2> |
|
| 71 | <h3>標題3</h3> |
|
| 72 | <h5>標題5</h5> |
|
| 73 | <p> |
|
| 74 | 明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。 |
|
| 75 | </p> |
|
| 76 | <h5>內文不縮排測試</h5> | 不縮排測試 |
| 77 | <p class="noindent"> |
|
| 78 | 明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。 |
|
| 79 | </p> |
|
| 80 | <h5>內文標楷體測試</h5> | 標楷體測試 |
| 81 | <p class="font1"> |
|
| 82 | 明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。 |
|
| 83 | </p> |
|
| 84 | <h5>內文靠右測試</h5> | 靠右測試 |
| 85 | <div class="rtl"> |
|
| 86 | 明天會更好，明天會更好，明天會更好。 |
|
| 87 | </div> |
|
| 88 |
|
|
| 89 | <h5>圖形位置處理</h5> |
|
| 90 | <p class="font1"> |
|
| 91 | 明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。 |
|
| 92 | </p> |
|
| 93 | <img src="http://www.google.com.tw/images/google_80wht.gif" width="95" height="84" /> | 圖形設定實際應用。 |
| 94 | <p class="font1"> |
|
| 95 | 明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好，明天會更好。 |
|
| 96 | </p> |
|
| 97 |
|
|
| 98 | </body> |
|
| 99 | </html> |
|
沒有留言:
張貼留言