CSS Cơ Bản – Màu Sắc, Units và Typography

Màu sắc, đơn vị đo lường và kiểu chữ là nền tảng định hình phong cách và khả năng đọc của giao diện. Đây là nhóm kiến thức cơ bản nhưng có ảnh hưởng lớn trong thiết kế thực tế.

1. Nội dung chính

• Màu sắc trong CSS: tên màu, HEX, RGB, RGBA, HSL, HSLA
• Units: px, %, em, rem, vh, vw và vai trò của từng đơn vị
• Font & Typography: font-family, font-size, font-weight, line-height
• Định dạng văn bản: letter-spacing, word-spacing, text-align

2. Ví dụ

/* Màu sắc */
h1 { color: #3498db; }                   /* HEX */
p { color: rgba(255, 0, 0, 0.8); }       /* RGBA */

/* Units */
.container {
  width: 80%;
  font-size: 1rem;
  padding: 2vh;
}

/* Typography */
body {
  font-family: "Roboto", Arial, sans-serif;
  line-height: 1.6;
  text-align: justify;
}

/* Spacing */
p {
  letter-spacing: 0.5px;
  word-spacing: 2px;
}

Ví dụ so sánh các đơn vị

/* Đơn vị tuyệt đối */
.fixed-size {
  width: 200px;
  height: 100px;
}

/* Đơn vị tương đối */
.responsive {
  width: 50%;        /* % của phần tử cha */
  font-size: 2em;    /* gấp đôi font-size của phần tử cha */
  margin: 1rem;      /* dựa trên font-size của root */
}

/* Đơn vị viewport */
.viewport-based {
  width: 50vw;       /* 50% chiều rộng viewport */
  height: 100vh;     /* 100% chiều cao viewport */
}

3. Kiến thức trọng tâm

💡 GHI NHỚ: px là đơn vị tuyệt đối; em, rem, %, vh, vw là đơn vị tương đối giúp responsive tốt hơn

💡 GHI NHỚ: line-height lý tưởng từ 1.4–1.8 giúp văn bản dễ đọc

💡 GHI NHỚ: letter-spacing và word-spacing cải thiện khả năng đọc, đặc biệt với tiêu đề và đoạn dài

💡 GHI NHỚ: Sử dụng font-family theo hệ fallback đảm bảo hiển thị ổn định trên mọi thiết bị

4. Bài tập nhanh

1. Tạo một đoạn văn và thử áp dụng màu bằng HEX, RGB, HSL:

/* HEX */
.hex-color { color: #ff6b6b; }

/* RGB */
.rgb-color { color: rgb(255, 107, 107); }

/* HSL */
.hsl-color { color: hsl(0, 100%, 71%); }

2. So sánh sự khác biệt khi thay đổi font-size body và sử dụng em vs rem:

html {
  font-size: 16px;  /* 1rem = 16px */
}

.em-based {
  font-size: 1.5em;  /* 24px nếu phần tử cha có font-size 16px */
}

.rem-based {
  font-size: 1.5rem; /* Luôn là 24px dù phần tử cha có font-size bao nhiêu */
}

3. Định dạng một đoạn văn bản theo chuẩn typography: line-height 1.6, chữ căn đều, spacing hợp lý:

.article {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.3px;
  word-spacing: 1px;
  max-width: 600px;
}

5. Kết luận

Màu sắc, đơn vị đo lường và typography là nền móng của thiết kế giao diện. Việc nắm đúng nguyên tắc giúp xây dựng giao diện ổn định, đẹp mắt và dễ đọc.