ความรู้พื้นฐานของ CSS

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

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

รู้จัก และ เข้าใจใน Web Standards

เพื่อน ๆ Designer หลายท่าน รวมถึงผมนั้น ต่างรังสรรค์ผลงานของตนเองมาจากความเข้าใจเกี่ยวกับศิลปะล้วน ๆ คงไม่มีใครปฏิเสธว่า เราจะมองงานของเราโดยรวมนั้นเป็นภาพ ๆ หนึ่งซึ่งเราจะปรุงเสริมเติมแต่งลงไปอย่างไร ส่วนการ code นั้นแทบจะไม่มีการได้คำนึงถึงเลย เราบางคนใช้ XHTML และ CSS ไปเรื่อยเปื่อยแบบตามมีตามเกิด จะมีใครบ้างที่เกิดความสงสัย ใคร่รู้ว่า ความหมายโดยแท้จริงนั้นมันมีอะไรอยู่บ้าง เราเพียงแต่คิดว่าเราจะเรียงกล่องเหล่านั้นออกมาให้สวยงามอย่างไร เคยคิดที่จะศึกษาธรรมชาติของมันโดยแท้จริงไหม CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 1) และ CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2) ส่วนใหญ่โดยธรรมชาติของพวกเราแล้วเราเพียงแต่คิดง่าย ๆ ว่า ขอแค่มันออกมาดูดีก็เป็นพอแล้ว คงเป็นส่วนน้อยที่อยากจะศึกษาให้เข้าใจถึงแก่นแท้ของ Web Standards นั้นเพื่อที่จะนำผลประโยชน์ที่จะได้มาใช้ให้เกิดผลกับงานของตนเอง และ ผู้ใช้ให้มากที่สุด

เราคงต้องจัดลำดับความคิดของเราใหม่หากเราต้องการที่จะเรียนรู้ และ ทำความเข้าใจเกี่ยวกับ Web Standards ทำไม? เพราะเราต้องคำนึงถึงในทุก ๆ รายละเอียดก่อนที่จะนำเสนอทุก ๆ อย่างที่เราต้องการจะสื่อออกไป เพราะทุก ๆ อย่างละเอียดอ่อน, มีความหมาย และ มีความสัมพันธ์กันอย่างต่อเนื่อง scope ง่าย ๆ คือ เราต้องมอง และ คิดในแง่มุมที่แตกต่างไป โดยหลัก ๆ แล้วมีดังนี้

  1. คิดและมองอย่าง นักเขียน
  2. คิดและมองอย่าง วิศวกร
  3. คิดและมองอย่าง ศิลปิน

Float ตอนที่ 2

ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ

Conditional Comment ใน Internet Explorer

ตามที่พรอยากให้เขียนนะครับ วันนี้ผมจะพูดถึงเจ้า Internet Explorer จากค่าย Microsucks ที่อาจจะป่วนศีรษะเราหลาย ๆ คนให้กลัดกลุ้มใจเวลาทำงาน

วันนี้ผมจะพูดเกี่ยวกับการเขียน Conditional Comment ใน Internet Explorer หรือที่เพื่อน ๆ เรียกกันว่า Rules ให้ Internet Explorer นั่นเอง

Conditional Comment นั้นจะทำงานได้ในเฉพาะ Internet Explorer เท่านั้น เป็นส่วนที่ออกแบบมาเพื่อการนี้เลยเพื่อ เป็นการสั่งให้เพิ่มคุณสมบัติพิเศษ หรืออะไรก็แล้วแต่ให้กับ Internet Explorer และ Conditional Comment นี้จะทำงานได้กับ Internet Explorer ตั้งแต่ Version 5 ขึ้นไปและอาจจะเป็นไปได้ว่าการทำงานของมันใน IE5, IE5.5 และ IE6 จะแตกต่างกันด้วย

Conditional Comment จะเขียนในลักษณะนี้ครับ

<!--[if IE 6]>

คุณสมบัติพิเศษสำหรับ Internet Explorer เขียนที่นี่

<![endif]-->

โครงสร้างหลัก ๆ ของมันก็คือ เหมือนการเขียน comment ธรรมดาใน (X)HTML TAGs ซึ่งนั่นก็คือ การเขียนแบบนี้ “<!– –>” นั่นเอง ซึ่ง browser ตัวอื่น ๆ นั้นจะมองเห็นมันเป็น comment ธรรมดา ๆ เท่านั้นเอง และ จะอ่านข้ามไป

Internet Explorer นั้นถูกกำหนดมาให้มองเห็นและทำงานตามคำสั่งก็ต่อเมื่อได้เห็น การเขียน comment นี้ “<!– [if IE] –>” เท่านั้น เมื่อ Internet Explorer เจอมันจะมองเป็นคำสั่ง ๆ หนึ่งเหมือนเขียนกับที่มันอ่าน (X)HTML TAGs หรือ Script โปรแกรมตัวอื่น ๆ

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

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

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 2 (เมา DIVs)

เมา div(s) หลายคนอาจจะเคยเป็น เพราะผมก็เคยเมามาก่อน การเมา div มันไม่เหมือนการเมาเบียร์เท่าไหร่ เพราะเมาแล้วไร้ประโยชน์ แต่ได้ประสบการณ์ แต่ว่าประสบการณ์อย่างนี้ ผมไม่อยากให้เพื่อนๆ พี่ๆ น้องๆ ลุง ป้า น้า อา มาเมากะผมด้วย เพราะน่าจะแนะนำกันได้ไม่มากก็น้อย

การเปลี่ยนใจจาก table มา div ก็เหมือนจะรู้จักแต่ div เท่านั้นที่ผมจำได้ในตอนแรกๆ ที่ผมเขียน css+xhtml ผม div กระจายวายป่วงมากๆ เช่น แค่การทำตัวหนังสือใหญ่ๆ เป็น header ผมก็จะใช้

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial