Nkaub Blog

การใช้งาน CSS Selector

CSS Selectors คือวิธีการที่ใช้ในการระบุหรือเลือกองค์ประกอบ (element) บนหน้าเว็บเพื่อที่จะทำการกำหนดสไตล์ให้กับองค์ประกอบนั้น ๆ ใน CSS เราสามารถใช้ selectors ได้หลากหลายรูปแบบเพื่อเลือกองค์ประกอบตามชื่อแท็ก, class, id, ลักษณะความสัมพันธ์ และสถานะต่าง ๆ ขององค์ประกอบ

Type Selector

เลือกองค์ประกอบโดยใช้ชื่อแท็ก (tag name)

p {
  color: blue;
}

ตัวอย่างนี้จะทำให้ข้อความใน <p> ทุกตัวในหน้าเว็บมีสีฟ้า

Class Selector

เลือกองค์ประกอบที่มีการกำหนด class ใด class หนึ่ง

.button {
  background-color: green;
}

จะเลือกองค์ประกอบที่มี class="button" และให้มีพื้นหลังสีเขียว

CSS Syntax เขียนยังไง

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

โครงสร้าง CSS

selector {
  property: value;
  property: value;
  ...
}

Selector (ตัวเลือก) คือส่วนที่บอกว่าเราต้องการให้กฎ CSS นี้ใช้กับองค์ประกอบไหนใน HTML เช่น p สำหรับแท็ก <p>, .class สำหรับ class, #id สำหรับ id
Property (คุณสมบัติ) คือสิ่งที่เราต้องการเปลี่ยนแปลง เช่น สีของตัวอักษร (color), ขนาดของตัวอักษร (font-size), ระยะห่าง (margin/padding) เป็นต้น
Value (ค่า) คือค่าที่เรากำหนดให้กับคุณสมบัติ เช่น red สำหรับสี, 16px สำหรับขนาดตัวอักษร

ประเภทของ Selectors

Element Selector ใช้เลือกทุกองค์ประกอบที่เป็นแท็กนั้น ๆ

การจัดรูปแบบข้อความ HTML

HTML Text Formatting เป็นการใช้แท็ก (Tags) ในภาษา HTML เพื่อจัดรูปแบบข้อความให้มีลักษณะต่าง ๆ เช่น ตัวหนา, ตัวเอียง, ขีดเส้นใต้, เปลี่ยนขนาดตัวอักษร, หรือสีของข้อความ เป็นต้น การใช้แท็กเหล่านี้ช่วยให้เนื้อหาดูมีความชัดเจน และสร้างความเน้นในส่วนที่ต้องการให้ผู้ใช้สนใจ

ตัวอย่างแท็กที่ใช้สำหรับ Text Formatting

<b> (Bold) – ใช้ทำให้ข้อความเป็นตัวหนา

1	`<b>ข้อความนี้เป็นตัวหนา</b>`

ผลลัพธ์: ข้อความนี้เป็นตัวหนา

<strong> – เป็นอีกแท็กหนึ่งที่ใช้ทำตัวหนา มีความหมายเชิงเน้นความสำคัญของข้อความ

1	`<strong>ข้อความนี้มีความสำคัญ</strong>`

ผลลัพธ์: ข้อความนี้มีความสำคัญ

การกำหนด style ให้กับ HTML

การใช้ style ใน HTML เป็นวิธีที่ช่วยเพิ่มความสวยงามและการจัดรูปแบบของเนื้อหาในหน้าเว็บ โดยปกติแล้วเราจะใช้ style เพื่อปรับแต่งองค์ประกอบต่างๆ เช่น สี ขนาด การจัดเรียงตำแหน่ง ตัวอักษร ฯลฯ ในหน้านั้น

วิธีการใช้ style ใน HTML

เราสามารถเพิ่มการจัดแต่งผ่าน style ได้ 3 วิธีหลักๆ

Inline Style การเพิ่มสไตล์ลงไปในแท็ก HTML โดยตรง
Internal Style Sheet การเพิ่มสไตล์ไว้ใน <style> ภายในไฟล์ HTML
External Style Sheet การเรียกไฟล์ CSS ภายนอกเพื่อใช้สไตล์

