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)
เว็บมาสเตอร์