|
|
|
|
|
|
|
สไตล์ชีต (Style Sheet) |
ความรู้เบื้องต้นเกี่ยวกับ 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}
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}
ข้อสังเกต : บางคุณสมบัติไม่สามารถนำมาใช้กับอักษรภาษาไทยได้ ต้องใช้กับภาษาอังกฤษเท่านั้น ความรู้เรื่องนี้ยังมีอีกมากมาย ศึกษาเพิ่มเติมได้จาก
|
|
|
|
|
|
|
|
|