1. Inline Style

การใช้สไตล์แบบ Inline จะเขียนไว้ในแท็ก HTML โดยใช้แอตทริบิวต์ style เช่น

1	`<p style="color: red; font-size: 20px;">This is a red text.</p>`

ในตัวอย่างนี้ ข้อความใน <p> จะมีสีแดงและขนาดตัวอักษร 20px

การสร้างลิงก์ด้วยแท็ก a

แท็ก <a> เป็นหนึ่งในแท็กพื้นฐานของ HTML ที่ใช้ในการสร้างลิงก์ ซึ่งเราสามารถลิงก์ไปยังหน้าเว็บอื่น, ไฟล์, หรือส่วนอื่นๆ ของหน้าเดียวกันได้ ลิงก์เหล่านี้มักจะถูกใช้ในการนำทางเว็บไซต์

โครงสร้างของแท็ก <a> มีดังนี้

1	`<a href="URL ที่ต้องการลิงก์ไป">ข้อความหรือเนื้อหาภายในลิงก์</a>`

แอตทริบิวต์ที่สำคัญของ <a>

href (Hypertext Reference)

ใช้ระบุ URL หรือที่อยู่ปลายทางของลิงก์

หากต้องการลิงก์ไปที่หน้าเว็บอื่น หรือไฟล์ภายนอก

1	`<a href="https://www.example.com">ไปที่ Example</a>`

หากต้องการลิงก์ไปที่ไฟล์ในเครื่องหรือไฟล์ภายในเว็บไซต์

1	`<a href="images/picture.jpg">ดูรูปภาพ</a>`

การใช้แท็ก hr

แท็ก <hr> ใน HTML ใช้เพื่อสร้างเส้นคั่นแนวนอนในหน้าเว็บ (horizontal rule) โดยไม่มีการแสดงผลเนื้อหาภายในแท็ก เป็นแท็กที่ไม่ต้องการปิดหรือมีเนื้อหาใด ๆ ข้างใน (self-closing tag) ลักษณะการทำงานหลักของแท็กนี้คือการแบ่งส่วนต่าง ๆ ของเนื้อหา หรือแยกเนื้อหาบางส่วนออกจากกัน เพื่อเพิ่มความชัดเจนให้กับการจัดระเบียบข้อมูลในหน้าเว็บ

โครงสร้างของแท็ก <hr>

<hr>

คุณสมบัติหลักของ <hr>

สร้างเส้นคั่นแนวนอน ปรากฏเป็นเส้นแนวนอนในหน้าเว็บเพื่อแบ่งเนื้อหา

ไม่มีเนื้อหา แท็ก <hr> ไม่มีการแสดงผลข้อความหรือข้อมูลใด ๆ ภายใน มันเป็นเพียงเส้นคั่นเท่านั้น

ไม่มีปิดแท็ก เป็น self-closing tag หมายความว่าไม่ต้องมีการปิดแท็ก (ไม่มี </hr>)

การกำหนดสไตล์ให้กับ <hr> ด้วย CSS

แม้ว่าค่าเริ่มต้นของแท็ก <hr> จะเป็นเส้นคั่นที่ดูเรียบง่าย แต่เราสามารถปรับแต่งสไตล์ของมันได้ เช่น สี ความกว้าง ความสูง หรือรูปแบบเส้นได้ตามต้องการ โดยใช้ CSS เช่น

1	`<hr style="border: 2px solid red; width: 50%; margin: 20px 0;">`

การใช้แท็ก br

แท็ก <br> ใน HTML ใช้เพื่อสร้างการขึ้นบรรทัดใหม่ (line break) ในเนื้อหาของหน้าเว็บ โดยไม่ต้องสร้างย่อหน้าใหม่หรือมีการเว้นระยะห่างเพิ่มเติม เช่นเดียวกับการกดปุ่ม Enter บนแป้นพิมพ์ในโปรแกรมประมวลผลคำ

คุณสมบัติและการใช้งานของ <br>

สร้างการขึ้นบรรทัดใหม่ในเนื้อหา

