สอนเขียนเว็บบทที่ 2 CSS ภาค 1

ในบทความนี้หลังจากเราเรียนรู้เกี่ยวกับพื้นฐานของ html แล้ว css ก็เป็นส่วนสำคัญสำหรับเว็บสมัยนี้ที่เราต้องเรียนรู้โดยเราจะสอนพื้นฐานของ css ต่อเพื่อให้คุณสามารถทำหน้าเว็บไซต์ให้สวยงามเหมือนเว็บปัจจุบันที่เขาทำกันครับ

บทความมีอะไรบ้าง?

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

โดยในบทความชุดนี้ผมจะมีการบ้านให้คุณได้ฝึกทักษะที่สอนในบทความอยากให้คุณลองทำตามดูนะครับโดยผมจะมีเฉลยให้ในตอนท้ายของบทความนะครับ ขอร้องว่าอย่าโกงกันนะเพราะตั้งใจเขียนเพื่อให้คุณได้เรียนรู้จริงๆ ถ้าติดตรงไหนในบทความอยากให้เพิ่มเติมอะไรก็สามารถ comment บอกได้นะครับ ผมเองจะพยายามปรับปรุงให้ดีขึ้นเรื่อยๆ

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheets แล้วมันคืออะไรล่ะ ? มันกำเนิดมาเพื่อแก้ไขปัญหาของการแสดงผลใน html อีกทีครับแต่ก่อนมันไม่มีภาษานี้มันทำให้เราไม่สามารถแก้ไข สี รูปแบบ layout ต่างๆของ html ได้ เราอาจจะแก้ไขบาง tag ได้จาก attribute ของมันแต่มันตอบสนองไม่พอสำหรับการทำเว็บให้สวยครับ

แต่ก่อนในการวางโครงสร้างเว็บนั้นเขาใช้ tag table ซึ่งจากที่เราเรียนรู้ไปแล้วในบท html นั้นการจะสร้าง table มาหนึ่งอันเราต้องซ้อน tag table ไปอีกหลายชั้นยกตัวอย่างสมมติว่าผมต้องการสร้างเว็บให้มีส่วน header content sidebar footer หน้าตาเป็นแบบด้านล่างครับ

โครงสร้าง ( layout ) ตัวอย่าง

ถ้าเป็นสมัยก่อนเราใช้ table หน้าตา code จะเป็นอย่างนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <table border="1" width="600">
    <tr>
      <td>ส่วนบน</td>
    </tr>
    <tr>
      <td>ส่วนเนื้อหา</td>
    </tr>
    <tr>
      <td>ส่วนล่าง</td>
    </tr>
  </table>
</body>
</html>

ผลลัพท์หน้าตาเป็นแบบนี้ครับ

