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

HTML Style
HTML Style

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

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

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

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

1. Inline Style

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

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

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

จุดเด่น

  • ใช้งานง่ายและเร็ว
  • เหมาะสำหรับการปรับเปลี่ยนเล็กๆ น้อยๆ

ข้อเสีย

  • ไม่เหมาะสำหรับการจัดการสไตล์ในหลายๆ หน้าเว็บ เพราะไม่สามารถนำไปใช้ซ้ำได้

2. Internal Style Sheet

การใช้ Internal Style จะเขียนสไตล์ไว้ในแท็ก <style> ภายใน <head> ของเอกสาร HTML ดังนี้

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a blue text.</p>
</body>
</html>

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

จุดเด่น

  • สามารถจัดการสไตล์ของหลายๆ องค์ประกอบในหน้าเดียวกันได้อย่างมีประสิทธิภาพ
  • ใช้งานง่ายสำหรับหน้าเว็บเดียว

ข้อเสีย

  • ไม่สามารถนำไปใช้กับหลายๆ ไฟล์ HTML ได้

3. External Style Sheet

การใช้ External Style Sheet คือการแยกสไตล์ออกไปไว้ในไฟล์ CSS ภายนอก และเชื่อมต่อไฟล์นั้นเข้ากับไฟล์ HTML ผ่าน <link> ใน <head>

ตัวอย่างไฟล์ HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This is a styled text.</p>
</body>
</html>

ตัวอย่างไฟล์ styles.css

p {
    color: green;
    font-size: 22px;
}

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

จุดเด่น

  • สะดวกในการจัดการสไตล์ของหลายๆ หน้าเว็บ เพราะสามารถใช้ไฟล์ CSS ร่วมกันได้
  • แยกโค้ด HTML และ CSS ทำให้โค้ดดูเป็นระเบียบและเข้าใจง่าย

ข้อเสีย

  • ต้องใช้ไฟล์ CSS เพิ่มเติม ซึ่งอาจทำให้ต้องการการเชื่อมต่อที่ดีขึ้นในบางกรณี

ตัวอย่างการใช้คุณสมบัติ style

ต่อไปนี้เป็นตัวอย่างการใช้คุณสมบัติที่มักจะใช้ใน style

  • color กำหนดสีตัวอักษร เช่น color: red;
  • font-size กำหนดขนาดตัวอักษร เช่น font-size: 20px;
  • background-color กำหนดสีพื้นหลัง เช่น background-color: yellow;
  • margin กำหนดระยะห่างภายนอก เช่น margin: 10px;
  • padding กำหนดระยะห่างภายใน เช่น padding: 15px;
  • border กำหนดเส้นขอบ เช่น border: 1px solid black;
  • text-align กำหนดการจัดตำแหน่งของข้อความ เช่น text-align: center;

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

Leave a Reply