10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part2
Feb 27th
6. Don’t worry about image borders
เลิกใช้ border=”0″ ในรูปภาพที่เป็น Link หากเราใช้ css จะง่ายกว่านั้นมาก
<style type="text/css"> img { border : 0; } </style> <a href="#"><img src="/path/to/image.jpg" /></a>
7. Aligning text with form inputs
บ่อยครั้งที่เรา พิมพ์ข้อความ ถัดจากจาก ช่องกรอกข้อความ แต่มันไม่อยู่ในไลน์เดียวกัน วิธีง่ายๆที่จะจัดให้ช่องและข้อความอยู่ตรงกลาง ดังนี้
<style type="text/css"> input, select { vertical-align : middle; } </style> Username: <input type="text" name="example" />
ตัวอย่างนี้อาจจะนึกไม่ออก ต้องลองใช้ดูนะครับ
8. The great tables vs. divs argument
ในข้อนี้ผมจะบอกคุณว่า เราจะวางโครงสร้างเว็บเพจอย่างไร บางคนเมื่อศึกษา CSS มาซักระยะหนึ่ง อาจจะคิดว่า การใช้ table เป็นเรื่องผิด และเลวร้าย หรือเป็นข้อห้าม 
ความคิดนี้ไม่ถูกต้องนะครับ ความจริงก็คือ
- Table ควรจะใช้เมื่อ คุณต้องการแสดงผลข้อมูลในรูปแบบตาราง
- ควรใช้ DIV ให้มาก เท่าที่จะเป้นไปได้ ในส่วนของการ layout ก็ให้ใช้ float position magin เป็นตัวควบคุม
- ในบางครั้ง บางส่วน DIV ก็เป็นเรื่องยากครับ ดังนั้นแล้ว table ก็ยังจำเป็นอยู่นั่นเอง
- เมื่อไรควรใช้ table หรือ div ก็ควรคิดให้ดีก่อนครับ table อาจเป็นเหมือนยาขม สำหรับ css designer แต่มันก็ช่วยให้งานสมบูรณ์ได้ครับ
- อย่างไรก็ตาม เมื่อจะใช้อะไรก็ให้แน่ใจว่าคุณใช้มันอย่างมีเหตุผล และถูกต้อง
ตัวอย่างการใช้ div และ table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> body { background-color : #f7f7f7; } #sample1 { border-collapse : collapse; width : 510px; background-color : #fff; border-left : 1px solid #000; border-right : 1px solid #000; } #sample1 td { padding : 5px; } #sample2 { margin : auto; padding : 5px; width : 500px; background : #fff; border-left : 1px solid #000; border-right : 1px solid #000; } </style> </head> <body> <!-- Method 1: Using tables --> <table id="sample1" align="center"> <tr> <td>Sample text</td> </tr> </table> <hr /> <!-- Method 2: Using divs --> <div id="sample2"> Sample text </div> </body> </html>
- ในรูปแบบ div ใช้ css และ html น้อยกว่า
- จะเกิดความแตกต่างในส่วนของ padding ระหว่า table กับ div
- โค้ดนี้จะไม่ work กับ IE ต่ำกว่า 6 ครับ
- ถ้าจะให้ดูได้ใน IE6 ต้องใช้ DOCTYPE ที่เป็น XHTML 1.0 Transitional
- จะเห็นว่า โค้ดนี้ ไม่ถูกต้อง หากกำหนดเอกสารด้วย XHTML 1.0 Strict เพราะว่ามี align=”center”
9. Misusing and overdoing CSS
มันเกิดขึ้นได้ง่ายมากที่เราจะใช้ css ผิด หรือ มากเกินไป เรามาดูตัวอย่างที่ไม่ดีกัน
a.navLink { font-weight : bold; }
<a href="/link1" class="navLink">Link 1</a> <a href="/link2" class="navLink">Link 2</a> <a href="/link3" class="navLink">Link 3</a> <a href="/link4" class="navLink">Link 4</a>
ควรเขียนแบบนี้จะดีกว่าครับ
#navigation a { font-weight : bold; }
<div id="navigation"> <a href="/link1">Link 1</a> <a href="/link2">Link 2</a> <a href="/link3">Link 3</a> <a href="/link4">Link 4</a> </div>
10. Print stylesheets
เมื่อเว็บเพจของคุณ เป็นแบบ content และต้องการให้ผู้ใช้ print ได้ จะทำอย่างไร ให้ print style sheets ในรูปแบบที่เรียกว่า “printer friendly” เราสามารถกำหนดสไตล์ชีทในไฟล์เอกสารหน้าเดียวกัน ให้ใช้สำหรับ print เท่านั้น รูปแบบ print คุณอาจกำหนดให้ ไม่แสดงเมนูบาร์ซึ่งเป็นภาพกราฟฟิค หรือแบนเนอร์โฆษณา ให้เปลืองหมึก ดูตัวอย่าง
<link rel="StyleSheet" type="text/css" href="/css/default.css" media="screen" /> <link rel="StyleSheet" type="text/css" href="/css/default-print.css" media="print" />
สไตล์ชีท ที่กำหนด media=”print” จะถูกใช้ตอน print เท่านั้น ดังนั้นแล้วคุณสามารถกำหนดในส่วนที่จะไม่ให้ print ได้เช่นส่วนของเมนู เป็นต้น
#primary-nav-container { display : none; }
สุดท้ายนี้ฝากไว้อีกนิดกับเรื่องของ browser หากคุณต้องการให้เว็บไซต์ของคุณดูดีเหมือนกันทั้ง IE และ Firefox ก็ควรที่จะต้องรู้ว่าค่า default ของมันเป็นอย่างไร ยกตัวอย่างเช่น ul เมื่อใช้ ul จะมีการย่อหน้าให้อัตโนมัติ สำหรับ IE นั้นจะใช้ margin เท่านั้น ส่วน FF จะใช้ทั้ง margin และ padding ถ้าคุณกำหนด margin-left ใน ul จะเกิดผลใน IE ครับแต่ไม่เกิดผลใน FF ดังนั้น ถ้าเรากำหนด padding เป็น 0 ที่ ul ทั้ง FF และ IE ก็จะแสดงผลเหมือนกันครับ
ขอถามเกี่ยวกับการ set image border โดยใช้ CSS ครับ ถ้าเราใช้ CSS เหมือนข้างบนแสดงว่าถ้าเราจะใส่ image ทุก image ที่เราจะใส่มันจะมี border = 0 ให้โดย default ใช่มั้ยครับ แต่ถ้าบาง image เราอยากจะกำหนด border ให้มัน เราควรที่จะสร้าง class ขึ้นมาใหม่ใช่มั้ยครับ กำลังสนใจเรื่อง CSS น่ะครับ อยากจะเอาไปใช้น่ะครับ แต่ความรู้ด้านนี้ไม่ค่อยมีเท่าไหร่ก็ำกำลังศึกษาอยู่น่ะครับ ขอคำชี้แนะด้วยนะครับ
ถูกต้องตามนั้นเลยครับ
เป็นบทความที่ดีมากๆเลยครับ เหมาะสำหรับคนที่กำลังศึกษา CSS มากๆ โดยเฉพาะคนที่ศึกษาเองอย่างผม เมื่อก่อนผมทำเว็บโดยใช้โปรแกรมสำเร็จรูป แล้วก็ค้นพบว่ามันแสดงผลไม่ตรงกันในหลายๆเบราว์เซอร์ ก็นั่งงง นั่งงมกับมันมานาน จนมารู้จักกับ CSS ก็ศึกษานานมาก เพราะหาเว็บที่รวบรวมข้อมูลเกี่ยวกับ CSS ยากมาก โดยเฉพาะในไทย
ตอนนี้เริ่มทำเว็บได้สวยงามขึ้น และง่าย สะดวกขึ้น เพราะกำหนด CSS เอาไว้เป็นแม่แบบ ไม่ต้องนั่งไล่แก้ทีละหน้าเหมือนเมื่อก่อน
ขอบคุณมากครับที่นำความรู้มาให้อ่านกัน จะติดตามอย่างกระชั้นชิดครับ
วิท
ติวเตอร์พอยท์ (http://www.tutorpoint.net)
เว็บมาสเตอร์