Đọc miễn phí · Chương 02
02
Khoác áo màu sắc: CSS
Vũ khí thứ hai · 두 번째 무기 — 디자인
Gồm Flexbox, Grid & Responsive
Chạm nửa phải màn hình để lật trang ›
Tóm tắt chương trước
Chuyện đã đến đâu rồi?
Nếu bạn mới cầm cuốn này lên từ Chương 02 — đây là tất cả những gì bạn cần biết:
● Một hệ thống bị tấn công. Lúc 02:44 sáng, toàn bộ website công ty NOX TECH biến mất. Kẻ gây ra để lại một chữ ký lạnh người: "A."
● Một người chưa biết gì được kéo vào. Linh — mật danh ZERO — du học sinh Việt tại Hàn, chưa từng viết một dòng code, bỗng trở thành mảnh ghép cuối của một đội đang chạy đua với deadline 72 giờ.
● Vũ khí đầu tiên: HTML. Trong đêm đầu tiên, ZERO học dựng "bộ khung" của một trang web — và lần đầu tạo ra một thứ tồn tại thật trên màn hình.
● Nhưng "A." đi trước một bước. Hắn dùng AI tự deploy hàng nghìn trang giả. Bộ khung của ZERO đã dựng xong — chỉ có điều, nó xấu đến mức không ai tin nổi.
Bạn đang ở đây — chặng 2 / 7
02
Vũ khí thứ hai
Khoác áo màu sắc: CSS
두 번째 무기 — 디자인
Một câu lệnh. Cả thành phố xám xịt bừng sống dậy thành muôn màu — như thể ai đó vừa bật công tắc cho thế giới.
Trang web của ZERO chạy được. Nhưng "chạy được" và "trông ra hồn" là hai chuyện hoàn toàn khác nhau — và công ty vừa mất mặt vì điều đó. Cùng một bộ khung, chỉ cần khoác đúng lớp áo, có thể biến từ "trang của năm 1995" thành chuyên nghiệp trong vài giờ. Vũ khí làm được điều đó có tên: CSS.
Thư đến · 05:30 sáng
"Trang thông báo trông như từ năm 1995.
Khách hàng đang chụp màn hình chế giễu trên mạng.
Làm cho nó TỬ TẾ. Ngay."
Trưởng nhóm xoa trán. "Họ nói đúng. Trang chạy được, nhưng xấu đến mức làm xấu mặt cả công ty." Anh nhìn sang ZERO. "Cậu dựng được cái khung. Giờ ai làm nó trông ra hồn đây?"
"Để ZERO làm. Một bộ khung trơ trụi thì ai cũng chê. Nhưng khoác cho nó lớp áo đúng cách, cùng một trang sẽ trông chuyên nghiệp ngay. Đó là việc của vũ khí thứ hai — CSS. Giờ là lúc dán giấy dán tường và bật đèn."
Đã 5 giờ sáng, cả văn phòng vẫn sáng đèn — không ai về. "Anh ấy không ngủ ba ngày rồi," tiền bối nói khẽ, nhìn về phía Trưởng nhóm đang đứng trước tấm bảng trắng chi chít sơ đồ. "Vụ sập xảy ra dưới ca trực của anh ấy. Nếu không khôi phục kịp, người mất việc sẽ là anh ấy — chứ không phải kẻ thật sự gây ra chuyện này."
ZERO nhìn người đàn ông kia, và lần đầu hiểu rằng: sau mỗi dòng code đều có một con người, với những áp lực rất thật. Cô quay lại màn hình, quyết tâm hơn.
Góc bàn của ZERO · 05:42 sáng · hai ly cà phê đã nguội
"Đố em đấy. Anh muốn mọi tiêu đề trên trang đổi sang màu xanh. Em sẽ vào sửa từng cái một chứ?"
"Chẳng lẽ phải mở từng dòng HTML ra tô tay? Trang này có cả trăm tiêu đề…"
"Đó là lý do người ta ghét HTML thuần. Nhìn này — anh chỉ viết một câu: h1 { color: blue; }. Toàn bộ tiêu đề đổi màu cùng lúc."
"Khoan… nghĩa là em ra lệnh cho cả nhóm chứ không phải từng đứa?"
"Chính xác. Cái h1 đứng trước gọi là bộ chọn (selector) — nó chỉ ra 'ai' nghe lệnh. Phần trong ngoặc là 'phải làm gì'. Nắm được điều đó, em nắm được một nửa CSS."
CSS không tô màu từng chữ — nó chọn một nhóm rồi ra lệnh cho cả nhóm. Hiểu "selector" là hiểu cách nói chuyện với trình duyệt.
Vũ khí thứ hai
CSS là gì?
CSS viết tắt của Cascading Style Sheets. Nếu HTML quyết định một thứ "là cái gì", thì CSS quyết định nó "trông như thế nào". Màu sắc, kích thước, khoảng cách, vị trí — mọi thứ thuộc về thiết kế đều là lãnh địa của CSS.
"Nếu HTML là cơ thể con người, thì CSS là quần áo và trang điểm. Cùng một người, mặc đồ khác nhau là trông khác hẳn. Bạn có thể thay đổi hoàn toàn ấn tượng của trang mà không động vào bộ khung."
Một quy tắc CSS luôn theo một khuôn mẫu: chọn ai (bộ chọn) → thuộc tính gì → giá trị thế nào.
color: crimson; /* màu chữ thành đỏ thẫm */
font-size: 48px; /* kích thước 48 pixel */
text-align: center; /* căn giữa */
}
Cùng một thẻ <h1> đã hoàn toàn khác. Không thêm dòng nội dung nào — chỉ thay đổi kiểu dáng.
Bí mật của mọi thiết kế
Box Model
Mọi phần tử trên web đều nằm trong một chiếc hộp vô hình gồm 4 lớp. Hiểu nó, bạn giải thích được 90% vấn đề về khoảng cách và bố cục.
| Lớp | Việt / Hàn | Vai trò |
|---|---|---|
| Content | Nội dung · 콘텐츠 | Phần trong cùng — chữ hoặc ảnh thật sự |
| Padding | Đệm trong · 패딩 | Khoảng trống giữa nội dung và viền — như độ dày đệm ghế |
| Border | Viền · 테두리 | Đường bao quanh chiếc hộp |
| Margin | Lề ngoài · 마진 | Khoảng cách với hộp khác — như cách nhà hàng xóm |
Cách nói chuyện với trình duyệt
Ba cách "chỉ tay" vào phần tử
Để trang điểm cho một phần tử, trước hết CSS phải "chọn" được nó. Có ba cách chọn phổ biến — hiểu được ba cách này là bạn điều khiển được mọi thứ trên trang.
| Cách chọn | Cú pháp | Ý nghĩa |
|---|---|---|
| Theo tên thẻ | p { } | Chọn MỌI thẻ <p> trên trang |
| Theo class | .tieude { } | Chọn phần tử có class="tieude" (dấu chấm) |
| Theo id | #main { } | Chọn phần tử có id="main" (dấu thăng, mỗi id một) |
<p class="noibat">Dòng quan trọng</p>
/* CSS: chọn theo class .noibat */
.noibat { color: red; font-weight: bold; }
Dùng class (dấu chấm) cho những kiểu lặp lại nhiều nơi — phổ biến nhất. Dùng id (dấu thăng) cho một phần tử duy nhất. Dùng tên thẻ khi muốn áp cho tất cả thẻ cùng loại.
Bộ đồ nghề trang điểm
Vài thuộc tính CSS bạn sẽ yêu thích
| Thuộc tính | Làm gì |
|---|---|
color | Màu chữ |
background-color | Màu nền |
font-size | Cỡ chữ |
text-align | Căn lề chữ (left / center / right) |
padding / margin | Đệm trong / lề ngoài (nhớ Box Model!) |
border | Viền (vd: 1px solid black) |
border-radius | Bo tròn góc |
Cách hiểu màu trong CSS
| Cách viết | Ví dụ |
|---|---|
| Tên màu | red, blue, teal — đơn giản, ít lựa chọn |
| Mã HEX | #0e7c66 — phổ biến nhất, 6 ký tự |
| RGB | rgb(14,124,102) — 3 kênh đỏ–lục–lam |
| RGBA | rgba(14,124,102,0.5) — thêm độ trong suốt |
Dùng công cụ chọn màu online (color picker) để lấy mã HEX. Đừng chọn quá nhiều màu — một trang đẹp thường chỉ dùng 2–3 màu chính hài hòa. Ít mà tinh tế hơn nhiều mà rối.
Khác biệt giữa "tập sự" và "chuyên nghiệp"
Vài thủ thuật khiến trang "sang" hơn hẳn
| Thuộc tính | Hiệu ứng |
|---|---|
box-shadow | Đổ bóng, tạo chiều sâu cho hộp |
border-radius | Bo tròn góc — mềm mại, hiện đại |
transition | Chuyển động mượt khi thay đổi (vd: di chuột) |
opacity | Độ mờ / trong suốt |
linear-gradient | Màu chuyển sắc (gradient) cho nền |
border-radius: 12px; /* bo góc */
box-shadow: 0 4px 12px rgba(0,0,0,.1); /* bóng nhẹ */
transition: .3s; /* chuyển mượt */
}
.the:hover { /* khi di chuột vào */
box-shadow: 0 8px 24px rgba(0,0,0,.2); /* bóng đậm hơn */
}
Nó áp dụng kiểu khi người dùng di chuột vào phần tử. Kết hợp với transition, bạn tạo được hiệu ứng "nổi lên khi rê chuột" mà các trang chuyên nghiệp hay dùng.
☐ Thêm thẻ <style> vào trong <head> của file my.html
☐ Đổi color và font-size của h1
☐ Tô màu nền cho body bằng background-color
☐ Cho p một padding: 20px và quan sát sự thay đổi
"Hôm nay mình đổi được màu một dòng chữ. Chỉ một dòng thôi. Nghe thật nhỏ bé. Nhưng mình đã ngồi ngắm nó suốt năm phút, như ngắm một điều kỳ diệu. Sáu tháng qua mình tin mình chẳng làm được gì nên hồn. Hôm nay, lần đầu tiên, mình nghĩ: có lẽ mình đã sai về bản thân.
Tiền bối nói câu mình cứ nhớ mãi: 'Đừng học thuộc. Hãy hiểu.' Mình chưa hiểu hết ý anh ấy. Nhưng mình cảm thấy nó quan trọng. Quan trọng hơn cả CSS."
⚿ Không có trên Google · ghi chép từ người đi trước
Vì sao frontend Hàn thích <div> + Flexbox hơn <table>?
✕ Ngày xưa người ta dùng <table> để dàn layout. Giờ tuyệt đối tránh — table là để hiển thị dữ liệu dạng bảng, không phải để bố cục.
✕ Layout bằng table cứng nhắc, không responsive được, rất khó bảo trì — một thay đổi nhỏ là vỡ cả trang.
✕ Công ty Hàn chuộng div + Flexbox/Grid vì linh hoạt, co giãn theo màn hình, dễ cho người sau đọc.
✕ Dàn layout bằng table trong bài test phỏng vấn — gần như chắc chắn bị loại.
⚿ Góc nhìn thực chiến
Một bug CSS từng khiến cả team mất 3 ngày
✕ Một dự án thật: nút "Mua hàng" biến mất trên iPhone nhưng vẫn hiện trên Android. Cả team soi JavaScript suốt 2 ngày.
✕ Hóa ra thủ phạm là một dòng CSS: overflow:hidden ở thẻ cha cắt mất nút con khi màn hình hẹp.
✕ Bài học: rất nhiều "bug logic" thực ra là bug CSS. Khi giao diện sai, hãy nghi ngờ CSS trước khi đổ lỗi cho code.
Sau khi học CSS, AI giúp bạn debug giao diện rất nhanh — nếu bạn mô tả đúng vấn đề:
💬 "Đây là CSS của tôi. Nút bị tràn ra ngoài khung trên màn hình nhỏ. Hãy chỉ ra nguyên nhân và cách sửa bằng Flexbox."
💬 "Chuyển đoạn layout dùng float này sang Flexbox hiện đại, giải thích từng thuộc tính cho người mới."
▤ Hồ sơ nghề nghiệp · sau CSS
Bạn đã có thể nhận thêm việc:
- ✓Chỉnh sửa giao diện website theo bản thiết kế
- ✓Làm web responsive — đẹp trên mọi màn hình
- ✓Tự dựng portfolio cá nhân để đi xin việc
- ✓Nhận job freelance "cắt HTML/CSS từ Figma"
Đã đủ kỹ năng để nhận freelance giao diện có trả phí.
Năng lực mới ghi nhận: [ CSS — lớp áo của web ]
> Một tài khoản lạ vừa rời kênh nội bộ — không rõ danh tính.
> "Cô tô màu cho cái khung. Đẹp đấy. Nhưng tôi tô được những thứ cô chưa tưởng tượng nổi." — A.
Có một người thứ tư đang lặng lẽ theo dõi kênh nội bộ. Họ vừa biết tên ZERO.
Chương 2.5 // sắp đặt không gian
Nghệ thuật bố cục
Flexbox & Grid
레이아웃의 기술
— Trang có màu rồi. Nhưng mọi thứ chồng đống lên nhau như một mớ hỗn độn. —
ZERO thêm vài khối nội dung vào trang — một ô giới thiệu, ba ô dịch vụ, một ô liên hệ. Nhưng khi mở ra xem, cô tá hỏa: tất cả xếp chồng dọc thành một cột dài ngoằng, mỗi thứ một dòng, trông như danh sách mua hàng chứ không phải một trang web.
"Đây là nỗi đau đầu lớn nhất của mọi người mới: biết tô màu một cái hộp thì dễ, nhưng xếp hàng chục cái hộp cho gọn gàng mới là nghệ thuật thật sự. May cho em, có hai công cụ giải quyết 90% bài toán này — Flexbox và Grid."
Xếp theo MỘT chiều
Flexbox — hàng hoặc cột
Công cụ CSS giúp xếp các phần tử con thành một hàng (ngang) hoặc một cột (dọc), và căn chỉnh dễ dàng. Chỉ cần đặt display: flex cho phần tử cha là các con tự động xếp hàng.
display: flex; /* bật chế độ flex */
justify-content: center; /* căn giữa chiều ngang */
align-items: center; /* căn giữa chiều dọc */
gap: 16px; /* khoảng cách giữa các con */
}
justify-content căn theo chiều chính (ngang nếu xếp hàng); align-items căn theo chiều vuông góc. Nhớ mẹo: "justify = chính, align = phụ". Flexbox tuyệt cho thanh menu, hàng nút, căn giữa một thứ gì đó.
Xếp theo HAI chiều
Grid — lưới hàng và cột
Khi cần bố cục dạng lưới hai chiều (vừa hàng vừa cột) — như thư viện ảnh, bảng sản phẩm — Grid là công cụ mạnh nhất. Đặt display: grid và khai báo số cột.
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
gap: 12px;
}
Một chiều (một hàng nút, một thanh menu) → Flexbox. Hai chiều (lưới ảnh, dashboard) → Grid. Đơn vị 1fr nghĩa là "một phần bằng nhau" — repeat(3, 1fr) là ba cột chia đều.
☐ Tạo 3 khối <div> màu nền khác nhau
☐ Dùng Flexbox xếp chúng thành một hàng ngang, cách đều
☐ Thử đổi sang Grid 2 cột, quan sát sự khác biệt
☐ Thử justify-content các giá trị: center, space-between, flex-end
Chương 2.6 // một trang, mọi màn hình
Web cho điện thoại
Responsive
반응형 웹
— Trang đẹp trên máy tính. Rồi khách mở nó trên điện thoại. —
Trưởng nhóm đưa trang cho khách xem trên điện thoại. Vài giây sau, khách nhíu mày chụp màn hình gửi lại: chữ tràn ra ngoài, các cột chồng lên nhau, nút bấm bé tí không bấm trúng. "Sao trên máy tôi nó vỡ thế này?" Cả phòng quay sang ZERO.
"Đó là bài học mọi người mới đều phải học theo cách đau nhất — qua lời chê của khách. Hơn một nửa người dùng vào web bằng điện thoại. Trang web không sống trên một màn hình — nó phải sống trên mọi màn hình."
Một trang, mọi màn hình
Responsive là gì?
Cách làm trang web tự điều chỉnh bố cục cho vừa mọi kích thước màn hình — máy tính, máy tính bảng, điện thoại. Cùng một trang, nhưng "co giãn" thông minh để luôn dễ đọc, dễ dùng.
Vũ khí số 1 — Media Query (미디어 쿼리): viết CSS "có điều kiện theo kích thước màn hình". NẾU màn hình nhỏ hơn 768px (cỡ điện thoại), THÌ áp dụng các quy tắc này.
.danhsach { display: grid;
grid-template-columns: repeat(3, 1fr); }
/* Khi màn hình < 768px (điện thoại): 1 cột */
@media (max-width: 768px) {
.danhsach { grid-template-columns: 1fr; }
}
Đừng đặt kích thước cứng bằng px cho mọi thứ. Hãy nghĩ "co giãn": dùng %, max-width, để Flexbox/Grid tự sắp. Luôn có <meta name="viewport"> trong <head>, và img { max-width: 100%; } để ảnh không tràn.
☐ Mở trang "Về tôi" trên điện thoại (hoặc thu nhỏ cửa sổ trình duyệt)
☐ Thêm <meta name="viewport" content="width=device-width, initial-scale=1">
☐ Thêm một media query đổi bố cục khi màn hình nhỏ
☐ Đặt max-width: 100% cho mọi ảnh
Hết chương 02 // 09:48 sáng
Trang web giờ đã đẹp, co giãn gọn gàng trên mọi màn hình. Lần đầu tiên, ZERO thấy thứ mình làm ra trông như thật. Rồi tiền bối chỉ vào màn hình, giọng trầm xuống:
— ZERO bấm. Không có gì xảy ra. Trang đẹp — nhưng chết.
Một trang web không phản hồi thì cũng chỉ là một tấm ảnh đẹp. Và "A." thì không tấn công bằng ảnh — hắn tấn công bằng thứ biết hành động.
66:02:00 ▸ 62:12:00
Còn 62 giờ. Và trang web vẫn chưa biết "sống".
Thổi vào sự sống
Khi trang web bắt đầu biết suy nghĩ và phản hồi. Vũ khí thứ ba: JavaScript. 세 번째 무기 — 생명
ZERO đã đi được 2/7 chặng. Đừng dừng lại lúc này.
Còn 62 giờ.
Trang đã đẹp. Giờ phải làm nó "sống".
Bạn vừa đọc xong Chương 02. Vũ khí thứ ba — JavaScript — đang chờ ở Chương 03.
🤍 Cùng xuất bản ZERO — đặt trước giá sáng lập
Đọc online MIỄN PHÍ tất cả các chương (bản giản lược). Bản online FULL — đủ mọi chương & mọi phần chuyên sâu, không lược — chỉ 89k. Khi đủ 500 đơn, sách được in màu & xuất bản; chưa đủ → hoàn 100%.
89k / 229k · bản online FULL / bản in (giá sáng lập)
🎁 Bản in tặng kèm bản online FULL · 🏛️ tên "Nhà đồng sáng lập" in cuối sách · 🛡️ chưa đủ 500 thì hoàn 100%.
Cảm ơn bạn đã đọc đến đây 🤍 Hẹn gặp ZERO ở Chương 03.