สังเกตุว่าผลลัพท์ก็ยังไม่ค่อยตรงนักกับสิ่งที่เราอยากได้ ต้องบอกตรงๆว่าผมก็ลืมวิธีทำแบบสมัยก่อนแล้วว่าถ้าใช้ table ต้องจัดพวกตัวอักษรยังไงให้ตรงกลางโดยไม่ใช้ css แต่เราไปดูแบบใช้ css กันบ้างครับว่ามันจะใช้ยังไง

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .block {
      border: 1px solid #000000;
      
      text-align: center;
      padding:30px 0;
    }
    .container {
      width:600px;
      margin: 30px auto;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="block">ส่วนบน</div>
    <div class="block">ส่วนเนื้อหา</div>
    <div class="block">ส่วนล่าง</div>
  </div>
</body>
</html>

ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ

layout css

อย่าเพิ่งตกใจกับ code ของ css นะครับใจเย็นๆผมจะค่อยๆอธิบาย ตรงจุดนี้ผมแค่อยากจะเปรียบเทียบให้เห็นภาพก่อนว่า ทำไมเราจึงต้องเรียนรู้ css ตรงนี้ต่างหากเป็นใจความสำคัญเพราะเราจะเห็นแล้วว่าการจัดการ การแสดงผล มันทำได้ตรงจุดมากกว่าการใช้ table tag เพียงอย่างเดียวข้อดีคือ

  • เขียน code น้อยกว่า
  • จัดการ การแสดงผลได้ตรงกับที่เราอยากได้มากกว่า
  • แยก code css ออกมาเป็นส่วนๆได้ไม่ต้องยุ่งเกี่ยวกันครับ

หากคุณสังเกตุดีๆจะเห็นว่าการใช้ table tag ในการจัดโครงสร้าง ( ต่อไปในบทความจะขอเรียกว่า layout ) จะทำได้ยากกว่าจะยุ่งยากกว่าการจะสร้างกล่องขึ้นมา 1 อันคุณต้องเขียน code ถึง 3 tag ในการซ้อนกันครับดู code ด้านล่างเพื่อเปรียบเทียบกัน

// html table layout
<table>
  <tr>
     <td>ส่วนเนื้อหา</td>
  </tr>
</table>

// css layout 
<div>ส่วนเนื้อหา</div>

เนี้ยแหละครับที่ผมบอกคุณว่าทำไมโลกถึงพัฒนาอีกภาษามาจัดการการแสดงผลเพราะมันง่ายขึ้น สะดวกขึ้น จัดการง่ายขึ้นครับ

รูปแบบภาษา css ( syntax )

ต่อมาเรามาเรียนรู้ว่าการเขียน css เนี้ยมันต้องเขียนอะไรยังไง นะครับโดยหลักๆ การเขียน css รูปแบบจะเป็นแบบนี้ครับ

// แบบนี้คือเขียนใส่ใน tag นั้นๆเลย ไม่นิยมทำแบบนี้
<p style="color:red;">test</p>

// แบบนี้สำหรับการเขียนในไฟล์ .css หรือเขียนในระหว่าง style tag ส่วนใหญ่มักจะใส่อยู่ระหว่าง head tag 
tag/class/id ที่เราอยากเปลี่ยนค่า {
    ค่าที่อยากจะเปลี่ยน: ค่าใหม่;
}

เรามาดูการเขียนแบบแรกก่อน เราสามารถเริ่มเขียน css โดยการใส่ attribute ว่า “style” ใน tag ต่างๆของ html ได้เลย โดยเราเรียกการเขียนแบบนี้ในภาษาคนเขียน css ว่า inline css ไปดูตัวอย่างกันครับ

<p style="color:red; font-size:24px;">
ตัวอักษรสีแดงและขนาดตัวอักษร 24 pixel
</p> 

แต่มันไม่มันนิยม เพราะว่าในหลายๆ tag ที่เราใช้นั้น ต้องการ style คล้ายๆกัน หรืออาจจะเหมือนกัน ต่างกันแค่อยู่คนละที่เราต้องมา นั่งเขียน style attribute ทุกที่ซึ่งคุณอาจจะนึกออกว่ามันจะทรมานมากถ้าสมมติในอนาคตมีคนมาบอกคุณว่าให้เปลี่ยนสีตัวอักษรจากสีแดงเป็นสีน้ำเงิน คุณต้องไปแก้ไขทุกที่ที่คุณเขียน อ้าวแล้วอย่างนี้การเขียนแบบนี้จะมีประโยชน์ยังไง ไว้ผมจะอธิบายให้ในบทความนะครับใจเย็นๆ ณ ตอนนี้เรียนรู้ไว้ก่อนว่ามันเขียนได้กี่แบบบ้าง

ต่อมามาดูอีกแบบว่าเวลาเราเขียนนั้นเราจะเขียนใน style tag ยังไง อย่างแรกให้คุณสร้าง style tag อยู่ภายใต้ head tag นะครับตัวอย่างอยู่ข้างล่างครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style> <--------- ใส่ตรงนี้
  
  </style> <--------- ใส่ตรงนี้
</head>
<body>
</body>
</html>

โดยเราต้องเขียน code css อยู่ภายใต้ style tag ครับ ณ ตอนนี้ให้เราเข้าใจแบบนี้ก่อน โดย code ด้านล่างจะเป็นการเปรียบเทียบว่าถ้าเราจะเริ่มเขียน หน้าตามันจะเป็นแบบนี้แต่ในส่วนภายใต้ style เราจะไม่ได้เขียนแบบนั้นจริงๆนะครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    tag/class/id ที่เราอยากเปลี่ยนค่า {
        ค่าที่อยากจะเปลี่ยน: ค่าใหม่;
    }
  </style>
</head>
<body>
  <p>oxygenyoyo.com สอนการเขียน css</p>
</body>
</html>

สำหรับการเขียน css สุดท้ายที่เขาทำกันเป็นสากลนะครับคือการแยกไฟล์ css ไปอยู่เป็นไฟล์ css แยกต่างหากเลยไม่ค่อยจะเขียนลงในไฟล์ html อย่างด้านบน สำหรับวิธีการง่ายมากครับให้เราสร้าง folder ขึ้นมาชื่อว่า css และสร้างไฟล์ในนั้นชื่อว่า style.css ครับ ใส่ code ด้านล่าง

p {
  background: red;
}

และเวลาเราจะทำการเรียกใช้ไฟล์ css เราต้องใช้ link tag ครับตามด้านล่างเลย

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<p>ทดสอบการเปลี่ยนสีพื้นหลังโดยการเรียกใช้ไฟล์ css</p>
</body>
</html>

หากคุณจำไม่ได้ว่า link tag ต้องเขียนยังไงให้คุณเขียนว่า link แล้วกด tab ใน vscode ได้เลยครับ ในบทความคุณสามารถแก้ไขที่ไฟล์ style.css ได้เลยในส่วนของ css นะครับหรือจะทำตามในบทความก็ทำได้เช่นเดียวกัน แล้วทำไมต้องตั้งชื่อว่า style.css ? เพราะว่าเป็นชื่อสากลครับ จริงๆจะตั้งชื่อว่าอะไรก็ได้ครับ

Ex: 1. การเขียน style แบบนี้เรียกว่าอะไร <p style=”font-size: 24px;”>ตัวใหญ่</p>

Ex: 2. หากเราต้องเขียน css ในไฟล์ html เราจะเขียนภายใต้ tag ชื่อว่าอะไร ?

Ex: 3. หากเราต้องการแยกไฟล์ css เพื่อเขียนแต่ css เราจะเรียกไฟล์ css เข้ามาใช้งานกับไฟล์ html ด้วย tag ชื่อว่าอะไร ?

ต่อไปเรามาเริ่มลองหยิบ tag กันเลยดีกว่าจากตัวอย่าง code ด้านบนเราจะลองมาเปลี่ยนแปลงค่าของ p tag กันดูครับครับ โดยเราจะมาเริ่มลองเปลี่ยนแบบง่ายๆกันก่อนเราจะเปลี่ยน สี ตัวอักษรทั้งหมดที่อยู่ภายใต้ p tag อันนี้นะครับหน้าตาการเขียนจะเป็นแบบนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
        color: red;
    }
  </style>
