เราจะเรียกใช้ CSS ได้อย่างไร

css block

ตามปรกติแล้ว หนทางที่เราจะนำเข้า CSS มาสู่หน้าเพจของเรานั้นหลักๆพื้นฐานมีอยู่ 3 วิธีด้วยกันครับ เพื่อให้มันแสดงผลกับงานของเรา เราลองมาดูว่าแต่ละแบบมีวิธีอย่างไรและทำงานอย่างไรครับ

เริ่มต้นกันด้วย 3 วิธีที่ว่าไปเมื่อกี้มันมีอะไรกันบ้างก่อน

1. Inline style
2. Embedded style
3. External style

มาเริ่มกันที่วิธีแรกแบบ Inline กันก่อนนะครับ

Inline Style เป็นการเขียนแบบตรงไปตรงมา ระบุเจาจะงไปที่ตัว HTML Element กันเลยแบบว่า เขียนกันในส่วนของ Element เลยนั้นเอง การเขียนแบบนี้ดีต่อการเจาะจง แบบตัวใดตัวหนึ่ง ที่จะไม่ต้องการแสดงค่านั้นบ่อยๆ หรือมีการบังคับมากกว่าตัวอื่นๆ แต่วิธีแบบนี้จะยากต่อการแก้ไข และจะเป็นยากต่อการ Cahed แบบ File Static แต่ก็เป็นวิธีที่นิยมในการเขียนกับ Email อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<h1 style="color: red; font-size: 12em; margin-top: 15px;">
    Why Inline CSS So Bad !!!!!!
</h1>
<div class="content">
    Inline style not attribute but is so cool!! in under 2000
</div>

กับอีกรูปแบบหนึ่งก็คือแบบ Embedded ซึ่งเป็นการฝัง Code CSS ลงไปบน HTML เลย โดยใส่ไว้ในส่วนของ head วิธีนี้ดูแลแก้ไขง่ายขึ้น เพราะมีการนำ Class, id และ element ต่างๆเข้ามาใช้ แต่ก็ยังไม่สะดวกในใช้ซ้ำ และการทำ Cache อยู่

หน้าตาของ Code จะออกมาเป็นประมาณนี้

<head>
  <title>Embedded Style</title>
  <style>
    h1 {
      color: red;
      font-size: 12em;
      margin-top: 15px;
    }
  </style>
</head>

ส่วนแบบที่ 3 จะเป็นแบบ External ที่ง่ายต่อการจัดการและแก้ไขมากกว่า โดย Code จะถูกแยกออกเป็นอีกไฟล์นามสกุล .css ไปเลย แล้วค่อยดึงกลับมาใช้ใน html ด้วยคำสั่ง Link แบบด้านล่างนี้ครับ

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ในปัจจุบันเรานิยมเขียนกันในรูปแบบ External เป็นหลัก แต่ก็ยังมีอีกหลายๆครั้งที่มีการผสมผสานกันระหว่างหลายๆรูปแบบ แต่มันจะมีสิ่งหนึ่งที่เกี่ยวข้องหากเรามีการเขียน Code ในแบบต่างๆมากกว่า 1 ก็คือเรื่องของ Order หรือการให้ความสำคัญของมันครับ

ตามปรกติแล้ว CSS มันจะย่อมาจากคำว่า Cascading Style Sheets ซึ่งคำว่า cascade ก็น่าจะเป็นความหมายแบบเดียวกับการ “เรียงซ้อน” ไปเรื่อยๆโดยให้ลำดับความสำคัญตามลักษณะดังนี้

1. Inline Style มาก่อนเสมอ หมายถึงว่าถ้าคุณมี Code CSS ที่กำหนดค่าในจุดนี้ 3 ที่ มันจะแสดงจากจุดที่เป็น inline ก่อนนั้นเอง

2. External และ Embedded อันนี้จะมาเป็นลำดับ 2 โดยมองจากในส่วนของ Head Element ด้วยนะครับ และให้ความสำคัญจากอันบนสุดก่อนเสมอ อย่างที่เราจะเห็นว่า เวลาเรียกใช้ css จาก library หรือ framework นั้นเราต้องเอาตัวสำคัญขึ้นก่อนเช่น bootstrap ขึ้นก่อนนั้นแหละ

3. Browser Default อันนี้พูดถึงไปเมื่อวันก่อน CSS ของ Browser จะถูกกำหนดมาให้แสดงผลเป็นลำดับสุดท้ายเลย ถ้าใครไม่ได้ Reset ไว้มันก็จะยังคงมีผลอยู่นั้นเอง แต่จะออกมาเป็นลำดับสุดท้าย สิ่งที่เราเขียนไว้จะมีผลมากกกว่า

เรื่องเล็กๆแบบนี้ก็เป็นเรื่องสำคัญในการลงมือ Coding CSS นะครับ แม้จะดูไม่ค่อยสำคัญอะไร แต่หากเราควบคุมทุกอย่างได้หมด เขียนได้ถูกต้องอย่างที่ควร มันก็น่าจะดีกว่าอยู่แล้วนะครับ

คุณพ่อของน้องเกี้ยมอี๋ ไม่รู้ว่าใครซนกว่ากัน ทำงานเป็นโปรแกรมเม่า และ System Analyst ประจำบ้าน ดูหนัง ดูซีรี่ย์ เล่นเกมส์กับลูกชาย และเขียนบทความ

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top