เมื่อคุณใช้แท็ก <br>, เนื้อหาที่แสดงผลจะถูกขึ้นบรรทัดใหม่ทันทีหลังจากแท็กนี้

1 2	`This is the first line.<br>` `This is the second line.`

ผลลัพธ์ที่ได้บนเบราว์เซอร์

1 2	`This is the first line.` `This is the second line.`

การสร้างย่อหน้าด้วยแท็ก p

การสร้างย่อหน้าด้วยแท็ก <p> เป็นวิธีพื้นฐานใน HTML สำหรับการแสดงผลเนื้อหาในรูปแบบย่อหน้า (paragraph) ซึ่งช่วยจัดระเบียบข้อความให้อ่านง่ายและมีความชัดเจน การใช้งานแท็ก <p> เป็นส่วนหนึ่งของการสร้างโครงสร้างที่ดีสำหรับเนื้อหาบนหน้าเว็บเพจ

โครงสร้างพื้นฐานของแท็ก <p>

แท็ก <p> เป็นแท็กที่มีลักษณะเป็นคู่ โดยประกอบด้วยแท็กเปิด <p> และแท็กปิด </p> ดังนี้:

1	`<p>เนื้อหาของย่อหน้าจะอยู่ตรงนี้</p>`

ข้อความใดที่อยู่ระหว่างแท็กเปิดและแท็กปิดจะถูกแสดงผลเป็นย่อหน้าหนึ่งย่อหน้า

h1 ถึง h6 สำหรับหัวข้อ HTML

แท็ก <h1> ถึง <h6> ใน HTML ใช้สำหรับการสร้างหัวข้อ (headings) ในเนื้อหาของหน้าเว็บ โดยจะแบ่งระดับของความสำคัญของหัวข้อตามลำดับจากมากไปหาน้อย ซึ่งมีผลต่อการแสดงผลทั้งด้านขนาดตัวอักษรและความสำคัญในแง่ของโครงสร้างเอกสารและ SEO (Search Engine Optimization) ดังนี้

<h1> หัวข้อหลัก (Main Heading)

ลักษณะ <h1> ใช้สำหรับหัวข้อที่สำคัญที่สุดในหน้าเว็บ หนึ่งหน้าเว็บควรมี <h1> เพียงแท็กเดียวเพื่อความชัดเจนของโครงสร้าง
ขนาดตัวอักษร ขนาดใหญ่ที่สุดในบรรดาหัวข้อ
SEO เป็นหัวข้อที่เครื่องมือค้นหาจะให้ความสำคัญมากที่สุด

ตัวอย่าง

1	`<h1>Welcome to My Website</h1>`

การใช้งาน Attributes HTML

HTML Attributes เป็นคุณสมบัติที่ใช้เพิ่มข้อมูลหรือกำหนดพฤติกรรมให้กับองค์ประกอบ (Elements) ในเอกสาร HTML เพื่อให้สามารถปรับแต่งลักษณะการทำงานและการแสดงผลขององค์ประกอบนั้นๆ ได้อย่างละเอียดและยืดหยุ่นมากขึ้น ในบทความนี้เราจะมาอธิบายเกี่ยวกับ HTML Attributes อย่างละเอียด ตั้งแต่พื้นฐานจนถึงการใช้งานขั้นสูง

โครงสร้างพื้นฐานของ HTML Attributes

องค์ประกอบใน HTML จะประกอบด้วยแท็กเปิด (Opening Tag) และแท็กปิด (Closing Tag) ซึ่งภายในแท็กเปิดจะสามารถระบุคุณสมบัต diversely using attributes. รูปแบบทั่วไปของการใช้งาน HTML Attributes คือ

1	`<tagname attribute1="value1" attribute2="value2">เนื้อหา</tagname>`

ตัวอย่าง

1	`<a href="https://www.example.com" target="_blank">เยี่ยมชมเว็บไซต์</a>`

ในตัวอย่างนี้

a คือแท็กสำหรับลิงก์
href และ target คือ attributes
"https://www.example.com" และ "_blank" คือค่าของ attributes เหล่านั้น