|
|
การใช้ Stylesheet ควบคุมการแสดงผลในบราวเซอร์
|
การใช้เทคนิคควบคุมการแสดงผลด้วย Stylesheet เป็นที่นิยมกันมากและถือเป็นมาตรฐานในภาษา HTML 4.0 ที่นิยมใช้กันจะมีอยู่สองรูปแบบ คือแบบที่ฝังตัวในไฟล์ HTML และแบบที่แยกเป็นไฟล์ต่างหากใช้วิธีการเรียกเข้ามาใช้ตามต้องการด้วยการอ้างถึงสไตล์ชีทนั้นๆ
 แบบฝังตัวในไฟล์ HTML
เป็นรูปแบบของสไตล์ชีทง่ายๆ ไม่ซับซ้อนจะเขียนแทรกไว้ในส่วนของ HEAD ก่อนหรือหลัง TITLE ก็ได้ มีรูปแบบการเขียนดังนี้
<head>
<title>การสร้างสไตล์ชีท</title>
<style type="text/css">
<!--
body { margin: 0px 0px; padding: 0px 0px}
a:link { color: #ffff00; text-decoration: none}
a:visited { color: #ff66ff; text-decoration: none}
a:active { color: #ffcc00; text-decoration: underline; font-weight:bold}
a:hover { color: #ffcc00; text-decoration: underline; font-weight:bold}
-->
</style>
<head>
การแสดงผลจะเกิดกับไฟล์นี้ไฟล์เดียวเท่านั้น ซึ่งมีเทคนิคการเขียนดังนี้
- จะเริ่มต้นด้วยการระบุให้บราวเซอร์รู้ว่าเป็นคำสั่งสไตล์ชีทด้วย <style type="text/css"> และ </style>
- คำสั่งต่างๆ จะอยู่ใน tag comment คือ <!-- และ --> เพื่อให้บราวเซอร์ที่ไม่สนับสนุนเทคโนโลยีนี้ยังคงทำงานได้ตามปกติ
- คำสั่ง body จะระบุการแสดงผลอยู่ในวงเล็บปีกกา เช่น margin คือการกำหนดจุดเริ่มต้นในการแสดงผลของเว็บเพจ ค่า 0px คือชิดขอบซ้ายและขอบบนของจอภาพ padding คือระยะห่างระหว่างตัวอักษรหรือขอบรูปภาพห่างจากขอบจอด้านบน/ด้านซ้ายเท่าใด (หน่วยเป็นพิกเซล) สามารถกำหนดสีของพื้นหลัง ตัวอักษรและรูปแบบฟอนต์ได้ด้วย แต่ละคำสั่งคั่นด้วยเครื่องหมายเซมิโคล่อน ( ; )
- คำสั่ง a:link, a:visited, a:active, a:hover เป็นการกำหนดลักษณะของจุดเชื่อมโยง เช่น สีที่เปลี่ยนไปเมื่อเกิดเหตุการณ์ต่างๆ ของจุดเชื่อมโยง (link = สีจุดเชื่อมโยงที่ยังไม่เคยคลิกไปชมมาก่อน, visited = สีจุดเชื่อมโยงที่เคยคลิกไปชมมาแล้ว, active = สีที่เปลี่ยนไปเมื่อคลิกเมาท์ที่จุดเชื่อมโยงค้างไว้, hover = สีที่เปลี่ยนไปเมื่อนำเมาท์เคลื่อนผ่านจุดเชื่อมโยงนั้น)
- คำสั่ง text-decoration: none/underline หมายถึงการแสดงผลจุดเชื่อมโยงต้องการให้มีขีดเส้นใต้หรือไม่
- คำสั่ง font-weight:bold หมายถึงการแสดงผลตัวอักษรเป็นตัวหนา
แบบแยกเป็นไฟล์ต่างหาก
เป็นรูปแบบที่นิยมใช้กันมากที่สุดในปัจจุบัน เนื่องจากสามารถลดขนาดของไฟล์และเพิ่มลูกเล่นได้มากกว่า สามารถควบคุมการแสดงผลของเว็บเพจทุกหน้าด้วยไฟล์เพียงไฟล์เดียว สามารถแก้ไขไฟล์สไตล์ชีทนี้เพียงไฟล์เดียวก็มีผลกับทุกหน้า การเขียนใช้หลักการเดียวกันกับแบบแรกแต่ไม่ต้องมีส่วนกำหนด Style และ Tag Comment และบันทึกจัดเก็บเป็นไฟล์ที่มีนามสกุลเป็น *.css ดังตัวอย่างนี้เป็นไฟล์ชื่อ easystyle.css ของเว็บนี้
body { BACKGROUND-COLOR: #000000; FONT: 10pt "Microsoft Sans Serif", "MS Sans Serif";
MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px;
PADDING-TOP: 0px; scrollbar-face-color: #666666; scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #ffffcc; scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #99ffff; scrollbar-track-color: #99cccc; scrollbar-arrow-color: #ffff00
}
a:link { color: #00FFFF; text-decoration: none}
a:visited { color: #ff99ff; text-decoration: none}
a:active { color: #0099FF; text-decoration: underline}
a:hover { color: #0099FF; text-decoration: underline; font-weight: bold}
TextArea {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";
font-style : normal; line-height: 14pt}
td {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";
font-style : normal; line-height: 16pt}
th {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";
font-style : bold; line-height: 16pt}
.h1 {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif"; font-weight: bold}
.h2 {font-size : 12pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif"; font-weight: bold}
.h3 {font-size : 14pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif"; font-weight: bold}
.h4 {font-size : 12pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif"; font-weight: normal}
.scomic {font-size : 12pt; font-family : "MS Sans Serif", Tahoma, "Comic Sans MS"; font-weight: bold}
.comic {font-size : 14pt; font-family : "MS Sans Serif", Tahoma, "Comic Sans MS"; font-weight: bold}
.bcomic {font-size : 16pt; font-family : "MS Sans Serif", Tahoma, "Comic Sans MS"; font-weight: bold}
.barial {font-size : 16pt; font-family : "MS Sans Serif", Tahoma, "Arial "; font-weight : bold}
.arial {font-size : 14pt; font-family : "MS Sans Serif", Tahoma, "Arial "; font-weight : bold}
.arialb {font-size : 14pt; font-family : "MS Sans Serif", Tahoma, "Arial Black"; font-weight : normal}
.vernada {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "Vernada"; font-weight : normal}
สิ่งที่เพิ่มเติมจากรูปแบบแรกในการเขียนสไตล์ชีทตามตัวอย่างในไฟล์นี้ ได้แก่การเพิ่มเติมการแสดงสีสันของแถบสครอลบาร์ การป้อนข้อมูลในแบบฟอร์ม การแสดงผลในตาราง และการกำหนดการแสดงผลของเนื้อหาและหัวข้อย่อยในรูปของ Class ต่างๆ เพื่อความสะดวกในการเรียกใช้ในไฟล์ต่างๆ ดังนี้
- ในส่วน BODY (สีเหลืองจะเป็นการกำหนดเพิ่มเติมคือสีพื้นหลัง รูปแบบตัวอักษร และส่วนแสดงผลของ Scrollbar เช่น แถบสี ลูกศร เงาของแถบเลื่อน) ให้ทดลองเปลี่ยนสีดูผลเองนะครับ
- ในส่วนการป้อนข้อมูลในช่องแบบฟอร์ม (TextArea) และตาราง (TD - TH) จะมีการกำหนดรูปแบบตัวอักษร สไตล์และระยะบรรทัด (line-hieght)
- ที่สำคัญและนิยมกันมากคือการกำหนดรูปแบบหัวข้อย่อย (Class) โดยใช้ฟูลสต็อป ( . ) นำหน้าชื่อรูปแบบนั้นๆ เช่นจากตัวอย่าง .h2 จะกำหนดขนาดตัวอักษรเท่ากับ 12 พอยท์ รูปแบบฟอนต์เป็น MS Sans Serif สไตล์ของฟอนต์เป็นตัวหนา bold การเรียกใช้รูปแบบหัวข้อย่อย Class จะใช้คำสั่ง <font class="h2">หัวข้อย่อยแบบ H2</font> ผลจะเกิดขึ้นดังข้อความนี้
หัวข้อย่อยแบบ H2
- การเรียกใช้สไตล์ชีทในทุกๆ ไฟล์สามารถกำหนดไว้ในส่วนหัวของไฟล์ระหว่างคำสั่ง HEAD ดังนี้
<link href="path/filename.css" rel=stylesheet type=text/css>
ข้อดีที่ผมเห็นว่ามีประโยชน์มากในการทำเว็บเพจ คือ เราสามารถควบคุมการแสดงผลของข้อความในตาราง ให้อยู่ในมาตรฐานที่เรากำหนด เพราะผู้ชมไม่สามารถจะเปลี่ยนแปลงขนาดของการแสดงผล ตัวอักษรในบราวเซอร์ได้เลย (เปลี่ยนเมนู View > Text Size > Largest ก็ไม่มีผลใดๆ) ทำให้เราสามารถควบคุมหน้าเว็บเพจได้ทั้งหน้า โดยรูปแบบไม่เปลี่ยนแปลง ก็นำไปใช้กันได้เลยครับ ทดลองเปลี่ยนสีต่างๆ ได้ตามใจชอบ
|
