Trong bài viết dưới đây Taimienphi.vn sẽ giới thiệu cho bạn các cú pháp cơ bản và Selector trong CSS. Ngoài ra nếu mới làm quen với CSS, bạn đọc có thể tham khảo thêm một số bài học CSS đã có trên Taimienphi.vn để tìm hiểu thêm thông tin chi tiết nhé.
Tìm hiểu cú pháp và Selector trong CSS
CSS Style Rules bao gồm selector, thuộc tính (property) và giá trị (value) của nó. Trong đó selector trỏ đến phần phần tử HTML, nơi áp dụng CSS Style. Thuộc tính CSS được phân tách bằng dấu chấm phẩy.
Cú pháp CSS có dạng như dưới đây:
selector {
// thuoc tinh CSS
}
Ví dụ:
Dưới đây là ví dụ minh họa cú pháp CSS:
Kết quả đầu ra có dạng: Taimienphi.vn.
2. Selector trong CSS
CSS Selector được sử dụng để chọn các phần tử HTML (HTML element) dựa trên tên phần tử (element name), id, thuộc tính, ... . Selector có thể chọn đồng thời một hoặc nhiều phần tử khác nhau.
3. Element selector
Element selector trong CSS được sử dụng để chọn các phần tử HTML được yêu cầu tạo kiểu. Trong khai báo selector bao gồm tên của phần tử HTML và các thuộc tính CSS được áp dụng cho phần tử đó và được đặt trong dấu {}.
- Cú pháp Element selector:
Cú pháp Element selector có dạng như dưới đây:
ten phan tu {
// thuoc tinh CSS
}
- Ví dụ:
Kết quả đầu ra có dạng: Taimienphi.vn.
id selector
id selector được sử dụng để thiết lập kiểu cho id đã cho. Thuộc tính id là định danh duy nhất trong tài liệu HTML. id selector được sử dụng cùng ký tự #.
- Cú pháp id selector:
#id_name {
// thuoc tinh CSS
}
- Ví dụ:
Kết quả đầu ra có dạng: Taimienphi.vn.
4. Class selector
Class selector được sử dụng để chọn tất cả các phần tử trong thuộc tính lớp cụ thể. Để chọn các phần tử trong một lớp cụ thể, chúng ta sử dụng ký tự (.) cùng tên đầy đủ của một lớp (class name). Tên đầy đủ của lớp được sử dụng để thiết lập thuộc tính CSS cho lớp đã cho.
- Cú pháp Class selector:
.ten lop {
// thuoc tinh CSS
}
- Ví dụ:
Dưới đây là ví dụ về Class selector:
Kết quả đầu ra có dạng: Taimienphi.vn.
Bài viết trên đây bạn đọc đã cùng Taimienphi.vn tìm hiểu về cú pháp và Selector trong CSS. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết.
Trong các bài học CSS tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách nhúng CSS vào HTML nhé.