</head>
<body>
  <p>oxygenyoyo.com สอนการเขียน css</p>
</body>
</html>

จาก code ด้านบนรูปแบบจะเป็นแบบนี้ครับ

  • ส่วนที่เราอยากเปลี่ยนแปลงค่าคือ tag ที่ชื่อว่า p
  • แล้วตามด้วย ปีกกาเปิด
  • เสร็จแล้วค่าที่เราอยากเปลี่ยนแปลงคือ color
  • ตามด้วย โคลอน ( : )
  • แล้วค่าใหม่ที่เราต้องการเปลี่ยนแปลงคือ red ( สีแดง )
  • เสร็จแล้วตามด้วยปีกกาปิด

ผลลัพท์ของ code ด้านบนคือ

หลายคนตอนนี้น่าจะมีคำถามว่าเราจะรู้ได้ยังไงว่า ค่าที่เราอยากเปลี่ยนสีชื่อว่า color อันนี้อาจจะต้องศึกษาเพิ่มเติมแต่ในบทความนี้ผมจะบอกอันที่ผมใช้บ่อยๆแล้วกัน เพราะความจริงคือเราสามารถเปลี่ยนแปลงได้เยอะมากกกกกกกกก ครับ

ต่อมาเรามาลองเพิ่มการเปลี่ยนแปลงค่ามากกว่าหนึ่งสิ่งดูครับว่าเราจะเขียนยังไง โจทย์คือให้เราเปลี่ยน ขนาดของตัวอักษรเป็น 24px และเปลี่ยนสีตัวอักษรเป็นสี #c4c4c4 เอาล่ะ ! สิ่งที่เราต้องเปลี่ยนมีสองอย่างโจทย์ให้ค่าต่างๆที่จำเป็นสำหรับเราแล้วต่อไปเรามาแก้โจทย์กันดูครับ

