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

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); }