HTML & CSS Handout · ⁨เอกสาร HTML & CSS⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨ดาวน์โหลดอ้างอิง⁩ 2-up · ⁨2 หน้าต่อแผ่น⁩

1 HTML basics · ⁨พื้นฐาน HTML⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
1.1
หน้าแรกของคุณ

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

ไทย
HTML อธิบายหน้าเว็บด้วยแท็ก แท็กคือคำในวงเล็บมุม เช่น <p> ส่วนใหญ่มาเป็นคู่ — แท็กเปิด <p> และแท็กปิด </p> ล้อมรอบเนื้อหาบางส่วน แท็กพร้อมเนื้อหาคือ element

<p>Hello, world!</p> <p>This is my first web page.</p>

เบราว์เซอร์จะแสดงผลทุกอย่างที่อยู่ระหว่างแท็ก

แท็กที่คุณลืมปิด หรือพิมพ์ผิด อาจไม่แสดงอย่างถูกต้อง

One element = opening tag + content + closing tag
1.2
หัวข้อและย่อหน้า

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

ไทย
หัวข้อเรียงจาก <h1> (ใหญ่ที่สุด) ลงมาถึง <h6> (เล็กที่สุด) ย่อหน้าคือ <p> ใช้ <h1> พอดีหนึ่งอันสำหรับหัวข้อหลักของหน้า

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
การจัดรูปแบบข้อความ

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

ไทย
ทำให้ตัวหนังสือหนาด้วย <strong> และตัวเอียงด้วย <em> การขึ้นบรรทัดใหม่คือ <br> — ซึ่งไม่มีแท็กปิด

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

ข้อผิดพลาดที่พบบ่อย

แท็กส่วนใหญ่มาเป็นคู่ — <p>...</p> การลืมแท็กปิดจะทำให้ layout ด้านล่างพัง

แท็กอยู่ในวงเล็บมุม; ข้อความที่คุณเห็นจะอยู่ระหว่างแท็กเปิดและแท็กปิด

หัวข้อเรียง <h1> (ใหญ่ที่สุด) ถึง <h6> — อย่าเลือกหัวข้อเพียงเพราะขนาด
2 Lists, links & images · ⁨รายการ ลิงก์ และภาพ⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
2.1
รายการ

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

ไทย
รายการไม่เรียงลำดับ <ul> แสดงbullet; รายการเรียงลำดับ <ol> แสดงตัวเลข แต่ละรายการคือ <li>

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul สำหรับรายการแบบจุด, ol สำหรับรายการแบบตัวเลข; แต่ละรายการคือ li
2.2
ลิงก์

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

ไทย
ลิงก์คือ anchor <a>的属性 href เก็บที่อยู่它将指向

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

เพิ่ม target="_blank" เพื่อเปิดลิงก์ในแท็บใหม่
2.3
รูปภาพ

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

ไทย
รูปภาพคือ <img> — ไม่มีแท็กปิด src คือที่อยู่ของภาพ; alt คือข้อความที่จะแสดงหากโหลดภาพไม่สำเร็จ (และอ่านให้ผู้ใช้ตาบอดฟังด้วย)

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

ข้อผิดพลาดที่พบบ่อย

ภาพต้องการ src (ไฟล์) และ alt (คำอธิบาย); ลิงก์ต้องการ href

<img> ไม่มีแท็กปิดแยกต่างหาก

เส้นทาง src ที่เสียจะแสดงอะไรเลย — ตรวจสอบชื่อไฟล์และโฟลเดอร์
3 Page structure · ⁨โครงสร้างหน้า⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
3.1
หน้าที่สมบูรณ์

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

ไทย
หน้าจริงมีโครงร่างคงที่ <!DOCTYPE html> บอกว่าเป็น HTML5 ทุกอย่างอยู่ภายใน <html> <head> เก็บข้อมูลเกี่ยวกับหน้า; <body> เก็บสิ่งที่เห็น

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

หน้าเว็บเป็นโครงสร้างต้นไม้: ส่วน head อธิบายหน้าเว็บ, ส่วน body เก็บสิ่งที่คุณเห็น

<title> จะปรากฏในแท็บเบราว์เซอร์

<meta charset="utf-8"> ทำให้หน้าแสดงผลได้หลายภาษา
3.2
หมายเหตุและการซ้อนทับ

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

ไทย
_heading  คือหมายเหตุที่เบราว์เซอร์.Subject to Ignore แท็กซ้อนกัน; ขอบเขตแต่ละระดับเพื่อให้โครงสร้างชัดเจน ปิดแท็กตามลำดับย้อนกลับกับการเปิด将它们

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

ข้อผิดพลาดที่พบบ่อย

แท็กต้องซ้อนกัน ไม่ควรทับซ้อน: ⟨<b><i>text</i></b>⟩ อย่าใช้ ⟨<b><i>text</b></i>⟩

หน้าต้องการ <html>,一个 <head> (สำหรับหัวข้อและลิงก์) และ一个 <body> (สำหรับสิ่งที่เห็น)

Comment คือ ; เบราว์เซอร์.Subject to Ignore มัน
4 Tables & forms · ⁨ตารางและแบบฟอร์ม⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
4.1
ตาราง

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

ไทย
ตาราง <table> สร้างจากแถว <tr> เซลล์หัวตารางคือ <th> (หนา, กึ่งกลาง); เซลล์ข้อมูลทั่วไปคือ <td>

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr rows → th/td cells
4.2
ฟอร์ม

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

ไทย
ฟอร์ม <form> รวบรวมข้อมูลจากผู้ใช้ An <input> คือกล่อง;一个 <label> ตั้งชื่อมัน;一个 <button> ส่งข้อมูล

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

Common <input> type values: text, number, email, password, checkbox

ข้อผิดพลาดที่พบบ่อย

Table cells ไป داخلแถว:一个 <tr> เก็บเซลล์ <td>

Every form input ควรจะมี matching <label> เพื่อให้ชัดเจนและเข้าถึงได้ง่าย

ปุ่มภายในฟอร์มจะส่งข้อมูลโดยอัตโนมัติ — ตั้งค่า type="button" หากคุณไม่ต้องการให้ทำเช่นนั้น
5 Boxes & sections · ⁨กล่องและส่วน⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
5.1
div, span & ส่วนประกอบเชิงความหมาย

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

ไทย
<div> เป็นกล่องบล็อคทั่วไปที่รวมเนื้อหาไว้บนบรรทัดของตัวเอง <span> เป็นกล่องอินไลน์ทั่วไปที่อยู่ภายในบรรทัดข้อความ คุณใช้พวกมันเพื่อรวมสิ่งต่างๆ เข้าด้วยกันเพื่อให้สามารถปรับสไตล์หรือจัดตำแหน่งได้

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

แท็กเชิงความหมายอธิบายบทบาทของเนื้อหา ซึ่งช่วยให้อ่านหน้าจอและเครื่องมือค้นหาเข้าใจ ควรเลือกใช้แทน plain <div> เมื่อเหมาะสม: <header>, <nav>, <main>, <section>, <article>, <footer>

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

ข้อผิดพลาดที่พบบ่อย

<div> เป็น block (เริ่มบรรทัดใหม่); <span> เป็น inline (อยู่ในบรรทัดเดิม)

ใช้แท็กเชิงความหมายอย่าง <header>, <nav> และ <footer> เมื่อเหมาะสม ไม่ใช่ใช้ <div> สำหรับทุกสิ่งทุกอย่าง

อย่าใช้แท็กเพียงเพราะรูปลักษณ์由其 default — ให้ปรับสไตล์ด้วย CSS แทน

div is a block box; span wraps inline text

6 CSS basics · ⁨พื้นฐาน CSS⁩

reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩

6.1

การเพิ่ม CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

ไทย

CSS ใช้จัดรูปแบบ HTML วิธีที่ง่ายที่สุดคือการใส่ <style> บล็อกใน <head> (เว็บไซต์ขนาดใหญ่จะใช้ไฟล์แยกต่างหากที่มี .css里面有 <link>) กฎ CSS มี selector ตามด้วย { property: value; } คู่ที่เรียกว่า declarations

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Link a stylesheet so CSS rules style HTML elements

6.2

Selectors: class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

ไทย

class ปรับสไตล์หลายองค์ประกอบ: เพิ่ม class="..." ใน HTML และเขียน .name ใน CSS id ปรับสไตล์องค์ประกอบเพียงหนึ่งเดียว: id="..." และ #name

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

Selectors ที่คุณจะพบมากที่สุด รวมไว้ในที่เดียว:

Selector	เลือก
`p`	ทุก ⟨`<p>`⟩ element
`.note`	ทุกสิ่งที่มียัง `class="note"`
`#title`	องค์ประกอบเดียวที่มี `id="title"`
`h1, h2`	Several selectors พร้อมกัน
`nav a`	ทุก ⟨`<a>`⟩ ภายใน ⟨`<nav>`⟩
`.btn:hover`	สถานะหนึ่งขององค์ประกอบ (ดูหัวข้อ 10)

ข้อผิดพลาดที่พบบ่อย

Class selector เริ่มต้นด้วย . และ id selector เริ่มต้นด้วย #
เชื่อมต่อ stylesheet ใน <head> หรือใส่กฎภายใน <style> บล็อก
Class สามารถนำไปใช้ซ้ำกับหลายองค์ประกอบได้; id ควรปรากฏเพียงครั้งต่อหนึ่งหน้า

7 Colours & text · ⁨สีและข้อความ⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
7.1
สีและพื้นหลัง

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

ไทย
ตั้งค่าสีข้อความด้วย color และพื้นหลังด้วย background-color สีสามารถเป็นชื่อ (red), รหัส hex (#ff0000), หรือ rgb(255, 0, 0)

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

CSS colours: named, hex, and rgb()
7.2
การปรับสไตล์ข้อความ

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

ไทย
คุณสมบัติข้อความทั่วไป: font-size, font-weight (เช่น bold), font-family, text-align (left / center / right), และ line-height เพื่อการจัดระยะห่าง

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

ข้อผิดพลาดที่พบบ่อย

color ตั้งค่าสีข้อความ; background-color ตั้งค่าพื้นหลัง

สีสามารถเป็นชื่อ, รหัส hex #rrggbb, หรือ rgb(...)

ปิดแต่ละ declaration Within braces ด้วยเครื่องหมายกึ่งทศนิยม ; — เพื่อแยกคู่ property: value (ตัวถัดจาก declaration สุดท้ายนั้นเป็นทางเลือก) กฎ itself จบลงด้วยวงเล็บปิด }
8 The box model · ⁨โมเดลของกล่อง⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
8.1
Box model

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

ไทย
องค์ประกอบทุกชิ้นเป็นกล่องที่มีสี่ชั้น จากด้านในออกนอก: content, padding (พื้นที่ภายใน border), border, และ margin (พื้นที่ภายนอก border)

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

โมเดลกล่อง: เนื้อหา, แล้ว padding, แล้ว border, แล้ว margin
8.2
Margin & padding

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

ไทย
padding เพิ่มพื้นที่ ภายใน border ดันเนื้อหาเข้าไปข้างใน margin เพิ่มพื้นที่ ภายนอก ดันกล่องอื่นออกไป ให้ค่าเดียวสำหรับทุกด้าน หรือสี่ค่า (บน ขวา ล่าง ซ้าย)

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
Display

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

ไทย
คุณสมบัติ display กำหนดวิธีการไหลของกล่อง block ใช้ทั้งบรรทัด; inline อยู่ภายในบรรทัดข้อความ; none ลบกล่องออกทั้งหมด; flex จัดเรียง children เป็นแถว (หัวข้อถัดไป)

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

ข้อผิดพลาดที่พบบ่อย

Padding อยู่ภายใน Border; Margin คือพื้นที่ภายนอก