สิ่งที่เราต้องการเปลี่ยนแปลงค่าครั้งนี้คือ tag p เหมือนเดิมและค่าที่จะเปลี่ยนแปลงตอนนี้มีค่าใหม่ที่เราไม่รู้จักคือขนาดของตัวอักษร ซึ่งมันคือ font-size นั่นเองครับเอาล่ะมาลองกันดู

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 24px;  
      color: #c4c4c4;
    }
  </style>
</head>
<body>
  <p>oxygenyoyo.com สอนการเขียน css</p>
</body>
</html>

จากโจทย์เราได้เรียนรู้อะไรบ้าง ? เราได้รู้ว่าการเปลี่ยนแปลงค่าสามารถทำได้มากกว่าหนึ่งและการเขียนรูปแบบจะเป็นทีละบรรทัดโดยทุกบรรทัดจะต้องมี semi-colon ในการปิดท้ายเพื่อบอกให้ computer รู้ว่าอันนี้จบการเปลี่ยนค่าของสิ่งนี้แล้ว และเราสามารถแปลงเปลี่ยนค่าใหม่ในบรรทัดต่อไปได้

ต่อไปถ้าโจทย์ให้เราแก้ไขสถานการณ์ที่มี tag p สองอันโดย tag p อันแรกนั้นเป็นสีแดง และ tag p อันที่สองให้เป็นสีเทา ( #c4c4c4 ) โดยทั้งคู่มีขนาดตัวอักษรเป็น 24px โดย code เริ่มต้นจะเป็นแบบนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>
</head>
<body>
  <p>oxygenyoyo.com สอนการเขียน css</p>
  <p>oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>

จากโจทย์และ code ด้านบนนั้นทำให้เรารู้แล้วว่าตอนนี้สิ่งที่เราพอจะทำได้คือเรื่องการปรับขนาดตัวอักษรและการปรับสี แต่ทว่าหากเราทดลองใส่แบบหยิบ tag p มาแล้วปรับค่าดูแบบ code ด้านล่างจะเป็นอย่างไรไปดูกันครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  	p {
  	  font-size: 24px;
  	  color: red;
  	}
  </style>
</head>
<body>
  <p>oxygenyoyo.com สอนการเขียน css</p>
  <p>oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>

ผลลัพธ์ที่เราจะได้คือ

ซึ่งผลลัพธ์ที่เราได้นั้นไม่ถูกต้อง เพราะจากโจทย์เขาต้องการให้ tag p ตัวที่สองนั้นเป็นสีเทา ( #c4c4c4 ) ณ ตอนนี้ความรู้ของเราคือเราทำได้เท่านี้ คราวนี้แก้ไขยังไงให้เราสามารถเลือกได้ว่า อยากจะให้ tag นั้นเปลี่ยนค่าสีแค่คนเดียว หรือให้ tag บางกลุ่มบางอันมีการเปลี่ยนแปลงค่าตามที่เราอยากได้ เอาล่ะ ! ผมจะพาไปคุณไปรู้จักสิ่งใหม่ๆ ที่เราจะใช้กันต่อไปอีกยาวนั่นก็คือ class และ id ครับไปอ่านกันต่อเลย

Class และ ID

อย่างแรกที่คุณต้องรู้ก่อนเลยนั่นก็คือ ทุกๆ tag ใน html เราสามารถใส่ attribute ว่า class หรือ id ได้ ตัวอย่างเช่น

<p class="brown-text">ทดสอบสีน้ำตาล</p>

<p id="red-text">ทดสอบสีแดง</p>

<p class="aaa" id="bbb">ทดสอบการใส่ทั้ง class และ id</p>

เราจะสามารถตั้งชื่อของ id หรือ class ได้แบบตามใจเราและจะสังเกตุว่ามันใส่ได้หมดเลยแล้วมันใช้งานแตกต่างกันอย่างไร ? คำตอบก็คือสำหรับ id นั้นย่อมาจาก identify หรือเป็นสิ่งที่ระบุเจาะจงสำหรับ tag นั้นๆ เราจะใช้บอกว่า tag นี้จะมีแค่ 1 เดียวที่ชื่อ id นี้เช่น ถ้าสมมติมี id ว่า ‘a’ ในหน้าเพจนั้นที่ถูกโหลดจะไม่มีตัวไหนอีกแล้วที่จะมี attribute id ว่า ‘a’ ครับ ส่วนใหญ่แล้วการใส่ attribute id นั้นเราจะใช้กับ javascript นะครับถามว่าใน css มีใช้ไหมก็มีบางแต่ไม่เยอะถ้าไม่จำเป็นจริงๆก็ใช้ class ดีกว่าครับ การใช้งานกับ css เราจะหยิบ tag ด้วย id โดยใช้ #[ชื่อของ id] นั้นๆไปดูตัวอย่างกันครับ

<style>
#aaa {
  color: red;
}
#address {
  color: #c4c4c4;
}
</style>

