Back to iWebsmile.com

CSS Short hands

ผมเชื่อว่า Web Designer หรือ Web Developer หลายๆ คนต้องเคยปรับแต่ง แก้ไข หรือเคยเขียน CSS กันมาแล้ว และหลายๆ คนก็คงงงกับการเรียกใช้ Property ผมจะขอทบทวน CSS เบื้องต้นให้ท่านได้อ่านทำความเข้าใจง่ายๆ ก่อนนะครับ

Cascading Style Sheet หรือที่เราเรียกย่อๆ กันว่า CSS คือ ภาษาหรือชุดคำสั่งในการจัดการหน้า HTML เพื่อให้การแสดงผลถูกต้อง เช่นการกำหนดสีพื้นหลัง สีอักษร จัดโครงสร้างหน้า HTML เป็นต้น

รู้จักกับ Selector ของ CSS ก่อน

Selector คือประเภทหรือรูปแบบในการใช้เรียก CSS ถ้าผมอธิบายแบบนี้หลายคนคงจะงงกันทีเดียว เพื่อช่วยให้เข้าใจได้ง่ายขึ้น ผมจะแบ่ง CSS Selector เป็น 3 แบบ

  1. Class Selector — การเรียกใช้คุณสมบัติของคลาสนั้นด้วย Attribute ใน Tag HTML ซึ่ง class จะถูกเรียกใช้งานบ่อยที่สุดและไม่มีข้อจำกัดด้วยจำนวนครั้งในการเรียกใช้งาน เช่น

    .content {
              padding: 10px;
    }

    <div class="content">Lorem ipsum</div>

    จากตัวอย่างโค้ดด้านบน คือการประกาศคลาส content โดยการใส่ Dot(.) ไว้ข้างหน้าชื่อคลาสเพื่อบอกให้ HTML และ CSS ทราบว่าเป็น Selector ประเภทคลาส Class Selector

  2. ID Selector — การเรียกใช้คุณสมบัติของคลาสนั้นด้วยการไปกำหนด Attribute ภายใน Tag HTML แต่ทั้งนี้การเรียกใช้ ID นั้นมีควรเรียกใช้เท่าที่จำเป็นเท่านั้น เพราะ ID Selector ควรมีการเรียกใช้ไม่ซ้ำกันภายใน 1 หน้า ตัวอย่างเช่น

    #container {
              padding: 10px;
    }

    <div id="container">Lorem ipsum</div>

    จากตัวอย่างด้านบนเป็นการประกาศ ID Selector ชื่อว่า container ด้วยการใส่เครื่องหมาย Sharp(#) ไว้ด้านหน้าชื่อ ID ที่เราตั้งไว้ และเรียกใช้ด้วยคำสั่ง Attribute ที่มีชื่อว่า id="ชื่อ ID"

  3. Contextual Selector — การกำหนดคุณสมบัติของการแสดงผลแบบเจาะจงที่ Tag HTML ซึ่งจะถูกเรียกใช้เป็นตัวเลือกที่สอง เมื่อเราต้องการกำหนดคุณสมบัติเฉพาะหรือการใช้เพื่อสืบทอดคุณสมบัติบางส่วนเพื่อปรับเปลี่ยนแค่ส่วนที่แตกต่างกันเพียงบางจุด ตัวอย่าง เช่น

    h1 {
              font: normal 1.5em/1.5em tahoma;
              color: green;
    }

    h1 span {
              color: red;
    }

    <h1><span>Pirun</span> Tirapibal</h1>

    ผลลัพธ์ที่ได้คือ คำว่า "Pirun" จะเป็นสีแดง ส่วนคำว่า "Tirapibal" จะเป็นสีเขียว ส่วนคุณสมบัติของ Font จะยังคงเหมือนเดิม แต่จะแตกต่างกันแค่สี

สิ่งที่คุณต้องรู้ก่อนไปหัวข้อต่อไป

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

CSS Short Hands

คือการกำหนดให้ Property หรือคุณสมบัติของ Selector ที่มีการทำงานเช่นเดียวกัน margin-top กับ margin-bottom หรือ border-top กับ border-left เป็นต้น เพื่อให้มีขนาดหรือวิธีการเขียนที่สั้นลง อีกทั้งยังลดขนาดไฟล์ให้เล็กลง และยังช่วงให้การประมวลผลที่ Server น้อยลง เว็บไซต์เราก็จะโหลดได้เร็วขึ้นอีกด้วย จากนี้ผมจะยกตัวอย่างการเขียน

  1. Margin Property

    .content {
              margin-top: 10px;
              margin-right: 20px;
              margin-bottom: 15px;
              margin-left: 5px;
    }

    จากโค้ดด้านบนจะสังเกตุได้ว่า คุณสมบัติของคลาสนี้คือ margin ที่มี Value ไม่เหมือนกันเลย ดังนั้นวิธีการเขียนเราสามารถเปลี่ยนเป็น Short hands ได้ดังโค้ดด้านล่างนี้

    .content {
              margin: 10px 20px 15px 5px; /* margin: top right bottom left */
    }

    โดยค่าต่างๆ ที่นำมาใส่ใน Property นั้น จะเรียงกันตามเข็มนาฬิกา

  2. Padding Property

    .content {
              padding-top: 10px;
              padding-right: 20px;
              padding-bottom: 10px;
              padding-left: 20px;
    }

    จะสังเกตุได้ว่าคุณสมบัติของคลาสนี้จะมีค่าที่เหมือนกัน คือ Top กับ Bottom และ Right กับ Left เราสามารถเขียนให้เป็น Short hands ได้ดังนี้

    .content {
              padding: 10px 20px; /* padding: top-bottom right-left */
    }

    ซึ่งค่านั้นจะถูกจับคู่กันโดยด้าน Top กับด้าน Bottom จะใช้ค่าร่วมกัน และ Right กับ Left ก็จะใช้ค่า 20px ร่วมกัน

  3. Background Property

    body {
              background-image: url(background.jpg);
              background-color: #CCC;
              background-repeat: repeat-x;
              background-position: center top;
    }

    สามารถเขียนเป็น Short hands ได้ดังนี้

    body {
              background: url(background.jpg) #CCC repeat-x center top;
    }

    นอกจากนี้ Background position นั้นอาจจะกำหนดค่าให้ Percent(%) หรือ Pixel ก็ได้เช่นกัน

  4. Font Property

    .text {
              font-variant: small-caps;
              font-style: italic;
              font-size: 12px;
              line-height: 15px;
              font-family: Tahoma, Geneva, sans-serif;
    }

    สามารถเขียนเป็น Short hands ได้ดังนี้

    .text {
              font: italic small-caps 12px/15px Tahoma, Geneva, sans-serif;
              /* font-style font-variant font-weight font-size/line-height font-family */
    }

    การเรียง Property ของ Font นั้นจะต้องเรียงตามโครงสร้างที่ถูก Comment ไว้เสมอ หามีการเปลี่ยนแปลง สลับตำแหน่งจะทำให้ Property ของ Font นั้นไม่สามารถทำงานได้

  5. การกำหนด Selector ด้วยตัวเอง
    • การใช้ Comma(,) ขั้นระหว่าง Tag — เราใช้ Comma ขั้นเมื่อ Selector ที่เราใช้งานนั้นมีคุณสมบัติที่เหมือนกัน ตัวอย่างเช่น

      h1 {
                padding: 2px;
      }
      h2 {
                padding: 2px;
      }
      .header {
                padding: 2px;
      }

      จากโค้ด CSS ด้านบนนี้จะเห็นว่า Selector ทั้ง 3 นี้มีคุณสมบัติที่เหมือนกันคือ Padding มีค่า 2px เราจึงสามารถที่จะเขียน Short hands ด้วย Comma ได้ดังนี้

      h1, h2, .header {
                padding: 2px;
      }

    • การใช้ Space หรือการเว้นวรรค — วิธีนี้จะก็ต่อเมื่อเราต้องการระบุให้เจาะจง เพราะในบางครั้ง Tag HTML ไม่ได้ถูกเรียกใช้งานเพียงแค่ครั้งเดียวใน 1 หน้า เราจึงจำเป็นต้องมีการระบุให้เจาะจงลงไปมาขึ้นโดยการอ้างอิง Tag ที่เกี่ยวข้อง

      a {
                color: #000;
      }
      nav a {
      color: #FF0;
                text-decoration: none;
      }

      <nav>
           <ul class="navigator">
                <li><a href="#">home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contacts</a></li>
           </ul>
      </nav>
      .
      .
      Element
      .
      .
      <a href="#">More CSS</a>

      จากตัวอย่าง HTML ไม่ได้มี Tag <a> เพียงแค่ตำแหน่งเดียวดังนั้นถ้าเราต้องการกำหนดให้ <a> ที่อยู่ภายใต้ <nav> มีลิงค์ที่เป็นสีเหลือง(#FF0) จะต้องมีการระบุโดยอ้างอิง Selector อื่นที่อยู่เหนือ <a>

    • การระบุโดยการเรียงลำดับ Selector หรือ DOM — DOM (Document object model) เป็นวิธีการจัดการ HTML ให้อยู่ในรูปแบบของ Tree เพื่อให้โปรแกรมสามารถปรับเปลี่ยน Style Sheet ของ HTML ผ่าน Methods ได้ ซึ่งเราสามารถอ้างอิงเริ่มต้นได้จาก Child node แต่อาจจะมีน้อยครั้งที่เราจะระบุไปถึง Root node ยิ่งพูดยิ่งงงกันไปใหญ่ งั้นผมจะยกตัวอย่างการอ้างอิงวิธีนี้ให้ดูครับ

      p.firstParagraph>b {
                color: #C00;
      }

      <p class="firstParagraph">
                <b><em>My First<em></b> Paragraph
      </p>

      <p class="firstParagraph">
                <em><b>My First</b></em> Paragraph
      </p>

      ผลลัพธ์ที่ได้คือ
      My First Paragraph
      My First Paragraph

      เหตุผลที่ทำไม Tag <p> ที่ 2 ถึงไม่เป็นสีแดง เพราะว่าการระบุ Selector แบบนี้จะต้องระบุให้ครบทุกๆ Tag จาก paragraph ที่ 2 มี Tag <em> มาแทรกระหว่าง <p> กับ <b> ทำให้ไม่เข้าเงื่อนไขการสืบทอดของคลาสนั้น นั่นเองครับ

  6. First-child Selector
    เป็นการกำหนดให้ Selector ทำงานเพียงครั้งแรกและครั้งเดียวเท่านั้น ตัวอย่างเช่น

    .myParagraph em:first-child {
              color: #CCC;
    }

    <p class="firstParagraph">
         <em>My First</em> Paragraph<br>
         <em>My First</em> Paragraph
    </p>

    ผลลัพธ์ที่ได้คือ

    My First Paragraph
    My First Paragraph

นอกจากนี้วิธีการเขียน Short hands ยังสามารถเขียนได้อีกหลายวิธี ซึ่งอาจจะหาอ่านได้ทางอินเตอร์เน็ต หรือให้ผมแนะนำก็จะมีหนังสือชื่อว่า "HTML5 and CSS3 Develop with Tomorrow’s Standard Today" ของ Brian P. Hogan เขียนนะครับ
http://www.amazon.com/HTML5-CSS3-Tomorrows-Standards-Programmers/dp/1934356689

 

อ้างอิงจาก
http://www.mindphp.com
http://www.w3schools.com
http://www.tizag.com
http://www.htmlhelp.com
http://www.webhostingsearch.com

Categories: CSS, Tips & Tricks, Tutorial

หยุดใช้ IDs Selector กับ CSS » « การสร้าง Mobile Application ด้วย Dreamweaver (Starter)

5 Comments

  1. Are you ready for regulations about applying supplier trademarks inside articles or content?

  2. I have read so many content about the blogger lovers except this article is actually a nice article, keep
    it up.

  3. What’s Going down i am new to this, I stumbled upon this I have found It absolutely useful and it has helped me out loads.
    I’m hoping to give a contribution & help different customers like
    its aided me. Good job.

  4. Link exchange is nothing else however it is simply placing the
    other person’s blog link on your page at proper place and other person will also do same in support of you.

Leave a Reply to free google advertising Cancel reply

Your email address will not be published.

*


7 + = thirteen

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2010-2013 iWebSmile — all right reserved.