box-sizing: border-box ทำให้ความกว้างที่กำหนดรวม padding และ border — มักจะเป็นสิ่งที่ต้องการ

display: none ซ่อนองค์ประกอบอย่างสมบูรณ์; visibility: hidden ทิ้งช่องว่างไว้
9 Layout
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
9.1
Width & Centering

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

ไทย
ตั้งค่า width ของกล่อง เพื่อให้จัดกึ่งกลาง block ให้กำหนด width และ margin: 0 auto — auto จะแบ่งพื้นที่ที่เหลือเท่าๆ กันทางซ้ายและขวา

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

ไทย
Flexbox จัดเรียง children เป็นแถว (หรือคอลัมน์) ตั้งค่า display: flex บน parent — container gap เพิ่มพื้นที่ระหว่าง children; flex: 1 ทำให้พวกเขากว้างเท่ากัน

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

container แบบ flex จัดเรียงไอเทมตามแกนหลัก; gap เพิ่มช่องว่างระหว่างไอเทม
9.3
Mini-project: Profile card

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

ไทย
รวม boxes, สี, ข้อความ และการจัดระยะห่างเข้าด้วยกันเป็นคอมโพเนนต์เล็กๆ

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

ข้อผิดพลาดที่พบบ่อย

จัดกึ่งกลาง Block ที่มีความกว้างกำหนดไว้โดยใช้ margin: 0 auto

Flexbox ต้องการ display: flex บน CONTAINER ไม่ใช่บน items

Width ใน % เป็นสัมพัทธ์ต่อ parent ดังนั้นตรวจสอบ width ของ parent ด้วย
10 Going further · ⁨ไปให้ลึกขึ้น⁩
reference.pdf.th 2-up · ⁨2 หน้าต่อแผ่น⁩
10.1
Hover & Pseudo-classes

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

ไทย
Pseudo-class ปรับสไตล์องค์ประกอบในสถานะเฉพาะ :hover ใช้เมื่อเมาส์ชี้ไปที่องค์ประกอบ เพิ่ม transition เพื่อให้การเปลี่ยนแปลงเกิดขึ้นอย่างนุ่มนวลแทนที่จะกระโดด

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

Pseudo-classes有用อื่นๆ: :focus (input ที่ผู้ใช้คลิกเข้ามา) และ :first-child

:hover จัดรูปแบบองค์ประกอบเมื่อชี้เมาส์ไปเหนือมัน
10.2
Positioning

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

ไทย
Positioning ย้ายกล่องออกจากตำแหน่งปกติ relative เลื่อนกล่อง (และทำให้เป็นจุดยึดสำหรับ children); absolute วางกล่องตามตำแหน่งที่แน่นอน วัดจาก parent ที่ positioned ใกล้ที่สุด; fixed ยึดไว้กับหน้าจอแม้เมื่อเลื่อนหน้าเว็บ

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left บอกว่าต้องย้ายเท่าไหร่ — ใช้ได้เฉพาะกับกล่องที่ positioned แล้วเท่านั้น
10.3
Media queries & Responsive design

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

ไทย
Responsive page ปรับตัวตามขนาดหน้าจอ Media query ใช้กฎของมันเฉพาะเมื่อเงื่อนไขเกี่ยวกับหน้าจอเป็นจริง เช่น max-width

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

ออกแบบ Mobile-first: เขียนสไตล์โทรศัพท์ก่อน แล้วเพิ่ม @media (min-width: ...) rules สำหรับหน้าจอที่ใหญ่ขึ้น

Width เป็นเปอร์เซ็นต์และ max-width ช่วยให้กล่องหดตามหน้าจอ

ข้อผิดพลาดที่พบบ่อย

:hover เชื่อมติดกับselectorโดยไม่เว้นวรรค: .btn:hover, ไม่ใช่ .btn :hover.

position: absolute วัดจาก parent ที่ ** positioning** ใกล้เคียงที่สุด — กำหนดให้ parent นั้น position: relative.

Media query ล้อมรอบกฎทั้งหมด: @media (max-width: 600px) { .a { ... } }.