Computer: Makeuper: CSS: Ex01: Difference between revisions
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。 | 最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。 | ||
---- | ---- | ||
<font color="green"> | <font color="green"> | ||
<div style=" margin-left:10%; margin-right:10%; padding:12px; font-size:24px; | <nowiki><div style=" margin-left:10%; margin-right:10%; padding:12px; font-size:24px; text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; "></nowiki><br> | ||
test<br> | |||
test | <br> | ||
我是測試用的文字啦～<br> | |||
我是測試用的文字啦～ | <br> | ||
測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用<br> | |||
<nowiki></div></nowiki> | |||
</font> | |||
</div> | |||
</nowiki> | |||
---- | ---- | ||
<div style=" margin-left:10%; margin-right:10%; padding:12px; font-size:24px; | <div style=" margin-left:10%; margin-right:10%; padding:12px; font-size:24px; | ||
Latest revision as of 06:36, 3 August 2004
回到 Computer ‧ 回到 Computer: Makeuper ‧ 回到 Computer: Makeuper: CSS
最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。
<div style=" margin-left:10%; margin-right:10%; padding:12px; font-size:24px; text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; ">
test
我是測試用的文字啦～
測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用
</div>
test
我是測試用的文字啦～
測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用 測試用測試用測試用測試用測試用測試用測試用
margin-left
margin-right
padding
font-size
text-align
text-indent
background-color
color
現在要來解說該區塊（<div>）內的各屬性的意義，各屬性後要接冒號「:」進行"值"的指定，接著要再接分號「;」以跟不同的屬性做區隔。請多多在 Sand Box 中進行嘗試。
margin-left 和 margin-right ：左右邊界，後面接的數字的單位為像素（px）或是百分比（%）。
padding：內文與各個邊的間隔距離，也可以像上面的 margin 一樣在後方接上「top bottom left right」以各別指定各個邊，後面接的數字的單位為像素（px）。
font-size：文字大小，後面接的數字的單位為像素（px）。
text-align：文字對齊，後接 left center right 。
text-indent：開頭內縮，後面接的數字的單位為像素（px）。
background-color：背景顏色，可直接填顏色名稱進去，或用十六進位的RGB指定法指定顏色，如 #ff0000 就是紅色。
color：文字顏色。指定法同背景顏色。