|
จะขอสรุป Attribute ของ Style Sheet ทั้งหมดที่มีใน CSS เพื่อให้ทุกท่านได้ใช้เป็นข้อมูลอ้างอิงเวลาทำเว็บ เพื่อให้ท่านใช้ประโยชน์จากบทความนี้ได้เต็มที่
 font-size : |
ความหมาย
ใช้กำหนดขนาดของข้อความ แต่มีความสามารถเหนือกว่า <FONT SIZE=...>
ค่าที่ใช้กับ Attribute นี้
สามารถกำหนดได้ทั้งค่าขนาดจริง (มีหน่วยเป็น point,pixel, etc.) ค่าขนาดสัมบูรณ์ และค่าขนาดสัมพันธ์ และเปอร์เซนต์
ค่าขนาดจริง
เป็นตัวเลขที่มีหน่วยกำกับ เช่น point(pt) pixel(px)
ตัวอย่าง : {font-size:12px}
ค่าขนาดสัมบูรณ์
มี 7 ค่าคือ xx-small, x-small, small, medium, large, x-large และ xx-large
ตัวอย่าง : {font-size:large}
ค่าขนาดสัมพันธ์
เป็นการกำหนดขนาดให้ใหญ่ขึ้นหรือเล็กลงกว่าขนาดปกติ มี 2 ค่าคือ larger และ smaller
ตัวอย่าง : {font-size:larger}
ค่าขนาดเป็นเปอร์เซ็นต์
มีผลคล้ายการใช้ค่าขนาดแบบสัมพันธ์ แต่สามารถระบุขนาดที่จะเพิ่มหรือลดเป็นเปอร์เซนต์ได้เลย
ตัวอย่าง : {font-size:75%} หรือ {font-size:200%}
| font-style : |
ความหมาย
ใช้กำหนด Style ของ Font
ค่าที่ใช้กับ Attribute นี้
มี 3 ค่าคือ
- normal ใช้กำหนด font ให้เป็นแบบตัวอักษรปกติ normal
- italic ใช้กำหนด font ให้เป็นแบบตัวเอียง italic
- oblique ใช้กำหนด font ให้เป็นแบบตัวเอียง oblique
ตัวอย่าง : {font-style:"italic"}
| font-weight : |
ความหมาย
ใช้กำหนดความหนาของ font แต่ Attribute นี้ยังไม่สมบูรณ์ทั้งใน IE และ Netscape รุ่นเก่าๆ
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
- แบบชื่อ (normal, bold, bolder, lighter)
- แบบตัวเลข (100 ถึง 900)
ตัวอย่าง : {font-weight:bold} หรือ {font-weight:100}
| font-variant : |
ความหมาย
ใช้กำหนดให้ตัวอักษรกลายเป็นตัวพิมพ์เล็กทั้งหมด
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
- normal เป็นแบบปกติ ไม่มีผลใดๆ ต่อข้อความ
- small-caps ตัวอักษรจะกลายเป็นตัวพิมพ์เล็กหมด
ตัวอย่าง : {font-variant:small-caps}
| font : |
ความหมาย
ใช้กำหนด Attribute ทั้งหมดของ Font ในครั้งเดียว
ค่าที่ใช้กับ Attribute นี้
เป็นค่าของ Attribute ทั้งหมด คั่น Attribute แต่ละตัวด้วยช่องว่าง " "
ตัวอย่าง : {font:narmal small-caps bold 12px "MS Sans Serif"}
| text-decoration : |
ความหมาย
ลักษณะพิเศษของข้อความ
ค่าที่ใช้กับ Attribute นี้
มี 5 แบบ คือ
- blink ทำให้ข้อความกระพริบ ใช้ได้เฉพาะใน Netscape 4
- line-through ขีดเส้นกลางบรรทัดทับข้อความ
- underline ขีดเส้นใต้ข้อความ
- overline ขีดเส้นเหนือข้อความ
- none ไม่มีผลอะไร
ตัวอย่าง : {text-decoration:underline}
| line-height : |
ความหมาย
ใช้กำหนดความกว้างของช่องว่างระหว่างบรรทัด
ค่าที่ใช้กับ Attribute นี้
มี 4 แบบ คือ
- จำนวนบรรทัด
- ตัวเลขบอกระยะ ตามด้วยหน่วย
- เป็นเปอร์เซนต์ของระยะเดิม
- normal เป็นการใช้ค่าเดิมของ browser
ตัวอย่าง : {line-height:2} หรือ {line-height:16px} หรือ {line-height:normal} หรือ {line-height:125%}
| text-align : |
ความหมาย
ใช้กำหนดการวางตัวของข้อความในแนวนอน
ค่าที่ใช้กับ Attribute นี้
มี 4 ค่าคือ left,right,center,justify
ตัวอย่าง : {text-align:center}
| text-indent : |
ความหมาย
ใช้เว้นช่องว่างเพื่อเป็นย่อหน้าในบรรทัดแรกของข้อความ
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
- ตัวเลขบอกระยะ ตามด้วยหน่วย
- เป็นเปอร์เซ็นต์
ตัวอย่าง : {text-indent:20px}
| color : |
ความหมาย
ใช้กำหนดสีให้ตัวอักษร, ตาราง
ค่าที่ใช้กับ Attribute นี้
มี 5 แบบ คือ
- ชื่อสี เช่น black, white, blue, red, etc.
- เลขฐาน 16 ยาว 6 ตำแหน่ง เช่น #00FFFF
- เลขฐาน 16 ยาว 3 ตำแหน่ง เช่น #0FF
- แบบ RGB โดยใช้ความเข้มสี เช่น rgb(0,255,255)
- แบบ RGB โดยใช้เปอร์เซนต์ความเข้มสี เช่น rgb(0%,100%,100%)
ตัวอย่าง : {color:#00FFFF}
| background-color : |
ความหมาย
กำหนดสีพื้นหลัง
ค่าที่ใช้กับ Attribute นี้
เช่นเดียวกับ color แต่มีค่าเพิ่มมาอีก 1 ค่าคือ transparent ใช้ในกรณีที่ไม่มีสีพื้นหลัง
ตัวอย่าง : {background-color:black}
| background-image : |
ความหมาย
ใช้กำหนดภาพพื้นหลัง
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
- none เมื่อไม่ต้องการให้มีภาพพื้นหลัง
- url (ชื่อไฟล์)
ตัวอย่าง : {background-image:url(bgimg.jpg)}
| background-repeat : |
ความหมาย
ใช้กำหนดการปูซ้ำๆ ของ background ถ้าเป็นไฟล์ขนาดเล็กๆ ให้เต็มหน้าเพจ
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
- repeat ให้ปูซ้ำทั้งแนวนอนและแนวตั้ง
- repeat-x ให้ปูซ้ำเฉพาะแนวนอน
- repeat-y ให้ปูซ้ำเฉพาะแนวตั้ง
- no-repeat ไม่มีการปูซ้ำ
ตัวอย่าง :{background-repeat:no-repeat}
ข้อสังเกต : บางคุณสมบัติไม่สามารถนำมาใช้กับอักษรภาษาไทยได้ ต้องใช้กับภาษาอังกฤษเท่านั้น ความรู้เรื่องนี้ยังมีอีกมากมาย ศึกษาเพิ่มเติมได้จาก
|
