หลายคนยังสับสนในเรื่องของ css กับ html พอสมควร ดังที่ผมได้พูดคุยแลกเปลี่ยนกันทาง Windows Live Messenger [MSN] ซึ่งทำให้ผมต้องปรับโครงสร้างเว็บใหม่ เพื่อ ทำความเข้าใจกับ CSS ให้มากยิ่งขึ้นครับ และสำหรับผู้เริ่มต้นเลย ไม่รู้จะเอายังไง ก็เชิญแวะมาเลียบๆ เคียงๆ กันทางนี้ก่อนนะครับ
ก่อนอื่นมาแยกกันก่อนว่า แม้เราจะบอกว่า เขียนเว็บ ออกแบบเว็บด้วย css อย่างไรก็ตาม แต่แท้จริงแล้ว หาใช่ css อย่างเดียวไม่ เพราะ css เป็นเพียงแค่ตัวสร้างสีสัน ความสวยงาม จัดการเลย์เอ้าท์ ซึ่งเราต้องเขียนควบคู่ไปกับ [x]html
[X]HTML เป็นส่วนสำคัญของการวางโครงสร้างของข้อมูล ส่วน CSS นั้น เป็นส่วนของการจัดการรูปแบบของโครงสร้างของข้อมูลหรือเรียกง่ายๆ ว่า เป็นส่วนของการออกแบบเลย์เอ้าท์หน้าเว็บนั่นเอง
อย่างไรคือการวางโครงสร้างข้อมูล อย่างไรคือการจัดวางโครงสร้างข้อมูล
การวางโครงสร้างข้อมูลด้วย HTML แต่เดิมทีนั้น อาจจะ เช่น <font></font> หรือ <h1></h1> หรือแม้กระทั้ง table เองก็ตาม
การจัดการรูปแบบของข้อมูลของ html ก็เช่น
<table width=”500” height=”500” bgcolor=”black”></table>
- <table></table> คือ การวางโครงสร้างของข้อมูล
- width=500 height=500 bgcolor=black คือการจัดการรูปแบบของโครงสร้างของข้อมูล
ในที่นี้คือให้ตารางนี้มีความกว้าง 500 พิเซล สูง 500 พิกเซล พื้นหลังสีดำ
ด้วยลักษณะของการเขียน โค้ดแบบ html ฝังติดไปในบรรทัดเดียวกัน ทำให้เวลาที่เราจะกลับมาเรียกแก้ไข มันยากต่อการค้นหา และแก้ไขในอนาคต ส่วนนี้เองที่ CSS มีบทบาทเข้ามาเกี่ยวข้อง ซึ่งเรียกว่า การนำข้อมูลมาจัดระเบียบ จัดวางให้เข้าที่เข้าทางในรูปแบบเฉพาะตัวนั่นเอง
ที่สำคัญคุณสมบัติของการจัดวางโครงสร้างข้อมูลของ HTML อาจจะมีขีดจำกัดในเรื่องของการสนับสนุนบางเทคโนโลยีในอนาคต เช่น เขียนเว็บบน โทรทัศน์ ใช่ครับ บนทีวี หรือที่เห็นง่ายๆ บนมือถือและอื่นๆ ที่ต้องเน้นความรวดเร็ว และกินทรัพยากรน้อยๆ เป็นหลัก ซึ่ง <table> คือตัวอันตรายที่สุดที่เขาถกเถียงกัน
ข้อดีสำคัญของ CSS
- ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
- มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
- สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
- สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
- ง่ายในการเรียกดู Source
- ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
- อื่นๆ
แค่นี้คงจะพอทำความเข้าใจกันได้นะครับ สำหรับผู้เริ่มต้นจริงๆ แค่เพียงเยกออกให้ได้ว่า xhtml หรือ css ก็สามารถเดินต่อขั้นต่อไปได้ไม่มีปัญหาแล้วหละครับ
เพิ่มเติมนะครับ
เวลาสร้าง table คุณลองนึกภาพว่า คุณจะสร้างโดย เหมือนสร้างกรงขึ้นมา (หมายถึงการแบ่ง tr td เรื่อยๆ) แล้วเอาเนื้อหาไปใส่ ถ้าเนื้อหามีการย่อหน้าหรือเปลี่ยนตำแหน่ง คุณก็จะสร้างกรงขึ้นมาซ้อนเข้าไปเรื่อยๆ
ส่วนการสร้างโดยใช้ CSS นั้น คุณจะต้องเปลี่ยนการคิดใหม่สักหน่อย สิ่งที่คุณสร้างไม่ใช้กรง แต่มันเป็นกล่อง กล่องที่พร้อมจะลอยไปที่ไหนในหน้าก็ได้ ลักษณะของกล่องส่วนมากมักจะลอยไปแบบตัวใครตัวมัน คือเป็นกล่องเล็กๆ ลอยอยู่ในกล่องใหญ่ ซ้อนไปเรื่อยๆ ทีนี้ในโค้ด html มันจะเห็นแค่ <div>xxxx</div> ตัวที่กำหนดว่ากล่องแต่ละกล่องจะลอยไปทางไหน อยู่ตำแหน่งใด แบ็คกราวยังไง ลักษณะ text ในกล่องนั้นเป็นยังไง ก็คือ CSS ครับ
ก็ยังไม่ค่อยเข้าใจอยู่ดี ช่วยอธิบายขั้นตอนด้วยนะคะ เพราะเราเพิ่งจะเริ่มทำบล็อก แต่ยังทำไม่เป็นน่ะ
http://www.modelalive.com
พอจะแนะนำเรื่องCSSได้ไหมงับ จะทำกับเวปนี้
เยี่ยมยอด เว็บนี้ถือว่าเป็นผู้บุกเบิก css เลย
สำหรับมือใหม่ ต้องใช้พื้นฐานสักนิด เริ่มต้นใช้ style หรือ class ที่ง่ายๆก่อน
ส่วนบริษัทที่จำเป็นต้องใช้ css คือบริษัทต่างชาติ
บริษัทคนไทย อาจจะยังไม่สนใจเท่าไรนัก
ดูเหมือนLayerเหมือนกันนะครับ
เจ๋งดีครับ ขอบคุณมาก
น่าลองค่ะ
แต่คงต้องเรียนรู้อีกมาก
ทำแต่หน้าแรกเป็น Css ได้ไหมครับ
กำลังหัดทำเว็บนี้
http://www.ivehomespa.com
อยากทำ แต่ยังมีความรู้ไม่พอ
คห.แรกโดยคุณ artofid อธิบายได้แจ่มมากครับ ขอบคุณครับ
เราพึ่งจะทำงานเกี่ยวกับเว็บอ่ะค่ะ มึนตื้บเยย ไม่เป็นอะไรซักอย่าง TT^TT ขอบคุณมากนะคะสำหรับความรู้ที่นำมาแจกจ่าย
ขอบคุณมากค่ะ…จะเอาไปทำดูนะคะ แต่ไม่รู้จะสำเร็จอ๊ะป่าวดิ่…สู้ๆ
ผมกำลังจะศึกษา css ครับ ช่วยชี้แนะด้วย
ผมต้องการสร้างพื้นที่ร่วมแสดงความคิดเห็น เหมือนด้านล่างของเวบนี้ ต้องใช้ซอสตัวไหน อะไร ยังไงบ้างครับ …..
ขอความช่วยเหลือจากผู้รู้ทุกท่าน โปรดช่วยแนะนำด้วยขอรับ…..๑*_*๑ อยากที่จะรู้ว่ามีคนมา post แสดงความคิดเห็นบ้างไหม และจะได้รู้ข้อคอมเมนท์ต่างๆ ….. (ผมไม่แน่ใจว่าเรียกถูกหรือเปล่าครับ)
เวปนี้ดีมากเลยให้ความรู้เกียวกับ css เยอะมาก เพราะตัวผมเองไม่เคยได้สนใจกับเวปมากเท่าไรใช้แต่ Dreamweaver ลากๆแปะจบ แต่เลยออกมาไม่ค่อยสวยเท่าไรเลยนั้งหาวิธีมากเลยมาเจอเว็บนี้โดนเลย
ผมเลยตอบแทนโดยหาหนังสือ CSS มาแจกคับ
http://www.uploadd.com/download.aspx?pku=334207FB9FCLCAXJ99NT398SVMM9GI
*** แก้ไขเพิ่มเติม 12 มกราคม 2551
เพิ่งเริ่มหัด Web design ด้วย CSS เพื่อทำ web standard อ่ะครับ พี่ๆน้องๆ มีอะไรบ้างที่ผมควรรู้ ช่วยแนะนำด้วยนะค้าบบ
ขอบคุณมั่ก ๆ เลยน๊ะคับที่เขียนเนื้อหาประเภทนี้ออกมา
ได้ความรู้เย๊อะเรยค้าบบบ
^^\’\’
เพิ่งเริ่มหัด Web design ด้วย CSS เพื่อทำ web standard อ่ะครับ พี่ๆน้องๆ มีอะไรบ้างที่ผมควรรู้ ช่วยแนะนำด้วยนะค้าบบ
พึ่งเริ่มต้นเช่นกันค่ะ ไม่รู้ด้วยซ้ำว่า css คืออะไร แต่พอเห็นเว็บ ที่เขาทำสวย ๆ แล้ว อยากทำเหมือนเขาอ่ะค่ะ รบกวนผู้รู้ช่วยแนะนำด้วยนะคะ สนใจมาก ๆ เลยค่ะ จากที่อธิบายข้างต้นแล้วมันน่าสนอ่ะค่ะ อยากทำเป็นอ่ะค่ะ
ทำ web app อยู่อ่ะค่ะ เปงโปรเจคจบ พอดีนู๋ไม่รู้จักเลยเจ้า css อารายเนี่ย ขอบคุณสำหรับบทความดี ๆ นะคะ ทำให้พอเข้าใจมากขึ้น นู๋ทำเว็บ แต่แบ่งหน้าโดยใช้ตารางเอาอ่ะค่ะ และอยากทำได้เหมือน คห แรก ที่มันสามารถขยับล่องลอยได้ มันทำยังไงอ่ะคะ แต่เพื่อนมันแนะนำให้เขียน Ajax พอดีนู๋เห็นว่ามันมี css จะทำง่ายก่าไหมคะ นู๋ถนัดแต่เขียนโปรแกรมอ่ะค่ะ แต่ตกแต่งไม่เป็น ช่วยชี้แนะหน่อยนะคะ