<p id="aaa">ทดสอบ id ชื่อ aaa</p>
<p id="address">แสดงที่อยู่</p>

ส่วน class จะสามารถใช้ร่วมกันได้ ให้นึกว่าเหมือนการ ตั้งชื่อกลุ่ม แล้วกันว่าถ้าเป็นชื่อกลุ่มนี้เราจะให้มันมีค่าอะไรบ้าง สามารถใช้หลายๆ ชื่อ class รวมกันได้ครับ โดยการหยิบ class นั้นเราจะหยิบด้วยการใช้ จุด (.) นำแล้วตามด้วยชื่อ class นั้นๆครับไปดูตัวอย่างกัน

<style>
.big-text {
  font-size: 24px;
}
.red-text {
  color: red;
}
</style>

<p class="big-text red-text">ทดสอบการใส่ class มากกว่า 1</p>

จากตัวอย่าง code ข้างบนนั้นเรามีการกำหนดว่าชื่อว่า big-text (โดยส่วนใหญ่แล้วเราจะตั้งชื่อแล้วแยกด้วย ขีดกลาง ถามว่าจำเป็นไหม เรียกว่าเป็นหลักสากลที่เขาทำกันดีกว่าครับ ) กับ red-text โดยเราอยากให้ tag p นั้นมีทั้งขนาดตัวอักษรและมีสีตัวอักษรสีแดง เราจึงเอา class มาใช้ทั้งสองอัน นั่นก็คือ big-text red-text class จะถูกแบ่งด้วยเว้นวรรคนะครับ

กลับมาที่โจทย์เดิมของเราคราวนี้เราจะแก้โจทย์ด้วยการตั้งชื่อ class แล้วนำไปใช้กับแต่ละ tag กันดูครับ โดยวิธีสามารถทำได้หลายแบบ คุณจะตั้งชื่อ id ก็ได้หรือจะตั้ง id อันหนึ่งอีกอันเป็น class ก็ได้ครับโดยของผมจะทำแบบนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  	.big-text {
  		font-size: 24px;
  	}
  	.red-text {
  		color: red;
  	}
  	.gray-text {
  		color: #c4c4c4;
  	}

  </style>
</head>
<body>
  <p class="big-text red-text">oxygenyoyo.com สอนการเขียน css</p>
  <p class="big-text gray-text">oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>
ผลลัพธ์

คำถามก็คือทำไมเราต้องตั้งชื่อ class ‘big-text’ ด้วยเราสามารถหยิบ tag p ตรงๆได้เลย ถูกครับสำหรับโจทย์นี้คุณสามารถทำแบบนั้นได้ แต่ที่ผมตั้งชื่อ class big-text มานั้นเพื่อในอนาคตสมมติว่าในหน้านั้นเรามี tag p เพิ่มมาอีกถ้าเราตั้งไว้ว่าเราจะ หยิบ tag p แล้วมีค่าตัวอักษรเป็น 24px แปลว่า tag p ทุกอันในหน้าจอ จะถูกปรับเป็นตัวอักษรใหญ่หมดซึ่งเราคงไม่ได้ต้องการแบบนั้นครับ

Ex: 4. ถ้าเราจะหยิบ tag ด้วยชื่อ class เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?

Ex: 5. ถ้าเราจะหยิบ tag ด้วยชื่อ id เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?

ค่าความสำคัญ หรือ ค่าพลังของ css

โดยปกติแล้ว css จะอ่านจาก บนลงล่าง แต่ถ้าหากคุณเรียนรู้เกี่ยวค่าของความสำคัญหรือค่าพลังนั้น การอ่านจากบนลงล่างนั้นจะไม่มีผลเลย

