1. CSS คืออะไร?

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

        ตัวอย่าง: CSS ช่วยให้การตกแต่งง่ายขึ้นในหลายหน้าเพจพร้อมกัน

2. โครงสร้าง HTML พื้นฐาน

นี่คือตัวอย่างโครงสร้างพื้นฐานของ HTML ที่สามารถใส่ CSS ได้:

        <!DOCTYPE html>
        <html>
        <head>
            <title>ตัวอย่าง HTML</title>
            <style>
                body {
                    background-color: lightblue;
                }
            </style>
        </head>
        <body>
            <h1>ยินดีต้อนรับ</h1>
            <p>นี่คือข้อความตัวอย่าง</p>
        </body>
        </html>

3. การจัดหน้า (Layout)

เราสามารถจัดตำแหน่งเนื้อหาให้อยู่ตรงกลางจอได้โดยใช้ Flexbox:

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

ผลลัพธ์: กล่องอยู่ตรงกลางจอ

4. การจัดหน้าแบบ 3 ส่วน (ซ้าย, กลาง, ขวา)

ถ้าต้องการแบ่งเนื้อหาออกเป็น 3 ส่วน สามารถทำได้ดังนี้:

        body {
            display: flex;
        }
        
        .left, .right {
            width: 20%;
            background-color: lightgray;
            padding: 10px;
        }
        
        .center {
            width: 60%;
            background-color: white;
            padding: 10px;
        }

            

                
ผลลัพธ์: เพิ่มพื้นหลังสำเร็จ

            

        
            
6. สรุปคำสั่ง CSS ที่ควรรู้

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

ยินดีต้อนรับสู่การเรียนรู้ CSS

เรียนรู้เกี่ยวกับการใช้ CSS เพื่อปรับแต่งเว็บไซต์ให้สวยงามและใช้งานได้ดีขึ้น

คลิกที่นี่

ส่วนที่ 1: การตั้งค่าของ body

ฟอนต์: ในส่วนนี้เราใช้ฟอนต์ Arial ซึ่งเป็นฟอนต์ที่อ่านง่ายและใช้กันทั่วไปในเว็บไซต์ต่างๆ


        body {
            font-family: Arial, sans-serif;
        }

สีพื้นหลัง: การใช้พื้นหลังสีเทาอ่อน (#f4f4f4) ทำให้เนื้อหาของเว็บไซต์ดูสะอาดตา และไม่ทำให้เว็บไซต์ดูรกจนเกินไป


        body {
            background-color: #f4f4f4;
        }

การจัดการระยะห่าง: เราลบ margin และ padding ที่เบราว์เซอร์ตั้งค่าให้มาเพื่อให้สามารถจัดการระยะห่างได้ตามต้องการ


        body {
            margin: 0;
            padding: 0;
        }

ส่วนที่ 2: การจัดกล่องเนื้อหาหลัก

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


        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

การเพิ่มเงา (Box Shadow): การใช้เงาช่วยทำให้กล่องมีมิติและดูน่าสนใจมากขึ้น


        .container {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

มุมมน (Border Radius): การทำมุมมนทำให้กล่องดูเรียบร้อยและเป็นมิตรต่อสายตา


        .container {
            border-radius: 10px;
        }

ส่วนที่ 3: ปุ่ม

การตั้งค่าปุ่ม: ปุ่มที่มีการเปลี่ยนสีเมื่อ hover ช่วยทำให้ปุ่มดูน่าสนใจและทำให้ผู้ใช้งานรู้ว่าปุ่มนั้นคลิกได้


        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

การเปลี่ยนสี: ปุ่มจะเปลี่ยนเป็นสีเขียวเข้มเมื่อผู้ใช้วางเมาส์เหนือปุ่ม เพื่อให้รู้ว่าเป็นปุ่มที่สามารถคลิกได้


        .btn:hover {
            background-color: #45a049;
        }