Bài 4. CSS cơ bản và bộ chọn

Khái niệm và lý thuyết

CSS (Cascading Style Sheets) gồm các quy tắc: bộ chọn nói "áp dụng cho phần tử nào", khối khai báo nói "áp dụng kiểu gì". Chữ Cascading (xếp tầng) nghĩa là khi nhiều quy tắc cùng áp vào một phần tử, trình duyệt quyết định theo ba tiêu chí: độ ưu tiên nguồn, độ đặc hiệu (specificity) của bộ chọn, và thứ tự (quy tắc sau thắng quy tắc trước). Độ đặc hiệu tăng dần: thẻ < class < id < kiểu viết trực tiếp.

Thừa kế: một số thuộc tính (màu chữ, phông, cỡ chữ) tự truyền xuống phần tử con; thuộc tính khác (viền, nền, lề) thì không.

Hộp mô hình: mọi phần tử là một hộp, từ trong ra ngoài gồm nội dung, padding (đệm), border (viền), margin (lề ngoài). Với box-sizing: content-box (mặc định) chiều rộng chỉ tính phần nội dung nên cộng thêm đệm và viền sẽ rộng hơn; border-box tính cả đệm và viền, dễ kiểm soát hơn nhiều. Lề dọc giữa hai khối kề nhau còn có thể gộp lại (margin collapsing).

Cách gắn CSS

<link rel="stylesheet" href="/style.css">   <!-- nên dùng -->
<style> p { color: red; } </style>           <!-- nhúng trong trang -->
<p style="color:red">...</p>                 <!-- tránh dùng -->

Các loại bộ chọn

p { }                    /* theo thẻ */
.card { }                /* theo lớp (class) */
#logo { }                /* theo id, duy nhất */
nav a { }                /* con cháu */
ul > li { }              /* con trực tiếp */
a:hover { }              /* giả lớp: khi rê chuột */
li:nth-child(2n) { }     /* hàng chẵn */
input[type="email"] { }  /* theo thuộc tính */

Hộp mô hình

*, *::before, *::after { box-sizing: border-box; }
.card {
  width: 300px;
  padding: 16px;          /* khoảng đệm trong */
  border: 1px solid #ccc;
  margin: 0 auto 24px;    /* khoảng cách ngoài, auto để căn giữa */
  border-radius: 12px;
}

Với box-sizing: border-box, chiều rộng đã gồm padding và border, tính toán dễ hơn nhiều.

Màu, chữ, nền

body {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #263238;
  background: #f5f7fa;
}
h1 { font-size: 2.2rem; letter-spacing: -.5px; }
.btn { background: linear-gradient(135deg, #43a047, #1b5e20); color: #fff; }

Đơn vị nên dùng: rem cho chữ và khoảng cách, %/fr cho chiều rộng, px cho đường viền nhỏ.

.btn {
  display: inline-block;
  padding: 10px 22px;
  background: #2e7d32;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }