Hiểu cú pháp và ba cách thêm CSS vào HTML; phân biệt selector với kế thừa, kiểm tra stylesheet, focus bàn phím, tương phản màu và kiểu print trong lab.
Trang hướng dẫn DEMO đã có heading, paragraph và liên kết đúng ý nghĩa. Bước tiếp theo là giúp người đọc theo dõi dễ hơn bằng khoảng cách, màu và chữ. Nếu sửa một màu mà không thấy thay đổi, ta cần kiểm tra stylesheet có tải, selector có khớp và khai báo có hiệu lực không. Thêm nhiều dòng CSS khi chưa trả lời ba câu hỏi đó thường làm việc chẩn đoán khó hơn.
Bài thuộc 033.1, dựa trên khung PDF 030-100-vi, trang in 143–156, tương ứng trang vật lý 151–164. Bạn cần biết cấu trúc HTML và URL tương đối. Sau bài, bạn nên đọc được một quy tắc CSS, áp dụng ba cách kết nối với HTML, thêm comment và kiểm tra một số điều kiện hiển thị có ích cho người dùng.
Nguồn được đối chiếu ngày 23/10/2026. Nội dung và lab được viết mới. Chromium 151.0.7922.34 dùng trong kiểm chứng cục bộ; chế độ print chỉ là mô phỏng media bằng browser, chưa phải bản in từ máy in thật. Bài tiếp theo sẽ đi sâu vào selector và cách các quy tắc cạnh tranh.
Cú pháp CSS phân biệt selector với khối khai báo. Trong ví dụ sau, .note chọn phần tử có lớp note; color là property và #213641 là value. Mỗi cặp property/value là một declaration:
.note {
color: #213641;
background-color: #eef4f2;
}
Dấu hai chấm nối property với value, dấu chấm phẩy ngăn khai báo, còn ngoặc nhọn bao khối. Giữ dấu chấm phẩy cả sau khai báo cuối giúp tránh lỗi khi thêm dòng. Trong attribute style, bạn viết danh sách khai báo, không thêm selector và ngoặc nhọn như một quy tắc đầy đủ.
Khi gặp property hoặc value không hợp lệ, browser có quy tắc xử lý lỗi; một khai báo bị bỏ qua không nhất thiết làm cả stylesheet biến mất. Nhưng thiếu dấu đóng hoặc comment không kết thúc có thể ảnh hưởng nhiều phần phía sau. Dùng editor để phát hiện sớm rồi xem DevTools xác nhận phần được áp dụng.
Inline style nằm trên một phần tử, ví dụ <p style="color:#136778">. Nó tiện cho một thí nghiệm nhỏ nhưng nếu sao chép vào nhiều chỗ sẽ khó sửa đồng bộ. Việc inline đang thắng một quy tắc khác cũng không phải lý do để viết mọi thứ bằng style attribute.
Style nội bộ đặt trong phần tử style, thường ở head của một tài liệu. Nó phù hợp với ví dụ độc lập hoặc trang có nhu cầu riêng. Nội dung bên trong là CSS, không đặt thêm thẻ HTML để tạo paragraph trong stylesheet.
Tệp bên ngoài được nối qua link với rel stylesheet và href. Href chỉ URL tệp CSS; không dùng src cho cách liên kết này. Tệp .css chứa các quy tắc, không cần skeleton html, head hoặc style bao bên ngoài.
Trong HTML hiện hành, CSS là kiểu mặc định cho các trường hợp này nên không cần lặp type="text/css" ở ví dụ thông thường. Đừng nhầm attribute type tùy chọn với HTTP Content-Type của tài nguyên khi server phục vụ file. Một đường dẫn CSS trả trang lỗi HTML vẫn có thể làm browser từ chối sử dụng stylesheet.
Một quy tắc chọn body khớp body. Một số giá trị, như màu chữ, có thể được truyền xuống theo cơ chế kế thừa CSS. Điều đó khác với việc selector body đã chọn từng paragraph, span và liên kết bên trong.
Nhiều property không kế thừa mặc định. Trong lab, body có border nhưng paragraph con không tự có border giống vậy. Nếu hiểu nhầm mọi giá trị đều truyền xuống, bạn dễ viết quy tắc “hủy” những thứ thực ra chưa từng được áp dụng cho con.
Một phần tử còn có thể chịu quy tắc riêng hoặc kiểu mặc định của browser. Hãy xem computed style khi muốn biết kết quả cuối và bảng Styles khi muốn biết nguồn tạo nó. Màu trong computed style có thể được biểu diễn bằng RGB dù mã gốc viết dạng hex; đó chưa phải dấu hiệu browser đổi màu sai.
Cascade cân nhắc nhiều yếu tố, không chỉ “dòng cuối thắng” hay “inline luôn mạnh nhất trong mọi tình huống”. Ở bài này giữ ví dụ ít xung đột để làm rõ nơi đặt quy tắc. Bài 033.2 sẽ kiểm tra điều kiện ưu tiên cụ thể.
Comment CSS dùng /* ... */, không phải cú pháp // của nhiều ngôn ngữ lập trình. Bạn có thể tạm bao một khai báo trong comment để quan sát khác biệt. Sau thử nghiệm, trả về bản đã hiểu rõ và ghi lý do nếu thay đổi cần được giữ.
Không lồng comment vào nhau hoặc để thiếu dấu kết thúc. Những đoạn ghi chú tốt thường giải thích vì sao chọn một quy tắc, chẳng hạn giữ focus rõ trên nền sáng; không cần nhắc lại từng property bằng câu dài. Comment được phục vụ cùng file CSS vẫn có thể được đọc, nên không đặt token hoặc ghi chú riêng tư trong đó.
WCAG về tương phản tối thiểu có ngưỡng 4.5:1 cho phần lớn văn bản thông thường, 3:1 cho chữ lớn theo định nghĩa của tiêu chí và các ngoại lệ cụ thể. Không chỉ chọn màu vì nhìn hợp trên màn hình của người viết.
Cần đo đúng cặp màu và bối cảnh: nền trong suốt, ảnh nền hoặc trạng thái khác có thể làm phép tính đơn giản không còn đủ. Lab chỉ tính một số màu đặc được biết rõ; đạt tỷ lệ cho một paragraph không chứng minh mọi trạng thái của trang đã đạt.
Focus visible giúp người dùng bàn phím biết đang ở đâu. Đừng xóa outline chỉ vì vòng focus không giống thiết kế. Mẫu dùng focus-visible để thêm chỉ báo rõ, nhưng vẫn cần thử hành vi thực tế thay vì coi tên pseudo-class là bằng chứng hoàn thành khả năng tiếp cận.
Đừng dùng màu làm dấu hiệu duy nhất cho thông báo quan trọng. Giữ chữ cảnh báo và cấu trúc HTML đúng; khi stylesheet bị lỗi, nội dung chính vẫn nên đọc và thao tác được. CSS thay trình bày không tự tạo nhãn cho input hay heading ngữ nghĩa cho một div.
At-rule media cho phép chọn quy tắc theo loại phương tiện hoặc đặc điểm môi trường. Trong lab, print dùng đường viền nét đứt và nền trắng để thấy sự khác biệt so với màn hình. Đây là một ví dụ nhỏ, chưa phải stylesheet in hoàn chỉnh.
Một điều kiện media không đảm bảo browser hoặc công nghệ hỗ trợ áp dụng mọi tính năng theo cùng cách. Đặc biệt, không suy rằng ghi media="speech" là đủ để mọi trình đọc màn hình chỉ dùng stylesheet đó. Trước mắt hãy kiểm tra screen và print trong môi trường được ghi rõ.
Tạo index.html cùng thư mục với style.css, lưu bằng UTF-8. Nội dung HTML:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS cơ bản | Lab LPI</title>
<link rel="stylesheet" href="style.css">
<style>.internal { color: #136778; }</style>
</head>
<body>
<main>
<h1>Trang hướng dẫn DEMO</h1>
<p id="inherited">Màu từ body: <span>nội dung DEMO</span>.</p>
<p id="inline" style="color:#136778">Dòng dùng inline style.</p>
<p id="internal" class="internal">Dòng dùng style nội bộ.</p>
<p id="external" class="external">Dòng dùng tệp bên ngoài.</p>
<p id="note" class="note">Lưu ý DEMO: chỉ kiểm tra trong phạm vi lab.</p>
<a href="#finish" id="link">Tới phần hoàn tất</a>
<h2 id="finish">Hoàn tất kiểm tra</h2>
</main>
</body>
</html>
Tệp CSS bên ngoài:
/* Màu nền đặc để đối chiếu tương phản trong fixture. */
body {
color: #213641;
background-color: #ffffff;
font: 1rem/1.6 Arial, sans-serif;
margin: 1rem;
border: 4px solid #136778;
}
.external { color: #136778; }
.note {
background-color: #eef4f2;
padding: 1rem;
border: 2px solid #136778;
}
a:focus-visible {
outline: 3px solid #b45309;
outline-offset: 3px;
}
@media print {
.note {
background-color: #ffffff;
border: 1px dashed #000000;
}
}
Mở trang qua server loopback và xác nhận request style.css trả CSS. Ba paragraph inline, internal và external phải có cùng màu computed rgb(19, 103, 120). Paragraph inherited có màu như body, nhưng border của nó là 0px dù body có border 4px. Đây là hai hành vi khác nhau của kế thừa.
Dùng Tab tới liên kết, mong đợi outline rõ trong trạng thái focus bàn phím. Chuyển DevTools sang mô phỏng print rồi đối chiếu note: nền trắng, border 1px dashed. Không gửi lệnh in tới máy in văn phòng để thử bài này.
Trên một bản sao HTML, đổi href thành missing.css. Mong đợi request thất bại và phần kiểu từ file ngoài không còn áp dụng, trong khi style nội bộ và inline vẫn còn. Nội dung cùng các heading vẫn đọc được. Khôi phục href đúng trước khi kết thúc; không sửa bằng cách chèn ngẫu nhiên nhiều inline style.
Kiểm chứng Chromium đã xác nhận ba màu computed bằng nhau, màu inherited, border không kế thừa, outline khi Tab và quy tắc print. Biến thể đường dẫn hỏng trả 404 và không có kiểu external dự kiến. Harness tính tương phản màu chữ body với nền trắng theo công thức luminance sRGB, vượt 4.5:1 trong cặp màu đó.
Lab dùng context riêng, tài nguyên cục bộ và chặn request ngoài origin. Nó chưa kiểm tra tất cả cặp màu, zoom, forced colors, trình đọc màn hình, mọi browser hoặc máy in. Các hình minh họa không phải ảnh bằng chứng của một kiểm định accessibility.
Bạn đạt mục tiêu khi chỉ ra selector và declaration trong một quy tắc, viết link đúng bằng href, giải thích comment và phân biệt kế thừa với chọn phần tử con. Với một kiểu chưa xuất hiện, hãy nêu bằng chứng cần xem trước khi thêm quy tắc khác: request CSS, selector khớp hay khai báo có hiệu lực.
Giữ hai tệp lab và kết quả đã ghi. Ở bài tiếp theo, ta sẽ tạo các xung đột nhỏ có chủ đích để hiểu selector, quan hệ phần tử và cách cascade chọn giá trị, thay vì tăng độ phức tạp của cả trang cùng lúc.
Tạo bảng SQLite, hiểu khóa chính và CHECK, dùng CRUD có WHERE và bind tham số từ Node.js; kiểm tra transaction rollback, mở lại dữ liệu và API driver.
Tạo route Express, phục vụ CSS và render EJS; đọc query, params, body, kiểm tra dữ liệu form, escape HTML và phân biệt XSS với CSRF qua lab loopback.
Chạy Node.js LTS, phân biệt ES module và CommonJS, package.json và lockfile; cài package DEMO cục bộ, dùng npm ci và kiểm tra server HTTP trên loopback.
Chọn node DOM, phân biệt collection sống và tĩnh, textContent và innerHTML; cập nhật class, thuộc tính và sự kiện nút bằng chuột, bàn phím trong lab DEMO.