Buzz
Dưới đây, Mytour sẽ giới thiệu các cú pháp cơ bản và Selector trong CSS. Nếu bạn mới làm quen với CSS, hãy tham khảo thêm một số bài học CSS khác trên Mytour để hiểu rõ hơn nhé.
Khám phá Cú pháp và Selector trong CSS
1. Cú pháp CSS
Trong CSS, các Style Rules bao gồm selector, thuộc tính (property), và giá trị (value). Selector định rõ phần tử HTML mà chúng ta muốn áp dụng CSS Style. Các thuộc tính CSS được phân tách bằng dấu chấm phẩy.
Cú pháp CSS thường có dạng như sau:
selector {
// Thuộc tính CSS
}
Ví dụ:
Dưới đây là một ví dụ minh họa về cú pháp CSS:
Kết quả xuất hiện như sau: Mytour.
2. Selector trong CSS
Để xác định phần tử HTML, id, hoặc thuộc tính khác, CSS Selector được sử dụng. Selector có khả năng chọn một hoặc nhiều phần tử khác nhau cùng một lúc.
3. Selector phần tử
Selector phần tử trong CSS được dùng để chọn các phần tử HTML để áp dụng kiểu. Trong định nghĩa selector, chúng ta chỉ cần tên của phần tử HTML và các thuộc tính CSS sẽ được đặt trong dấu ngoặc nhọn {}.
- Cú pháp của Selector phần tử:
Dạng cú pháp của Selector phần tử như sau:
tên phần tử {
// thuộc tính CSS
}
- Ví dụ minh họa:
Kết quả hiển thị sẽ là: Mytour.
Id Selector
Id selector được dùng để đặt kiểu cho một định danh duy nhất trong HTML. Thuộc tính id đại diện cho một duy nhất và độc nhất trong tài liệu.
- Cú pháp id selector:
#id_ten {
// Thuộc tính CSS
}
- Ví dụ:
Kết quả cuối cùng sẽ hiển thị: Mytour.
4. Selector lớp (Class)
Selector lớp được sử dụng để lựa chọn tất cả các phần tử thuộc một lớp cụ thể. Để chọn các phần tử trong một lớp nhất định, chúng ta sử dụng ký tự (.) kèm theo tên đầy đủ của lớp (class name). Tên đầy đủ của lớp được sử dụng để thiết lập các thuộc tính CSS cho lớp đó.
- Cú pháp Selector lớp (Class):
.ten-lop {
// Thuộc tính CSS
}
- Ví dụ:
Dưới đây là một minh họa về Selector lớp (Class):
Kết quả cuối cùng sẽ là: Mytour.
Trong bài viết này, chúng ta đã cùng Mytour khám phá cú pháp và Selector trong CSS. Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, đừng ngần ngại để lại ý kiến trong phần bình luận dưới bài viết.
Trong những bài học CSS tiếp theo, Mytour sẽ hướng dẫn cách nhúng CSS vào HTML.
