Sitthiphorn Anthawonksa

การเขียน CSS สำหรับ XHTML selector ใน css ไฟล์นั้นเหมาะกับการใช้ในกรณีที่เราต้องการ ควบคุมการแสดงผลร่วมกันในหลายๆ หน้าของเว็บเช่น การสั่ง body หรือ การสั่ง IMG การเขียน css แบบ External ที่สำคัญเราควรกำหนดค่า body, img, Pseudo-classes, table,td และอื่นๆ ที่เราต้องการไว้ก่อน

เช่น ถ้าเราเขียน

body { 
background-color: #000000;
} 
img {
border: 0;
} 

เมื่อเรานำ ไฟล์ css ไปใช้กับหน้าเว็บใดๆ แล้ว จะได้ค่า พื้นหลังของทุกหน้าเป็นสี #000000 และภาพทุกภาพที่มีอยู่ในแต่ละหน้า จะไม่มี เส้นขอบ และเมื่อเราไปใช้ tag <img src="" alt=""> เราไม่ต้องกำหนด border="0" ในแทกอีกที เพราะ css จัดการให้เรียบร้อยแล้ว และวิธีการกำหนด IMG ให้ border: 0; ใน css ไฟล์ลักษณะนี้ นอกจากจะช่วยไม่ให้ต้องเขียน border="0" ใน html แล้ว เวลาที่เราทำลิงค์จากภาพ ใน IE ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ

โดยทั่วไปแล้ว เราจะเห็นเว็บในลักษณะ 3 ส่วนแบบนี้คือ มีส่วนหัว คือส่วนบนสุด ส่วนเนื้อหา และส่วนล่างสุดคือส่วนรายละเอียด เกี่ยวกับเว็บไซท์ ลิขสิทธิ์ เบอร์โทรติดต่อ ฯลฯ

ก่อนหน้านี้เราได้รู้แล้วว่าการทำหน้าเว็บแบบ 1 คอลัมน์เลย์เอ้าท์ พร้อม หัวและท้ายนั้นทำยังไง คราวนี้ลองมาแยกคอลัมน์ สำหรับใส่ข้อมูลลทำเป็น คอลัมน์เมนูด้านซ้ายมือกันดูครับ ว่าจะทำยังไง และจะให้มันแสดงผลออกมายังไง

การวางแบบ เลย์เอ้าท์ ขึ้นแรกสุดที่ผมอยากแนะนำไว้ตรงนี้ก่อนสักนิดนึงนะครับ เพื่อให้เป็นการง่ายในการเขียนโค้ด CSS ท่านลองหลับตานึกก่อนว่า จะให้ หน้าเว็บแสดงผลออกมาในลักษณะ อย่างไร

เช่น ผมนั่งหลับตานึกๆ แล้ว ได้ประมาณว่า อยากให้เว็บมี header มีตรงกลางแสดงผลข้อมูล แล้วก็ แบ่งพื้นที่ไว้ทำเมนูด้านซ้ายมือ เหมือนเว็บทั่วๆ ไป ส่วนฝั่งขวาเอาไว้แสดงผลข้อมูล แล้วก็มีไฟล์ footer เพื่อแสดงรายละเอียดเกี่ยวกับหน้าเว็บสักเล็กน้อย

ถ้าคิดอยากให้เป็นได้ลักษณะนี้แล้ว ต่อไปก็ลุยโค้ด css ได้เลยครับ หลักๆ สำหรับ หน้าเว็บแบบ 2 คอลัมน์และมีหัวท้ายนี่ จะใช้ DIV tag id 3 ตัว และ DIV class 2 ตัว

Pseudo-classes ไม่จำเป็นต้องมีเพียงคลาสเดียวใน CSS ไฟล์ ได้ แต่ชื่อคลาสต้องไม่ซ้ำกัน ซึ่งในเรื่องน้ำ ผมขอยกตัวอย่างการใช้ Pseudo-classes หลายๆแบบให้เห็นสักเล็กน้อย สำหรับผู้ที่ยังมึนงงอยู่ ว่าจะจัดการกับ ตัวหนังสือที่เป็นลิงค์ในหน้าเดียวกัน แต่ยากให้มันมีหลายๆ สียังไง,/p>

ในการเขียน CSS ของผมไม่ว่าจะนำไปใช้สำหรับเว็บใด หรือหน้าเพจพิเศษ ไหนก็ตาม ผมจะกำหนด Pseudo-classes หลักเพื่อให้เป็น ฐานของการลิงค์ ของเว็บเสมอ คือ ถ้าในคลาสอื่นๆ ไม่ได้มีการเรียกใช้ Pseudo-classes พิเศษใดๆ ที่เฉพาะเจาะจงออกไปแล้ว ลิงค์ ทุกลิงค์ จะแสดงผลออกมาลักษณะเหมือนกัน

Selector

คือส่งแรกที่สุดที่ควรรู้ แล้วคืออะไรหว่า ชื่อคลาส ชื่อไอดี หรือ [X]HTML tag ใดๆ ใน CSS นั้น เรียกว่า Selector ครับ

โดย คลาส นั้นใช้ . (ดอท) ในการบ่งบอกว่าเป็นคลาส ส่วน ไอดี นั้นใช้ # (ชาร์พ) เป็นตัวบอกว่านี่คือไอดีนะ ส่วน html tag หรือ ใส่มันลงไปโต้งๆ เลยครับ เช่น body (ส่วนของ body) หรือ img (รูปภาพ)

Property

คือชื่อคุณสมบัติของ css เช่น width, height, position ฯลฯ

Values

คือค่าของ property นั้นๆ ครับ เช่น 500px สำหรับความกว้าง