Frontend Hub/CSS Course
Bài học: Cú pháp CSS và Selectors

Course Content

CSS Fundamentals

Layout Cơ Bản

CSS Syntax & Selectors

Cú pháp CSS và Selectors

Học chi tiết về cú pháp CSS và các loại selectors với ví dụ minh họa trực quan

Cú pháp CSS cơ bản

CSS rule bao gồm selector và declaration block. Declaration block chứa các cặp property-value được phân tách bởi dấu chấm phẩy.

selector { property: value; property: value; /* comment */ }

📝 Các thành phần:

  • Selector: Chọn phần tử HTML
  • Property: Thuộc tính muốn thay đổi
  • Value: Giá trị của thuộc tính
  • Declaration: Cặp property: value

✅ Quy tắc:

  • Kết thúc mỗi declaration bằng ;
  • Bao declaration block bằng {}
  • Comments: /* nội dung */
  • Phân biệt hoa thường với values

Ví dụ cú pháp cơ bản

h1 {
  color: blue;
  font-size: 28px;
  margin: 20px 0;
}

🎯 Tóm tắt CSS Selectors

Basic Selectors

Element, Class, ID, Attribute

Pseudo-classes

:hover, :focus, :nth-child

Pseudo-elements

::before, ::after, ::first-letter

Combinators

Space, >, +, ~

Hiểu rõ các selector giúp bạn viết CSS hiệu quả và dễ bảo trì hơn! 🚀