1. Tổng quan về CSS
CSS (Cascading Style Sheets) là ngôn ngữ định dạng chuẩn dùng để kiểm soát giao diện, bố cục và trải nghiệm trực quan của tài liệu HTML. Trong khi HTML chịu trách nhiệm xây dựng cấu trúc ngữ nghĩa, CSS sẽ xử lý phần trình bày như màu sắc, khoảng cách, phông chữ và hiệu ứng.
Vị trí khai báo chuẩn: Đặt nội dung CSS bên trong cặp thẻ <style>, thường nằm ngay dưới thẻ <meta> hoặc <title> trong khối <head>.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Học CSS</title>
<style>
.main-heading {
color: #e74c3c;
}
</style>
</head>
<body>
<h1 class="main-heading">Chào mừng</h1>
</body>
</html>2. Các phương thức tích hợp CSS
- Internal (Nội bộ): Nhúng trực tiếp vào tài liệu HTML qua thẻ
<style>. Phù hợp cho trang đơn hoặc mẫu thử nghiệm. - External (Ngoại bộ): Tách biệt file
.css, sau đó trỏ đến bằng thẻ<link rel="stylesheet">. Đây là phương pháp tối ưu, dễ bảo trì cho dự án lớn. - Inline (Trực tiếp): Gán thuộc tính
stylengay trên thẻ HTML. Thường dùng để override nhanh hoặc kết hợp với JavaScript DOM manipulation.
<head>
<!-- External CSS -->
<link rel="stylesheet" href="assets/styles.css">
<!-- Internal CSS -->
<style>
body { background: #f4f4f4; }
</style>
</head>
<body>
<!-- Inline CSS -->
<p style="color: #333;">Văn bản được định dạng trực tiếp</p>
</body>3. Hệ thống Bộ chọn (Selectors)
Bộ chọn giúp xác định chính xác phần tử HTML cần áp dụng quy tắc định dạng.
3.1 Bộ chọn theo thẻ (Tag/Element Selector)
Chọn tất cả phần tử cùng tên trong DOM. Phù hợp để đặt thuộc tính mặc định chung, nhưng không thể phân biệt các phần tử riêng lẻ.
Ví dụ: h1, p, div, img { margin: 0; }
3.2 Bộ chọn lớp (Class Selector)
Sử dụng dấu chấm . kết hợp với tên tùy biến. Đây là lựa chọn linh hoạt nhất trong phát triển thực tế.
- Cú pháp CSS:
.ten-lop { ... } - Cú pháp HTML:
<thẻ class="ten-lop"> - Hỗ trợ gán nhiều class cách nhau bằng dấu cách trên cùng một phần tử.
- Quy ước đặt tên: Sử dụng chữ thường và dấu gạch nối (kebab-case), ví dụ:
header-navhoặccard-content. Tránh dùng số hoặc tiếng Việt không dấu.
<style>
.highlight { color: #2980b9; font-weight: 500; }
.text-block { line-height: 1.6; }
</style>
<div class="highlight text-block">
Nội dung được kết hợp nhiều quy tắc.
</div>3.3 Bộ chọn định danh (ID Selector)
Dùng dấu thăng #. Mỗi ID phải đảm bảo tính duy nhất tuyệt đối trong toàn trang.
Trong thực tế, ID thường được ưu tiên cho việc binding sự kiện JavaScript hoặc neo kết nội bộ hơn là làm công cụ styling chính.
<style>
#primary-container { padding: 20px; }
</style>
<div id="primary-container"> Khu vực nội dung chính </div>3.4 Bộ chọn toàn cục (Universal Selector)
Biểu tượng * đại diện cho mọi phần tử. Rất hữu ích khi viết CSS Reset để loại bỏ margin/padding mặc định của trình duyệt.
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
</style>4. Thuộc tính kích thước & Màu nền
| Thuộc tính | Mô tả |
|---|---|
width | Độ rộng của khối |
height | Độ cao của khối |
background-color | Màu nền hiển thị |
5. Điều khiển Typo & Văn bản
5.1 Kích thước & Dáng chữ
font-size: Xác định chiều cao ký tự, đơn vị chuẩn trên web là px.
font-style: Chuyển đổi dáng chữ giữa normal (đứng) và italic (nghiêng).
5.2 Khoảng cách dòng & Căn giữa dọc
line-height: Điều chỉnh khoảng cách giữa các hàng văn bản. Giá trị có thể là pixel tuyệt đối hoặc số tương đối (bội số của font-size).
Mẹo căn chỉnh dọc 1 dòng: Gán giá trị line-height bằng chính giá trị height của thẻ chứa, văn bản sẽ tự động căn giữa trục tung.
5.3 Bộ phông chữ & Tính toán shorthand
font-family: Chỉ định bộ font. Nên luôn cung cấp font thay thế (fallback) như sans-serif.
font: Thuộc tính rút gọn. Cú pháp bắt buộc: font-style font-weight font-size/line-height font-family. Lưu ý font-size và font-family là bắt buộc nếu không trình duyệt sẽ bỏ qua toàn bộ dòng code.
5.4 Thụt lề & Căn chỉnh ngang
text-indent: Thụt dòng đầu tiên. Khuyến nghị dùng đơn vị em (1em = kích thước font hiện tại) để đảm bảo tỷ lệ co giãn.
text-align: Quản lý căn chỉnh nội dung theo trục ngang (left, center, right, justify). Thuộc tính này phải được khai báo trên thẻ cha chứa nội dung.
5.5 Đường gạch & Màu sắc
text-decoration: Thêm hiệu ứng gạch cho văn bản. Các giá trị phổ biến: none, underline, line-through, overline.
color: Định nghĩa màu chữ. Có 4 cách biểu diễn chính:
- Tên màu: red, blue (ít dùng trong production).
- RGB: rgb(r, g, b) giá trị 0-255.
- RGBA: Thêm kênh alpha rgba(r, g, b, a) để tạo độ trong suốt.
- Hexadecimal: #RRGGBB hoặc rút gọn #RGB, phổ biến nhất khi làm việc với thiết kế UI.
5.6 Độ đậm chữ
font-weight: Kiểm soát độ dày nét vẽ. Nhận giá trị từ khóa normal (400), bold (700), hoặc dải số liên tục từ 100 đến 900 để tùy chỉnh chi tiết.