คราวนี้หลังจากเราเรียนรู้เรื่องการเขียนแบบ inline css หรือแม้แต่การเขียนแยกไปอยู่ในส่วน style เรื่อง class และ id คราวนี้มันจะมีคำถามว่าแล้วถ้าเราเขียนผสมๆกันแล้วค่าไหนจะถูกใช้หรือไม่ถูกใช้กันแน่ ยกตัวอย่าง code ด้านล่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  	p {
  		color: red;
  	}
  	.gray-text {
  		color: gray;
  	}
  	#pink-text {
  		color: pink;
  	}
  </style>
</head>
<body>
	<p class="gray-text" id="pink-text" style="color:green;">oxygenyoyo.com สอนเขียน css</p>
</body>
</html>

จากตัวอย่างข้างบนนั้นเราทุกอย่างที่เราเรียนรู้เลย แล้วผลลัพธ์เป็นแบบนี้ครับ

ผลลัพธ์นั้นเป็น สีเขียว นั่นก็เพราะว่าค่าความสำคัญหรือค่าพลังจาก inline โดยค่าความสำคัญหรือค่าพลังนั้นแจกแจงได้แบบนี้ครับ

  • ค่า inline หรือที่ใส่เป็น attribute style มีค่า 1000
  • ค่า id เวลาที่เราใช้งาน #[ชื่อ id] อย่างนี้มีค่า 100
  • ค่า class ที่เราใช้งาน .[ชื่อ class] อย่างนี้มีค่า 10
  • สุดท้ายเวลาที่เราหยิบ tag html ทั่วๆไปเช่น p แบบนี้มีค่า 1

อย่างที่เห็นว่าค่า inline นั้นมีค่า 1000 เลยทำให้ css inline นั้นมีค่าความสำคัญหรือค่าพลังมากสุดทำให้ css เลือกให้ตัวอักษรเป็นสีเขียวครับ ถ้าสมมติเราเอา inline css ออก มันก็จะเป็นสีชมพูตาม id

ทำไมเราต้องเรียนรู้เรื่องนี้ ?

เพราะเราจะรู้ว่าหากเราต้องการแก้ไขงานคนอื่นหรือการหยิบใช้ framework ( อันนี้คุณยังไม่ต้องรู้จักตอนนี้นะครับ แค่จำไว้ก่อนสำหรับคำว่า framework ) เราจะสามารถแก้ไขโดย code เราจะไม่กระทบต่อ code ของคนเก่าที่ทำงานครับ

จริงมีวิธีเขียนแบบที่ค่าพลังมันจะชนะเสมอคือการใส่คำว่า !important ถ้าเราใส่แบบนี้ css ชุดนั้นจะถูกเรียกใช้งานทันทีวิธีเขียนคือ

.red-text {
   color: red !important;
}

แต่ ไม่แนะนำให้ใช้ไม่ว่ากรณีใดๆ เพราะว่าการเขียนแบบนี้จะทำให้คนมาทำงานต่อลำบากมาก เพราะไม่รู้ว่ามันวาง code นี้ไว้ที่ไหนอย่างไร หากสนใจอ่านต่อได้ที่นี่ครับ //www.designil.com/css-specificity-and-hack.html

เฉลยการบ้าน

  1. inline css
  2. style tag
  3. link tag
  4. ใช้ . ( dot )
  5. ใช้ #

สรุปก่อนจบ

ในบทความนี้คุณได้เรียนรู้วิธีการเขียนและการหยิบ tag ต่างๆใน html โดยผมอยากให้คุณทดสอบการหยิบ tag ต่างๆหรือถ้าสงสัยอะไรสามารถ comment ด้านล่างได้เลยครับ โดยเมื่อคุณคุ้นเคยกับการเขียนแบบนี้ ในบทต่อไปเราจะไปเรียนรู้ว่าเวลาทำเว็บจริงๆแล้วต้องคิดยังไง ออกแบบยังไงให้เราสามารถเขียน css กับ html ให้ออกมาเหมือนในรูป หรือเว็บอื่นๆครับ

หากคุณกำลังอยากทำเว็บและเห็นว่าบทความนี้เป็นประโยชน์ ผมขอให้คุณแค่กดแชร์ไปให้คนรอบตัวคุณครับ หากคุณคิดว่าอยากติดตามบทความในเว็บนี้เพียงแค่กรอกอีเมลด้านล่างครับ

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.