Style Sheet คืออะไร
Style Sheets คือการกำหนดรูปแบบการแสดงผลของหน้าเว็บเพจของเรา ว่าจะใช้สีอะไร ใช้ Font ไหน ใช้ขนาดไหน เป็นต้น เพื่อความสวยงามในการแสดงผลของเว็บไซด์ของเรา
Style Sheets ไม่ได้ถูกรวมไว้ในคู่มือมาตรฐาน HTML ของ W3C ซึ่งเป็นเหตุที่เราจะต้องกำหนดคำสั่งต่างๆ ไว้ในเว็บเพจของเรา เพื่อให้ browser ได้รู้จัก และแสดงผลได้ถูกต้อง เช่นระบุ ประเภทของไฟล์ HTML และ CSS ว่าเป็นเวอร์ชั่นอะไร หรือประเภทของไฟล์ Style Sheet
การระบุประเภทของไฟล์
ในไฟล์ HTML ของเรา จะต้องระบุ ประเภทของไฟล์ ว่าจะต้องมาตรฐานไหน ซึ่งจะทำการระบุ แบบนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Page content</BODY>
</HTML>
มากกว่าไปนั้น ในส่วนของ Meta Tag เราจะบอก browser หรือ search engines ว่าไฟล์ของเราเป็นประเภทไหน ซึ่งจะระบุไว้ในส่วนของ Head ดังนี้ :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Page content</BODY>
</HTML>
การอ้างอิง Styles ที่ใช้
เมื่อได้ระบุมาตรฐาน และประเภทของไฟล์ไปแล้ว เราก็จะต้องแทรก Styles ที่เราใช้ ไว้ในไฟล์ HTML ของเราด้วย ซึ่งมีด้วยกันทั้งหมด 4 วิธีด้วยกัน คือ
1.Document style คือ การแทรก Styles เข้าไปในส่วนของ Header
2.Inline style คือ การแทรก Styles เข้าไปเป็น Attribute ใน Tag ที่ต้องการใช้งานเลย
3.External style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้วอ้างอิงมา
4.Imported style คือ การพิมพ์ Styles ไว้อีกไฟล์หนึ่ง นามสกุล .css แล้ว import ไฟล์เข้ามาเลย
อย่างไร ลองศึกษาดูนะ
|