Ran khaa ya
    ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytสไตล์ชีต (Style Sheet)


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

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

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

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

ตัวอย่าง : {background-color:black}
 
Click to TOP
ytbackground-image :
ความหมาย
ใช้กำหนดภาพพื้นหลัง
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • none เมื่อไม่ต้องการให้มีภาพพื้นหลัง
  • url (ชื่อไฟล์)
ตัวอย่าง : {background-image:url(bgimg.jpg)}

Click to TOP
ytbackground-repeat :
ความหมาย
ใช้กำหนดการปูซ้ำๆ ของ background ถ้าเป็นไฟล์ขนาดเล็กๆ ให้เต็มหน้าเพจ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
  • repeat ให้ปูซ้ำทั้งแนวนอนและแนวตั้ง
  • repeat-x ให้ปูซ้ำเฉพาะแนวนอน
  • repeat-y ให้ปูซ้ำเฉพาะแนวตั้ง
  • no-repeat ไม่มีการปูซ้ำ
ตัวอย่าง :{background-repeat:no-repeat}
 

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

Click to TOP

ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP นโยบายความเป็นส่วนตัว
นโยบายการคืนสินค้า
กฎของร้าน