ความรู้เบื้องต้นเกี่ยวกับ CSS | การกำหนดกลุ่มของ CSS ด้วย Object Class| การกำหนดกลุ่มของ CSS ด้วย Grouping | คำสั่งอ้างอิง CSS

---

สรุป 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}
 

ข้อสังเกต : บางคุณสมบัติไม่สามารถนำมาใช้กับอักษรภาษาไทยได้ ต้องใช้กับภาษาอังกฤษเท่านั้น ความรู้เรื่องนี้ยังมีอีกมากมาย ศึกษาเพิ่มเติมได้จาก