Skip To Content

Cascading Style Sheets

การเขียน CSS (Cascading Style Sheets)

  1. การสร้าง Graph โดยใช้ XHTML CSS

    สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ

    ส่วนใหญ่ที่ผ่านมาเราจะเห็นเป็นการนำเอารูปภาพสำเร็จมาวางแล้วใช้ attribute alt หรือ title เป็นตัวขยายความบ่งบอกความหมายของรูปนั้น ๆ หรือ ใช้ flash หรือ Ajax, Javascript อย่างที่เกริ่นไว้ข้างต้น (อนาคตอันใกล้ Flash จะสามารถมองเห็นได้ด้วย Search Engine แล้ว ถ้าเป็นความจริง Flash Web Designer ก็คงจะได้เฮกันล่ะครับ) แต่ผมมุ่งประเด็นไปตรงที่ว่า หากทำให้ Graph สื่อช้อมูลได้ตรงประเด็นจริง ๆ รับรู้ข้อมูลได้จริง ๆ อ่านค่าได้จริง ว่าในแต่ละข้อมูลนั้นได้เปรียบเทียบกันแล้วเป็นอย่างไร และถ้าหากว่าวันใดวันหนึ่ง file css หายไป การเรียงของข้อมูล และการให้ข้อมูลจะยังคง ปะติดปะต่อ เหมือนเดิม หรือเปล่า ไม่ใช้เป็นแค่รูปภาพที่แสดงขึ้นมาเฉย ๆ ไม่ได้บอกข้อมูล หรือรายละเอียดแต่อย่างได (ก็คือความเป็น semantic นั่นแหละ) ทำให้ข้อมูลเป็นประโยชน์ที่สุด มีประสิทธิภาพที่สุด ในการให้ข้อมูลแก่บุคคลทั่วไปที่ค้นหาข้อมูล ทั้งนี้จะได้ในเรื่องความเป็น Accessibility ในการให้ข้อมูล รายละเอียดต่าง ๆ ที่สามารถเข้าดูข้อมูลได้หลาย User ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

  2. ทำ Rollover Navigation Menu ด้วย CSS อย่างง่าย

    ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง concept แนวคิดมานานพอสมควรแล้ววันนี้ท่านเจ้าสำนักของเรา แยบ ๆ ผมมาว่าปลาเอ้ย เขียนเกี่ยวกับวิธีการปฏิบัติสักหน่อยสิ นักเขียนท่านอื่น เขาไม่ส่งบทความมาเสียที เขียนไปก่อนละกัน โอเค ก็ไม่รู้จะเขียนอะไรน่ะนะ O_o นั่งคิดอยู่นาน เอา Rollover Navigation ละกันนะ แบบแรกเป็นรูปภาพ Rollover ง่าย ๆ เลยละกัน เผื่อท่านใดอยากได้แนวทางการนำไปใช้ ถ้าท่านใดรู้แล้วก็มาแลกเปลี่ยนกันเผื่อจะได้อะไรที่มันประหยัดกระทัดรัด เอามาอวดมาเฉิดฉายกันหน่อย ในส่วนของ xhtml

  3. การเขียน CSS Elastic Layout

    หลังจากที่ลองเล่นกับ CSS แบบ Liquid Layout ไปแล้วตอนนี้มาลองเล่นแบบอื่นกันดูบ้างครับ Elastic Layout เป็นรูปแบบการเขียน CSS ที่ผมนำมาเสนอเป็นรูปแบบที่สอง จะเป็นอย่างไรนั้น ตามมาดูกันครับ

  4. การเขียน Liquid Layouts 3 Columns

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

  5. CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

    ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

  6. ลับสมองไปกับ float ตอนที่ 1

    browser ทุกวันนี้ ต่างก็ถูกพัฒนาขึ้นเรื่อย ๆ ทำให้เราสร้าง layout จาก css ได้ง่ายมากขึ้นด้วย float เป็นทางเลือกหนึ่งที่นิยมนำมาใช้ในการวาง layout ด้วย css แต่มันก็ไม่ใช่ทางออกทางเดียวนะครับ เพียงแต่ว่ามันง่ายในการใช้งาน

  7. การจัดการ font ในเอกสาร XHTML โดยใช้ CSS

    เป็นที่ทราบกันอยู่แล้วว่าขนาด default ของ font ในแต่ละ browser เวลาที่เรากด small, smaller, medium, larger และ largest นั้นอยู่ในหน่วย % คือ 90%, 100%, 110% และ 120% แต่ขนาด zoom นั้นจะเป็นเอกลักษณ์ของแต่ละ browser

  8. Descendant selectors ของ CSS

    Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น

  9. แนวทาง ในการแก้ไขปัญหา Float Model

    การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout

  10. Multi-Column Layout Design

    ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากัน

  11. การใช้ !important กับ IE6

    เมื่อเราใช้ !important เติมท้าย value ของ property ใดใดของ CSS โมเดิร์นบราวเซอร์ส่วนใหญ่นั้นจะเลือกทำตามคำสั่งนี้ แต่ทว่า IE6 หรือ เวอร์ชั่นต่ำกว่านั้น จะมีปัญหากับเจ้า !important นี้

  12. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standard (จบ)

    เมื่อคุณย่างก้าวที่จะเข้าสู่โลกของการ design แบบ tableless layout นั้น สิ่งที่คุณต้องคิดถึงไม่ใช่แต่เพียงคิดว่าจะจัดวาง container elements ของคุณอย่างไรแต่สิ่งที่คุณไม่ควรมองข้ามคือการจัดการ selector ของคุณด้วย

  13. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards (3)

    การที่จะเขียน code markup ขึ้นมาให้สนับสนุนกับมาตรฐานเต็ม ๆ นั้นมันขัดแย้งกับการที่เรา ใช้ table ที่เป็น container elements บรรจุทุก ๆ สิ่ง ทุก ๆ อย่าง แบบเมื่อก่อนโดยสิ้นเชิง เรา จะ container elements ให้เหมาะสมกับข้อมูล

  14. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards (2)

    การแสดงผลของในแต่ละ browser อีกซึ่งแต่ละ browser นั้นมีผู้พัฒนา และ มาตรฐานไม่เหมือนกันอีก เจอทีแรกผมก็สบถเลย แสดด ... ทำไมมันไม่ทำมาให้มันเหมือน ๆ กันฟะ และ นั่นแหละที่ผมได้รู้จัก W3C

  15. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards

    ย้อนกลับไปเมื่อ 1 ปีเกือบ ๆ สองปี ที่แล้วที่ผมยังใหม่สำหรับ CSS-XHTML อยู่ มีอะไรหลายอย่าง ๆ ที่ต้องปรับตัวปรับระบบความคิดต่าง ๆ หลาย ๆ อย่าง ด้วยความคุ้นชินกับการ design ในแบบ old school อยู่

  16. Double-Float Margin Bug ใน IE6

    เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที

  17. CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2)

    และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

    CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

    Box Model

    เราสามารถกำหนดตำแหน่งให้ภาพอยู่ที่ไหนก็ได้ ตัวหนังสืออยู่ที่ไหนก็ได้ด้วย properties ที่ชื่อว่า position หรือ float ช่องว่างระหว่างตัวอักษร ระยะห่างระหว่างบรรทัด ขนาดตัวอักษรเล็กใหญ่แตกต่างกัน และคุณประโยชน์อีกมากมายซึ่ง ผม พร เพื่อนและ ThaiCSS คงทราบกันดี หรือผู้ที่เพิ่งเคยเข้ามาเยี่ยมชมก็ให้ลองไปอ่านดูในส่วนของ CSS,XHTML Online หรือ บทความ: สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS) ดูว่ามีการพูดถึงไว้อย่างไรบ้าง CSS จะช่วยให้เราทำงานกับการ Design Website ได้มากขึ้นเพราะมีความยืดหยุ่นมาก ขึ้นอยู่กับแล้วล่ะว่าทีนี้เราจะนำเสนอกล่องเหล่านั้นสู่สายตาคนภายนอกอย่างไร ตัวอย่างการ Design แบบนอกกรอบโดยใช้ CSS

  18. CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 1)

    กับการนั่งทำงาน Job ที่รับมาตาเปียกตาแฉะไม่ก็นั่งหาอะไรอ่านไปเรื่อย ๆ ตามประสาคนชอบสอดชอบแส่หาเรื่องปวดกบาลใส่ตัว พอเห็นเจ้าขนมต่าง ๆ เนี่ยมันก็ทำให้ผมมาคิดได้ว่า เอ้อ! นะมันก็มีกรอบก็มีเหลี่ยม และ ก็รูปทรงอื่น ๆ หลากหลายเหมือนเวลาเรามานั่งแพลนทำ Layout ของ Website นี่ล่ะ

    สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ ... จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

  19. สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS)

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

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

    เพราะฉะนั้นเมื่อคุณจะต้องออกแบบ website คุณจะต้อง คิดและมองอย่าง นักเขียน เป็นอันดับแรก จากนั้นคุณต้องคิดและมองอย่าง วิศวกร และ ท้ายที่สุดถึงจะคิดและมองอย่าง ศิลปิน ทีนี้เราก็กลั่นกรองออกมาตาม sense ที่เราได้ลำดับความคิด และ เรียนรู้ใหม่ทั้งหมดของเราเลย เช่น สีสันหน้าตาเป็นอย่างไร การจัดวางตัวหนังสือ การกำหนดช่องว่างระหว่าง content จัดเรียงหน้าตาที่ user จะเข้ามาสัมผัสอย่างไรให้สวยงามเหมาะสมที่สุด ทำอย่างไรให้การแสดงผลของ website ของเรานั้นไม่ผิดเพี๊ยน ข้อมูลไม่มีการเสียหายเมื่อต้องการเปลี่ยนแปลงโครงสร้าง และ/หรือ รูปร่างหน้าตา จะเห็นได้ว่ามันจะทำงานร่วมกันอย่างเป็นระบบ

  20. เขียน css สำหรับเครื่องปริ้นท์

    หลายคนยังคิดไม่ออกว่ามันคืออะไร การเขียน css สำหรับเครื่องปริ้นท์ หรือการกำหนด print media ให้กับหน้าเว็บเพจ เราสามารถเขียน css ควบคุมหน้าเอกสารในเว็บของเราได้ ว่าจะให้แสดงผลต่างไปอย่างไร ใน User Agents แบบอื่นๆ ไม่ใช่แค่บราวเซอ

  21. เข้าใจ CSS Selectors มากยิ่งขึ้น มั่วกันให้น้อยลง

    ทำไมถึงต้องพูดกันให้บ่อยด้วยหรือ กับแค่เรื่อง CSS Selectors มันก็มี class ( . ) และ id ( # ) ไม่ใช่หรือ ตอบไปเลย ไม่ใช่ครับ

  22. ThaiCSS กับ Screen, Print และ Handheld Media type

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

  23. Multiple Style Sheet จบปัญหาขั้นต้น กับ Netscape4

  24. บทเริ่มแห่งสงคราม (Netscape 4)

  25. ประกาศสงคราม

    Cascading Style Sheets (CSS) เป็นเครื่องมือที่สมบูรณ์ที่ดีที่สุด ในการออกแบบ website ในขณะนี้ ถึงแม้ความเป็นจริง CSS ยังไม่สามารถนำมาใช้งาน ได้อย่างสมบูรณ์ตามที่เราคาดหวังไว้ก็ตาม