CSS

เคยสงสัยไหมครับว่า ทำไม px และ em จึงต้องมีพร้อมๆ กัน

ซึ่ง em ในที่นี้คือหน่วยของความกว้าง ความสูง นะครับ ไม่ใช่ em ที่มักใช้คู่ๆ ไปกับ span อย่าเพิ่งสับสน

ทำไมต้องมี em ??

เคยลองมั้ยครับ เวลาที่เราเข้าเว็บบางเว็บแล้วตัวหนังสือมันเล็ก แล้วเราอยากให้มันใหญ่ขึ้น แต่พอเราเข้าไปที่ Text Size ของ IE แล้วขยายยังไงมันก็ไม่ขึ้น แต่กลับบราวเซอร์ อื่นๆ มันก็ขยายตามความต้องการของเรา หรือจะย่อตัวหนังสือ มันก็ลดลงตามความต้องการ นั่นแหละครับ หน้าเพจนั้น ได้ถูกกำหนดขนาดตัวหนังสือด้วย px ไว้เรียบร้อยแล้ว

css กับการจัดการตัวหนังสือ มึน งง และ อ้าวเฮ้ย อาจจะเกิดขึ้นกับหลายๆ คน เมื่อได้เห็นลักษณะของการเขียนบทความของผม เพราะมันออกจะดู มั่วๆ

ไร้ระเบียบแบบแผนไปหน่อย จับโน่นมาก่อน จับนี่มาหลัง ทั้งที่จริงมันควรจะเรียงแบบ เป็นขั้นเป็นตอน อย่างว่าแหละครับ คนที่จะเริ่มปั่นไปพร้อมๆ กับการเขียนเว็บด้วย CSS นี่ อย่างน้อยต้องรู้ html กันมาอยู่แล้ว ผมก็เลยถือเอาว่า ทุกท่าน ไม่มีทาง งง แน่นอน ก็เลยเขียนไปๆ มาๆ อย่างนี้

สำหรับวันนี้มาว่ากันด้วยเรื่องของ ตัวหนังสือกันครับ สำหรับการกำหนดว่า เว็บเราจะใช้ตัวหนังสือ อะไรเป็นฐาน หรือมาตรฐาน ของเว็บ ให้แสดงสีนี้ ทุกหน้า หรือ ขนาดเท่านี้ ทุกหน้า เราสามารถกำหนดได้โดย

หลายๆ คน คงคันไม้คันมือเต็มที กับการเน้นสีสันของ DIV การใส่พื้นหลัง ไม่ว่าจะเป็น สี หรือ รูปภาพ ซึ่ง CSS2 มีออปชั่นให้เล่นกันมันมือ

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

เนื่องจากเราสามารถสั่งให้รูปภาพที่เป็นพื้นหลังแสดงอยู่ได้เกือบๆ จะอิสระ ดังนั้นจึงเป็นข้อดีอีกอย่างสำหรับผู้ที่รักในสีสัน เพราะเราสามารถสั่งให้รูปภาพ อยู่ตรงมุม จุด ที่เราต้องการได้

มาดูกันก่อนว่า Property หลักๆ ของรูปภาพพื้นหลังมีอะไรกันมั่ง

หลังจากได้พูดถึงเรื่อง padding+boder กันไปแล้ว คราวนี้มาดูเรื่องรวม margin เข้าไปด้วยกันครับ

สมมุติว่าผมจะสร้าง box หนึ่งอันกว้าง 500 พิกเซล ชื่อคลาสเดิมนะครับ (pd)

การเขียน 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 คอลัมน์ เลย์เอ้าท์ จัดตรงกลาง

ส่วนใหญ่แล้วความกว้างของหน้าเว็บนั้นจะขึ้นอยู่กับคนเขียนแหละครับว่า คิดว่ากลุ่มเป้าหมายของเว็บที่เรากำลังทำนั้นหน้าจออยู่ที่ขนาดเท่าไหร่ หรือแล้วแต่ความชอบใจ แต่ผมจะยกตัวอย่างกรณี ที่ความกว้าง 800px

ถ้าไอเดียเริ่มแรกของเราคิดออกมาได้ประมาณว่า หน้าเว็บกว้าง 800px พื้นหลังสีเทา พื้นที่ของข้อมูลสีขาว ตัวหนังสือสีน้ำเงิน มีเส้นขอบบางๆ ทั้งซ้ายและขวาข้างละสัก 1px กำลังพอเหมาะ เว้นระยะห่างระหว่าง เส้นขอบสัก 4px กำลังดี