2006/Mar/22

CSS

<style type="text/css">

background
background-attachment: (fixed, scholl) // เลือก bg ว่าจะให้ fix หรือ scholl
background-color: #FFFFF // ใส่สีให้ bg
background-image: url("*.jpg") // ทำ bg ให้เป็นรูป
background-position: top left // top, left, right, buttom ใช้ได้หมด รวมถึง % และ pixel กำหนดตำแหน่งของ bg
background-repeat: (repeat, repeat-x, repeat-y, no-repeat) // วน bg

text
color: // ใส่สี จะเป็น Code สี หรือ rgb(255,255,255)
direction: // กำหนดตำแหน่งของ Text (ltr จากซ้ายมาขวา, rtl จากขวามาซ้าย)
letter-spacing: // เพิ่มหรือลดช่องว่างระหว่างอักษร (normal, กำหนด length)
text-align: // (left, center, right)
text-decoration: // (none, underline, overline, line-through, blink)
text-indent: // กำหนดรอยเว้าของ text บรรทัดแรก (length, %)
text-shadow: // ??? (none, color, length)
text-transform: // เปลี่ยนรุปแบบให้กับ text (none, capitalize, uppercase, lowercase)
unicode-bidi: //
??? (normal, embed, bidi-override)
white-space: // ถ้าเจอช่องว่าง จะให้ทำยังไง? (normal, pre, nowrap)
word-spacing: // เพิ่ม/ลด ที่ว่างระหว่างคำ (normal, length)

font
font-family: // ชื่อ font
font-size: // ขนาด font (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %)
font-size-adjust: // เหมือน font-size แตกต่างยังไงเดี๋ยวดูอีกที (none, number)
font-stretch: // (normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded)
font-style: // (normal, italic, oblique)
font-variant: // ตั้ง font เป็น ตัวพิมพ์ใหญ่ แต่ขนาดเล็ก (normal, small-caps)
font-weight: // ความหนาของ font (normal, bold, bolder, lighter, number)

border
border-style: // รูปแบบของขอบ (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
border-color: // สีของขอบ (ใส่รหัสของสี, rgb(0,0,0))
border-width: // ความหนาของขอบ (thin, medium, thick, length)
border-bottom(left, right, top)-color(width, style):

margin
margin-bottom (left, right, top): // Set magin (auto, length, %)

padding
padding-bottom
(left, right, top): // Set padding (length, %)

list
list-style-image: // (none, url)
list-style-position: // (inside, outside)
list-style-type: // (none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha)
marker-offset: //
??? (auto, length)

Dimension
height: // (auto, length, %)
line-height: // ความสูงระหว่างบรรทัด (normal, number, length, %)
max-height: // maximum height (none, length, %)
max-width: // set maximum width (none, length, %)
min-height: //
(none, length, %)
min-width: // (none, length, %)

Classification
clear: // (right, both)
display: // (none, block, inline, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-aption)
float: // (left, right, none)
position: // (absolute, static, relative, fixed)
visibility: // (visible, hidden, collapse)

Position
bottom, left, right, top: // (auto, %, length)
clip: //
??? (rect(top(px), right(px), bottom(px), left(px)), auto)
vertical-align: // (baseline, sub, super, top, text-top, middle, buttom, text-bottom, length, %)
z-index: // priority (auto, number)
position:
-- relative:
กำหนดตำแหน่งให้สัมพัทธ์กับ object แม่ของมัน (เช่น img ใน div ถ้ากำหนด top: 10px ก็จะเว้นระยะจากขอบของ div ลงมา 10px)
-- fixed: เหมือน absolute แต่เวลา scroll ลง มันไม่เลื่อนตามไปด้วย
-- static: Default ของ position
-- absolute:
กำหนดตำแหน่งให้สัมพัทธ์กับหน้าต่าง (เช่น img ใน div เหมือนอันแรก ถ้ากำหนด top: 10px มันจะนับจากขอบหน้าต่างของ browser จากใต้ toolbar ลงมา 10px)

ที่มา : Narisa


Pseudo-classes
selector:pseudo-class {property: value} => a:link {color: #000000}
selector.class:pseudo-class {property: value} => a.red:link {color: #000000} <a class="red" href="">

</style>


Ref : http://www.w3schools.com/css/

Comment

Comment:

Tweet