หน้าแรก / CSS

🎨CSS - การจัดแต่งสไตล์

CSS (Cascading Style Sheets) ใช้สำหรับจัดแต่งสไตล์และเลย์เอาต์ของเว็บเพจ ถ้า HTML เป็นกระดูกสันหลัง CSS ก็คือเสื้อผ้าและการแต่งหน้า

วิธีการใส่ CSS

1. Inline CSS (ใส่ตรงในแท็ก)


<p style="color: red; font-size: 18px;">ข้อความสีแดง</p>

2. Internal CSS (ใส่ใน <style> tag)


<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS (ใส่ในไฟล์ .css แยกต่างหาก) - แนะนำ!


<!-- ในไฟล์ HTML -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

<!-- ในไฟล์ style.css -->
p {
    color: green;
    font-size: 16px;
}

Selector พื้นฐาน

ประเภท ตัวอย่าง ความหมาย
Element Selector p { color: red; } เลือกทุก <p> tag
Class Selector .highlight { color: yellow; } เลือกทุกองค์ประกอบที่มี class="highlight"
ID Selector #header { background: blue; } เลือกองค์ประกอบที่มี id="header"

Properties ที่ใช้บ่อย


/* สี */
color: red;                    /* สีข้อความ */
background-color: blue;       /* สีพื้นหลัง */

/* ขนาด */
font-size: 16px;             /* ขนาดตัวอักษร */
width: 100px;                /* ความกว้าง */
height: 50px;                /* ความสูง */

/* ระยะห่าง */
margin: 10px;                /* ระยะห่างด้านนอก */
padding: 15px;               /* ระยะห่างด้านใน */

/* ตัวอักษร */
font-family: Arial, sans-serif;  /* ฟอนต์ */
font-weight: bold;               /* ความหนา */
text-align: center;              /* การจัดแนว */

ตัวอย่าง: สร้างเว็บเพจที่มีสไตล์


<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>เว็บเพจที่สวยงาม</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        p {
            color: #555;
            line-height: 1.6;
        }

        .highlight {
            background-color: #fff3cd;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>ยินดีต้อนรับ!</h1>
    <p>นี่คือเว็บเพจของฉัน</p>
    <p class="highlight">ส่วนนี้มีสีพื้นหลังสีเหลือง</p>
</body>
</html>
⚠️ สำคัญ: ใช้ External CSS ไฟล์แยก (.css) เพื่อให้โค้ดเป็นระเบียบและสามารถนำกลับมาใช้ใหม่ได้

แบบทดสอบสั้นๆ (CSS)