CSS Cơ Bản – Khái niệm, Cách Hoạt Động và Các Selectors

Bài 1 – Khái niệm CSS, cách hoạt động, cách nhúng và hệ thống selector cơ bản.

21/11/2025 DaiPhan
Bài 1 / 6

CSS Cơ Bản – Khái niệm, Vai Trò và Cách Hoạt Động

CSS là nền tảng quan trọng quyết định giao diện của website. Bài học này giúp học viên nắm tổng quan cách CSS được áp dụng và cách sử dụng những thành phần cơ bản nhất.

1. Nội dung chính

  • Khái niệm CSS, vai trò và cách hoạt động
  • Cách nhúng CSS vào HTML: Inline, Internal, External
  • Cú pháp CSS và cấu trúc quy tắc: Selector – Property – Value
  • Selectors cơ bản: Tag, Class, ID, Universal
  • Selectors nâng cao: Attribute, Pseudo-class, Pseudo-element
  • Độ ưu tiên trong CSS (Specificity) và Cascade

2. Ví dụ

/* Ví dụ sử dụng nhiều loại selector */
h1 { color: blue; }              /* Tag Selector */
.title { font-size: 20px; }      /* Class Selector */
#main { padding: 10px; }         /* ID Selector */
[type="text"] { border: 1px solid #333; }  /* Attribute Selector */
a:hover { color: red; }          /* Pseudo-class */
p::first-line { font-weight: bold; } /* Pseudo-element */

Ví dụ HTML với CSS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    body { font-family: Arial; }
  </style>
</head>
<body>
  <h1 style="color: blue;">Tiêu đề</h1>
  <p class="title">Nội dung</p>
</body>
</html>

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

💡 GHI NHỚ: CSS điều khiển phần giao diện và được áp dụng theo ba cách: inline, internal và external

💡 GHI NHỚ: Selectors xác định phần tử cần tác động; độ ưu tiên xác định quy tắc nào được áp dụng cuối cùng

💡 GHI NHỚ: Cascade và Specificity quyết định hành vi cuối cùng khi các quy tắc xung đột

4. Bài tập nhanh

  1. Viết 1 file HTML, áp dụng CSS bằng cả 3 cách (inline, internal, external)

  2. Sử dụng 4 loại selectors cơ bản (tag, class, id, universal) để định dạng các thẻ khác nhau:

/* Universal selector */
* { margin: 0; padding: 0; }

/* Tag selector */
p { color: red; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#header { font-size: 24px; }
  1. Tạo một link <a> và áp dụng pseudo-class :hover đổi màu khi rê chuột:
a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

5. Kết luận

Bài học này tạo nền tảng để hiểu cách CSS vận hành, cách nhúng, cú pháp và các loại selector. Đây là bước nền để tiếp tục với Box Model và các kỹ thuật layout hiện đại.