พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน style Tag

ใน HTML5 แท็ก <style> ถูกใช้สำหรับการเพิ่ม CSS ภายในไฟล์ HTML เอง (Internal CSS) เพื่อกำหนดสไตล์ให้กับองค์ประกอบต่าง ๆ ของหน้าเว็บ โดยแท็ก <style> จะถูกวางภายใน <head> ของเอกสาร HTML รูปแบบของการใช้งานแท็ก <style> สามารถแบ่งออกเป็นหลายกรณีตามความต้องการ

การใช้งานพื้นฐานของแท็ก <style>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้ style tag</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>ตัวอย่างการใช้ CSS ใน HTML</h1>
    <p>นี่คือข้อความในตัวอย่างที่แสดงการใช้แท็ก style ใน HTML5 เพื่อกำหนดสไตล์</p>
</body>
</html>
  • แท็ก <style> อยู่ภายในแท็ก <head> และกำหนดสไตล์ให้กับองค์ประกอบต่าง ๆ ในหน้าเว็บ เช่น การกำหนดสไตล์ของ <body>, <h1>, และ <p>

การประยุกต์ใช้แท็ก <style> ในการเลือกเฉพาะบางคลาสและไอดี

นอกจากการกำหนดสไตล์โดยใช้ชื่อแท็กโดยตรง เรายังสามารถใช้คลาส (class) และไอดี (id) เพื่อกำหนดสไตล์เฉพาะบางส่วนได้ เช่น

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้ style tag</title>
    <style>
        #main {
            background-color: lightblue;
            padding: 20px;
        }
        .highlight {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1 class="highlight">ข้อความที่เน้น</h1>
        <p>ข้อความปกติที่ไม่มีการเน้น</p>
    </div>
</body>
</html>
  • มีการใช้ id="main" เพื่อกำหนดสไตล์ให้กับ <div> ที่มีไอดีเป็น “main”
  • มีการใช้ class="highlight" เพื่อกำหนดสไตล์ให้กับข้อความใน <h1> ที่ต้องการเน้นด้วยสีแดงและตัวหนา

การใช้ Pseudo-classes และ Pseudo-elements ในแท็ก <style>

สามารถใช้งาน Pseudo-class และ Pseudo-element เพื่อควบคุมการตอบสนองขององค์ประกอบต่าง ๆ ตามเหตุการณ์หรือสถานะได้ เช่น การเปลี่ยนสีของลิงก์เมื่อมีการชี้เมาส์ หรือการจัดการข้อความบางส่วน

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่าง Pseudo-class และ Pseudo-element</title>
    <style>
        a:hover {
            color: green;
            text-decoration: underline;
        }
        p::first-line {
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <p>นี่คือข้อความตัวอย่าง การใช้ pseudo-element เพื่อกำหนดรูปแบบของบรรทัดแรกในย่อหน้านี้</p>
    <a href="#">ลิงก์ตัวอย่าง</a>
</body>
</html>
  • Pseudo-class :hover ใช้ในการเปลี่ยนสีและลักษณะของลิงก์เมื่อมีการชี้เมาส์
  • Pseudo-element ::first-line ใช้เพื่อจัดการเฉพาะบรรทัดแรกของย่อหน้า

การใช้ Media Queries ภายในแท็ก <style>

การใช้ Media Queries ช่วยให้เราสามารถกำหนดสไตล์ที่แตกต่างกันตามขนาดหน้าจอหรือเงื่อนไขอื่น ๆ

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่าง Media Queries</title>
    <style>
        body {
            font-size: 16px;
        }
        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }
            h1 {
                color: red;
            }
        }
    </style>
</head>
<body>
    <h1>ตัวอย่าง Media Queries</h1>
    <p>ขนาดตัวอักษรและสีของข้อความจะเปลี่ยนแปลงตามขนาดหน้าจอ</p>
</body>
</html>
  • เมื่อหน้าจอมีความกว้างไม่เกิน 600px ขนาดตัวอักษรใน <body> จะเล็กลง และสีของ <h1> จะเปลี่ยนเป็นสีแดง

การใช้ Animations และ Transitions

สามารถใช้แอนิเมชันและการเปลี่ยนผ่าน (transition) เพื่อเพิ่มความน่าสนใจให้กับองค์ประกอบในหน้าเว็บ

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่าง Animations และ Transitions</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: width 0.5s ease;
        }
        .box:hover {
            width: 200px;
        }
        @keyframes changeColor {
            0% { background-color: blue; }
            50% { background-color: green; }
            100% { background-color: red; }
        }
        .animated-box {
            width: 100px;
            height: 100px;
            animation: changeColor 3s infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <div class="animated-box"></div>
</body>
</html>
  • กล่องที่มีคลาส box จะเปลี่ยนขนาดเมื่อชี้เมาส์ด้วยการใช้ transition
  • กล่องที่มีคลาส animated-box จะเปลี่ยนสีแบบแอนิเมชันไปเรื่อย ๆ ตามที่กำหนดใน @keyframes

สรุป

แท็ก <style> ใน HTML5 ช่วยให้เราสามารถเขียน CSS ภายในเอกสาร HTML โดยตรง มีประโยชน์ในการกำหนดสไตล์เฉพาะหน้าเว็บนั้น ๆ และสามารถประยุกต์ใช้งานได้หลากหลายรูปแบบ เช่น การกำหนดสไตล์พื้นฐาน, การใช้คลาสและไอดี, การใช้ Pseudo-class และ Pseudo-element, การใช้ Media Queries, และการใช้แอนิเมชันและการเปลี่ยนผ่าน

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