02-css.html

<div class="breadcrumb">
  <span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>CSS</span>
</div>

<h2><span class="emoji">🎨</span>CSS - การจัดแต่งสไตล์</h2>

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

<h3>วิธีการใส่ CSS</h3>

<div class="step-card">
  <h4>1. Inline CSS (ใส่ตรงในแท็ก)</h4>
  <pre><code class="language-html">
&lt;p style="color: red; font-size: 18px;"&gt;ข้อความสีแดง&lt;/p&gt;
    </code></pre>
</div>

<div class="step-card">
  <h4>2. Internal CSS (ใส่ใน &lt;style&gt; tag)</h4>
  <pre><code class="language-html">
&lt;head&gt;
    &lt;style&gt;
        p {
            color: blue;
            font-size: 16px;
        }
    &lt;/style&gt;
&lt;/head&gt;
      </code></pre>
</div>

<div class="step-card">
  <h4>3. External CSS (ใส่ในไฟล์ .css แยกต่างหาก) - แนะนำ!</h4>
  <pre><code class="language-html">
&lt;!-- ในไฟล์ HTML --&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;

&lt;!-- ในไฟล์ style.css --&gt;
p {
    color: green;
    font-size: 16px;
}
    </code></pre>
</div>

<h3>Selector พื้นฐาน</h3>

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

<h3>Properties ที่ใช้บ่อย</h3>

<pre><code class="language-css">
/* สี */
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;              /* การจัดแนว */
</code></pre>

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

<pre><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="th"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;เว็บเพจที่สวยงาม&lt;/title&gt;
    &lt;style&gt;
        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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;ยินดีต้อนรับ!&lt;/h1&gt;
    &lt;p&gt;นี่คือเว็บเพจของฉัน&lt;/p&gt;
    &lt;p class="highlight"&gt;ส่วนนี้มีสีพื้นหลังสีเหลือง&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<div class="highlight">
  <strong>⚠️ สำคัญ:</strong> ใช้ External CSS ไฟล์แยก (.css) เพื่อให้โค้ดเป็นระเบียบและสามารถนำกลับมาใช้ใหม่ได้
</div>

<div class="navigation">
  <button class="btn btn-primary" id="prev-btn" data-current="css">← ก่อนหน้า</button>
  <button class="btn btn-primary" id="next-btn" data-current="css">ถัดไป →</button>
</div>

<div class="lesson-quiz">
  <h3>แบบทดสอบสั้นๆ (CSS)</h3>
  <div data-quiz-src="exercises/css-quiz.json"></div>
</div>