Tag: css

CSS3 เริ่มเขียนเริ่มใช้กันได้แล้ว หาซื้อได้ตามร้านโชวห่วยทั่วไป แต่ อะไรกันแค่เพียง CSS1 กับ CSS2-2.1 ยังเขียนไม่หวาดไม่ไหว จะจู่โจมสู่ไตรภาคกันแล้วหรือ ค่อยๆ เขียนค่อยๆ เพิ่มกันไป จะให้ผมมาเขียนเชียร์แบบบ้าพลัง

กลับมาหา CSS

ถือได้ว่าเราห่างหายจากการเขียนบทความที่เกี่ยวข้องกับ CSS อย่างเดียวโดยตรงไปนาน เพราะทั้งผม (พร อันทะ) และ รดิส (radiz) ต่างพยายามเบี่ยงเบนความสนใจของทุกๆ ท่านไปที่เรื่อง Semantic web, Web Standards และเรื่อง XHTML นานพอสมควร ไม่ใช่ว่าพวกเราจะเลิกสนับสนุนหรือแนะนำเรื่องราวเกี่ยวกับ CSS กันแล้ว แต่เพียงแค่หันไปบอกเล่าเรื่องที่มันสำคัญมากยิ่งกว่า CSS แค่ชั่วคราวแค่นั้นเองครับ เพียงเพราะแค่อยากให้เข้าใจเรื่องราวของการเขียนเว็บตรงและเป็นอันหนึ่งอันเดียวกัน กระนั้นก็ยังหวั่นๆ ว่ามันจะไปทางเดียวกันได้หรือไม่ ต้องรอดู

มาถึงตอนนี้ ผมคงเริ่มที่จะกลับเข้ามาหาเรื่องราวที่เกี่ยวข้องกับ CSS มากยิ่งขึ้น ตามการเปลี่ยนแปลงของเวลา แต่คงเป็นอะไรที่ซับซ้อนมากกว่าเมื่อก่อนมาก เพราะต้องเขียน CSS ให้รองรับในฉบับของ Semantic Web

สงครามบราวเซอร์ จุดเริ่มต้นของจุดจบ

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

HTML (Hyper Text Markup Language)

ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD

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

การเขียน CSS มี 3 ลักษณะคือ Inline, Internal และ External

หลายคนยังสับสนในเรื่องของ css กับ html พอสมควร ดังที่ผมได้พูดคุยแลกเปลี่ยนกันทาง Windows Live Messenger [MSN] ซึ่งทำให้ผมต้องปรับโครงสร้างเว็บใหม่ เพื่อ ทำความเข้าใจกับ CSS ให้มากยิ่งขึ้นครับ และสำหรับผู้เริ่มต้นเลย ไม่รู้จะเอายังไง ก็เชิญแวะมาเลียบๆ เคียงๆ กันทางนี้ก่อนนะครับ

ก่อนอื่นมาแยกกันก่อนว่า แม้เราจะบอกว่า เขียนเว็บ ออกแบบเว็บด้วย css อย่างไรก็ตาม แต่แท้จริงแล้ว หาใช่ css อย่างเดียวไม่ เพราะ css เป็นเพียงแค่ตัวสร้างสีสัน ความสวยงาม จัดการเลย์เอ้าท์ ซึ่งเราต้องเขียนควบคู่ไปกับ [x]html

[X]HTML เป็นส่วนสำคัญของการวางโครงสร้างของข้อมูล ส่วน CSS นั้น เป็นส่วนของการจัดการรูปแบบของโครงสร้างของข้อมูลหรือเรียกง่ายๆ ว่า เป็นส่วนของการออกแบบเลย์เอ้าท์หน้าเว็บนั่นเอง

อย่างไรคือการวางโครงสร้างข้อมูล อย่างไรคือการจัดวางโครงสร้างข้อมูล