Sitthiphorn Anthawonksa

มันมาแล้ว! บราวเซอร์ห่วย? หรือเปล่า

หลังจากที่ได้ข่าวว่า ไมโครซอฟท์ จะปล่อยเจ้าบราวเซอร์เจ้า IE ตัวใหม่ออกมา ก็นั่งตั้งตาคอยดูว่ามันจะหน้าตาเป็นเยี่ยงไร ใช้งานมันส์ ขนาดไหน ความสามารถจะตามทันผู้ที่เดินล่วงหน้าไปก่อนอย่าง จิ้งจอกไฟ หรือขาใหญ่ โอเปร่าทันหรือเปล่า จนแล้วจนรอด เท่าที่ผมเห็นและลองใช้ ถึงแม้ความสามารถจะเพิ่มขึ้นมามากกว่าเดิมมากมาย แต่ก็ยังด้อยกว่า บราวเซอร์จาก โมซิลล่า หรือโอเปร่าอยู่ดี

Selectors และ การคอมเม้นท์ใน css

การเขียน 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 ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ

1 คอลัมน์ พร้อม Header และ Footer

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

2 คอลัมน์เลย์เอ้าท์ พร้อม header และ footer

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

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

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

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

Pseudo-classes อย่างไรกับ Link หลากสี

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

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

เริ่มเขียน CSS | selector { property: value;}

Selector

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

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

Property

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

Values

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

Back to Top