Image_01 Image_02 Image_03
Krumontree.com Krumontree.com Krumontree.com
Home
Internet and Browser
Create and Design
Basic HTML
Beautiful Images
Control with Table
Links to the others
More tips and Tricks
FTP to Web Hosting
left_bottom

จะขอสรุป Attribute ของ Style Sheet ทั้งหมดที่มีใน CSS เพื่อให้ทุกท่านได้ใช้เป็นข้อมูลอ้างอิงเวลาทำเว็บ เพื่อให้ท่านใช้ประโยชน์จากบทความนี้ได้เต็มที่

ytfont-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%}
 
ytfont-style :
ความหมาย
ใช้กำหนด Style ของ Font
 
ค่าที่ใช้กับ Attribute นี้
มี 3 ค่าคือ
  • normal ใช้กำหนด font ให้เป็นแบบตัวอักษรปกติ normal
  • italic ใช้กำหนด font ให้เป็นแบบตัวเอียง italic
  • oblique ใช้กำหนด font ให้เป็นแบบตัวเอียง oblique
ตัวอย่าง : {font-style:"italic"}
 
ytfont-weight :
ความหมาย
ใช้กำหนดความหนาของ font แต่ Attribute นี้ยังไม่สมบูรณ์ทั้งใน IE และ Netscape รุ่นเก่าๆ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • แบบชื่อ (normal, bold, bolder, lighter)
  • แบบตัวเลข (100 ถึง 900)
ตัวอย่าง : {font-weight:bold} หรือ {font-weight:100}
 
ytfont-variant :
ความหมาย
ใช้กำหนดให้ตัวอักษรกลายเป็นตัวพิมพ์เล็กทั้งหมด
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • normal เป็นแบบปกติ ไม่มีผลใดๆ ต่อข้อความ
  • small-caps ตัวอักษรจะกลายเป็นตัวพิมพ์เล็กหมด
ตัวอย่าง : {font-variant:small-caps}
 
ytfont :
ความหมาย
ใช้กำหนด Attribute ทั้งหมดของ Font ในครั้งเดียว
 
ค่าที่ใช้กับ Attribute นี้
เป็นค่าของ Attribute ทั้งหมด คั่น Attribute แต่ละตัวด้วยช่องว่าง " "

ตัวอย่าง : {font:narmal small-caps bold 12px "MS Sans Serif"}
 
yttext-decoration :
ความหมาย
ลักษณะพิเศษของข้อความ
 
ค่าที่ใช้กับ Attribute นี้
มี 5 แบบ คือ
  • blink ทำให้ข้อความกระพริบ ใช้ได้เฉพาะใน Netscape 4
  • line-through ขีดเส้นกลางบรรทัดทับข้อความ
  • underline ขีดเส้นใต้ข้อความ
  • overline ขีดเส้นเหนือข้อความ
  • none ไม่มีผลอะไร
ตัวอย่าง : {text-decoration:underline}
 
ytline-height :
ความหมาย
ใช้กำหนดความกว้างของช่องว่างระหว่างบรรทัด
 
ค่าที่ใช้กับ Attribute นี้
มี 4 แบบ คือ
  • จำนวนบรรทัด
  • ตัวเลขบอกระยะ ตามด้วยหน่วย
  • เป็นเปอร์เซนต์ของระยะเดิม
  • normal เป็นการใช้ค่าเดิมของ browser
ตัวอย่าง : {line-height:2} หรือ {line-height:16px} หรือ {line-height:normal} หรือ {line-height:125%}
 
yttext-align :
ความหมาย
ใช้กำหนดการวางตัวของข้อความในแนวนอน
 
ค่าที่ใช้กับ Attribute นี้
มี 4 ค่าคือ left,right,center,justify

ตัวอย่าง : {text-align:center}
 
yttext-indent :
ความหมาย
ใช้เว้นช่องว่างเพื่อเป็นย่อหน้าในบรรทัดแรกของข้อความ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • ตัวเลขบอกระยะ ตามด้วยหน่วย
  • เป็นเปอร์เซ็นต์
ตัวอย่าง : {text-indent:20px}
 
ytcolor :
ความหมาย
ใช้กำหนดสีให้ตัวอักษร, ตาราง
 
ค่าที่ใช้กับ 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}
 
ytbackground-color :
ความหมาย
กำหนดสีพื้นหลัง
 
ค่าที่ใช้กับ Attribute นี้
เช่นเดียวกับ color แต่มีค่าเพิ่มมาอีก 1 ค่าคือ transparent ใช้ในกรณีที่ไม่มีสีพื้นหลัง

ตัวอย่าง : {background-color:black}
 
ytbackground-image :
ความหมาย
ใช้กำหนดภาพพื้นหลัง
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • none เมื่อไม่ต้องการให้มีภาพพื้นหลัง
  • url (ชื่อไฟล์)
ตัวอย่าง : {background-image:url(bgimg.jpg)}
 
ytbackground-repeat :
ความหมาย
ใช้กำหนดการปูซ้ำๆ ของ background ถ้าเป็นไฟล์ขนาดเล็กๆ ให้เต็มหน้าเพจ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • repeat ให้ปูซ้ำทั้งแนวนอนและแนวตั้ง
  • repeat-x ให้ปูซ้ำเฉพาะแนวนอน
  • repeat-y ให้ปูซ้ำเฉพาะแนวตั้ง
  • no-repeat ไม่มีการปูซ้ำ
ตัวอย่าง :{background-repeat:no-repeat}
 

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

More Technics of StyleSheet » » Class & ID | Grouping | Refference Properties

Click to TOP

 
Your visitor no.
Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta     e-M@il : webmaster at krumontree.com