CSS เบื้องต้น
25 Dec 2011
Style Properties ทั่วไป
ในหัวข้อที่ผ่านมาเราได้เรียนรู้โครงสร้างพื้นฐานที่จำเป็นของการเขียนโค้ด CSS แล้ว หากจะนำ CSS ไปใช้งานจริง เราจำเป็นต้องรู้การกำหนดสไตล์ในรูปแบบต่างๆ ซึ่งอยู่นอกเหนือจากขอบเขตของบทความนี้ อย่างไรก็ตามเพื่อการใช้งานในเบื้องต้น จึงขอสรุปสไตล์พร็อพเพอร์ตี้และค่าต่างๆสำหรับการจัดสไตล์ที่ใช้บ่อยๆกัน โดยมีรายละเอียดดังแสดงในตารางที่ 1
ตารางที่ 1: แสดงสไตล์พร็อพเพอร์ตี้และค่าต่างๆที่ใช้โดยทั่วไป| ชื่อสไตล์พร็อพเพอร์ตี้ | ตัวอย่างค่าที่กำหนดให้ได้ |
| Fonts | |
| font-family | serif, sans-serif, monospace, etc |
| font-size | 12pt, larger, 150%, 1.5em |
| font-style | normal, italic, oblique |
| font-variant | normal, small-caps |
| font-weight | normal, bold, bolder, lighter, 100, 200, .., 900 |
| font | 14pt sans-serif |
| Colors and Background | |
| color | green, blue, #FF0000, rgb(255,0,0) |
| background-color | green, #333333, transparent |
| background-image | url(image.jpg), none |
| background-position | top, center, bottom, left, right, 100% 50% |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat |
| background-attachment | scroll, fixed |
| Text | |
| text-decoration | underline, overline, line-though, blink |
| text-transform | capitalize, uppercase, lowercase, none |
| text-align | left, right, center, justify |
| vertical-align | top, middle, bottom, etc |
| Border | |
| border-style | none, dotted, dashed, solid, double, etc |
| border-color | blue, green, #333333 |
| border-top | or |
| border-right | or |
| border-bottom | or |
| border-left | or |
| Margins and Paddings | |
| margin-top | 1cm, 20%, 50px, 0.5in, 5em |
| margin-right | 1cm, 20%, 50px, 0.5in, 5em |
| margin-bottom | 1cm, 20%, 50px, 0.5in, 5em |
| margin-left | 1cm, 20%, 50px, 0.5in, 5em |
| margin | 10px 0 10px 0 (top, right bottom, left) |
| padding-top | 1cm, 20%, 50px, 0.5in, 5em |
| padding-right | 1cm, 20%, 50px, 0.5in, 5em |
| padding-bottom | 1cm, 20%, 50px, 0.5in, 5em |
| padding-left | 1cm, 20%, 50px, 0.5in, 5em |
| padding | 10px 0 10px 0 (top, right bottom, left) |
| List | |
| list-style-type | none, circle, square, decimal, upper-roman, roman, etc |
| list-style-image | url(image.jpg), none |
| Others | |
| display | none, inline, block, list-item, etc |
| visibility | visible, hidden, collapse |
| width | 250px, 20%, auto, etc |
บทสรุป
จบแล้วนะครับเกี่ยวกับพื้นฐานการเขียนโค้ด CSS เบื้องต้น โอกาสถัดไปจะเขียนถึงการจัดเลย์เอาท์ด้วย CSS
