CSS là ngôn ngữ dùng để định nghĩa nên các bảng kiểu (style sheet). Mỗi bảng kiểu sẽ bao gồm một tập hợp các quy tắc CSS, để định nghĩa style cho các phần tử của trang.
Cú pháp của quy tắc CSS (CSS Rule)
Mỗi CSS rule sẽ bao gồm một số các cặp khai báo (declaration). Mỗi declaration sẽ là một khai báo một thuộc tính CSS, để áp dụng cho một selector (bộ chọn).
Selector: Là một thuật ngữ dùng để đại diện cho một hoặc một số phần tử trong trang web mà ta đang định nghĩa style.
Ta khai báo các thuộc tính của CSS theo các selector.
Có những loại selector sau
1) Type selector (element selector)
Là loại bộ chọn trong đó tên bộ chọn chính là tên phần tử HTML. Loại selector này được sử dụng khi ta muốn định nghĩa style cho các phần tử HTML của trang.
2) ID selector
Là loại bộ chọn được dùng để định nghĩa style cho phần tử theo thuộc tính id. Bộ chọn này được dùng khi ta muốn định nghĩa style cho một phần tử duy nhất trong trang. Tên của ID selector bắt đầu bằng dấu #.
3) Class selector
Là loại bộ chọn được dùng để định nghĩa style cho một số phần tử của trang có cùng class. Bộ chọn này được dùng với thuộc tính class của phần tử. Tên của class selector bắt đầu bằng dấu chấm .
4) Universal selector
Là loại bộ chọn được dùng để định nghĩa style mặc định cho tất cả các phần tử của trang. Loại bộ chọn này được định nghĩa qua dấu *.
Phần 1: Định nghĩa id selector
Tạo một trang web, sau đó định nghĩa style và
id selector. Ở trong trang web này, ta đã định nghĩa style cho các phần tử <p> của trang, đồng thời định nghĩa style cho một phần tử
p có
id là
pname. Để áp dụng id selector cho phần tử của trang, ta sử dụng thuộc tính id của phần tử.
Ví dụ:
Ta có thể thấy phần tử p được định nghĩa id selector đã có màu xanh, khác với các phần tử p khác như hình kết quả bên dưới.
Kết quả:
Phần II: Sử dụng class selector
Tạo một trang web, sau đó ta định nghĩa class selector để tạo style cho các phần tử theo thuộc tính class. Ta có thể thấy style của các phần tử này đã hiển thị khác so với style của trang.
Ví dụ:
Kết quả:
Phần III: Định nghĩa universal selector
Tạo mới một trang web, sau đó ta định nghĩa universal selector để thiết lập style mặc định cho các phần tử của trang web.
Ví dụ:
Ta có thể thấy các phần tử đã có style mặc định như ta đã định nghĩa ở trên.
Kết quả:
Phần IV: Định nghĩa type selector
Để định nghĩa type selector, ta cần chỉ ra tên phần tử cần định nghĩa, sau đó viết style cho các phần tử. Ở hình bên dưới, ta đã định nghĩa style cho phần tử H2 của trang. Khi ta áp dụng quy tắc CSS này, tất cả các phần tử <h2> của trang sẽ được áp dụng quy tắc này.
Ví dụ:
Như vậy và chúng ta đã tìm hiểu về 4 loại selector cơ bản là Type selector, ID selector, Class selector và Universal selector. Tuy nhiên, còn có rất nhiều loại Selector khác hỗ trợ cho việc chọn đúng phần tử HTML mà bạn muốn style cho nó, bạn có thể tìm hiểu thêm trên các trang web hướng dẫn lập trình.
Một số địa chỉ học CSS Selector nâng cao
1. https://www.w3schools.com/cssref/css_selectors.asp
2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
3. http://htmldog.com/references/css/selectors/
4. https://css-tricks.com/almanac/selectors/
....v.v
Bạn cũng có thể học CSS Selector thông qua 32 level trò chơi thú vị tại đây: https://flukeout.github.io
Chúc bạn học tập vui vẻ và nhanh trở thành Master CSS Selector.
Nguyễn Hùng Cường