Bài 7: CSS cơ bản – Selector & Box Model
🎯 Mục tiêu
- Hiểu CSS là gì và cách nhúng CSS vào HTML
- Biết 3 kiểu selector phổ biến: theo thẻ, theo class, theo id
- Hiểu Box Model:
content–padding–border–margin - Biết dùng các thuộc tính CSS cơ bản để làm đẹp trang
📘 Lý thuyết ngắn
1) CSS dùng để làm gì?
CSS giúp thay đổi màu sắc, font chữ, khoảng cách, bố cục… của trang web.
2) 3 cách nhúng CSS
- Inline: viết ngay trong thẻ (ít dùng):
style="color:red" - Internal: viết trong
<style>(dùng nhiều khi học) - External: file riêng
style.css(chuẩn khi làm dự án)
3) Selector (chọn phần tử để áp CSS)
/* Theo thẻ */
p { color: #333; }
/* Theo class (.) */
.card { border: 1px solid #ddd; }
/* Theo id (#) */
#title { font-size: 28px; }
4) Box Model
[ margin ]
[ border ]
[ padding ]
[ content ]
content: nội dung thật (chữ/ảnh)
padding: khoảng đệm bên trong
border: đường viền
margin: khoảng cách bên ngoài
💻 Code mẫu (thực hành selector + box model)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 7 - CSS Selector & Box Model</title>
<style>
/* Reset nhẹ để dễ nhìn */
* { box-sizing: border-box; }
body {
font-family: Arial;
background: #f7f8fa;
padding: 24px;
line-height: 1.7;
}
/* Selector theo id */
#title {
text-align: center;
margin: 0 0 18px;
color: #111;
}
/* Selector theo class */
.card {
max-width: 760px;
margin: 0 auto;
background: #fff;
/* Box Model */
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
/* Selector theo thẻ */
p {
color: #333;
margin: 10px 0;
}
.tag {
display: inline-block;
background: #eef2ff;
border: 1px solid #dbeafe;
padding: 2px 10px; /* padding */
margin-right: 6px; /* margin */
border-radius: 999px;
font-size: 13px;
}
.box-demo {
margin-top: 16px;
background: #fff7ed;
/* content là phần chữ bên trong */
padding: 14px; /* đệm trong */
border: 2px dashed #fb923c; /* viền */
margin: 14px 0; /* khoảng ngoài */
border-radius: 12px;
}
button {
padding: 10px 14px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #111;
color: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<h1 id="title">Thực hành CSS Selector & Box Model</h1>
<div class="card">
<p>Đây là đoạn văn (selector theo thẻ <code>p</code>).</p>
<p>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</p>
<div class="box-demo" id="box">
Box Model: Hãy quan sát padding, border, margin.
</div>
<button id="btn">Tăng Padding</button>
</div>
<script>
// JS nhỏ: bấm nút để tăng padding (để nhìn rõ box model)
const box = document.getElementById("box");
const btn = document.getElementById("btn");
let pad = 14;
btn.addEventListener("click", function(){
pad += 6;
box.style.padding = pad + "px";
box.textContent = "Padding hiện tại: " + pad + "px";
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai7.html → mở bằng Chrome.
Bấm “Tăng Padding” để thấy Box Model thay đổi rõ ràng.
✍️ Bài tập
- Đổi màu nền của
.cardthành#f0f9ff. - Cho thẻ
pcó chữ lớn hơn một chút (font-size: 16px). - Thêm một class mới tên
.highlightđể làm nổi bật chữ (ví dụ: nền vàng nhạt). - (Nâng cao) Tạo nút “Giảm Padding” (JS giảm padding xuống).
✅ Đáp án gợi ý
1) Đổi nền card
.card { background: #f0f9ff; }
2) Tăng cỡ chữ p
p { font-size: 16px; }
3) Class highlight
.highlight {
background: #fff7ed;
padding: 2px 6px;
border-radius: 6px;
}
4) Nút giảm padding (gợi ý)
let pad = 14;
btnMinus.addEventListener("click", function(){
pad = Math.max(0, pad - 6);
box.style.padding = pad + "px";
});
📌 Danh sách bình luận