Computer: Makeuper: CSS: Ex01

From TestingMediawiki
Jump to navigation Jump to search

回到 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:文字顏色。指定法同背景顏色。