Home > เริ่มต้นกับ CSS > 10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part2

10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part2

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 ก็จะแสดงผลเหมือนกันครับ

Related Articles


Share
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. September 13th, 2008 at 17:31 | #1

    ขอถามเกี่ยวกับการ set image border โดยใช้ CSS ครับ ถ้าเราใช้ CSS เหมือนข้างบนแสดงว่าถ้าเราจะใส่ image ทุก image ที่เราจะใส่มันจะมี border = 0 ให้โดย default ใช่มั้ยครับ แต่ถ้าบาง image เราอยากจะกำหนด border ให้มัน เราควรที่จะสร้าง class ขึ้นมาใหม่ใช่มั้ยครับ กำลังสนใจเรื่อง CSS น่ะครับ อยากจะเอาไปใช้น่ะครับ แต่ความรู้ด้านนี้ไม่ค่อยมีเท่าไหร่ก็ำกำลังศึกษาอยู่น่ะครับ ขอคำชี้แนะด้วยนะครับ:)

  2. September 13th, 2008 at 19:09 | #2

    ถูกต้องตามนั้นเลยครับ

  3. April 17th, 2010 at 00:16 | #3

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

    ตอนนี้เริ่มทำเว็บได้สวยงามขึ้น และง่าย สะดวกขึ้น เพราะกำหนด CSS เอาไว้เป็นแม่แบบ ไม่ต้องนั่งไล่แก้ทีละหน้าเหมือนเมื่อก่อน

    ขอบคุณมากครับที่นำความรู้มาให้อ่านกัน จะติดตามอย่างกระชั้นชิดครับ

    วิท
    ติวเตอร์พอยท์ (http://www.tutorpoint.net)
    เว็บมาสเตอร์

  1. No trackbacks yet.