Nội dung chính
Vùng chọn trong CSS đóng vai trò rất quan trọng khi định dạng CSS, trong bài này chúng ta sẽ cùng tìm hiểu các vùng chọn CSS thông dụng được dùng phổ biến nhất trong các trang web hiện nay. Trước khi đi vào bài này thì bạn nên xem qua bài cách viết CSS trong trang web đã nhé.
1. Selector là gì?
Selector còn được hiểu là vùng chọn do người dùng chọn nhằm mục đích định dạng CSS cho vùng đó. Khi chọn đúng vùng cần định dạng thì CSS mới có hiệu lực cho vùng đó, ngược lại nếu bạn chọn sai thì sẽ không có kết quả gì.
Ví dụ : Nếu bạn muốn định dạng nền màu đỏ cho thẻ p thì vùng chọn sẽ là p
[html] p {background: red;
}
[/html]
2. Các vùng chọn CSS thông dụng
Có 5 vùng chọn CSS thông dụng sau:
- Vùng chọn dựa vào tên thẻ
- Vùng chọn dựa vào id
- Vùng chọn dựa vào class
- Vùng chọn phân cấp
- Vùng chọn tất cả
Vùng chọn dựa vào tên thẻ
Nghĩa là bạn sẽ định dạng vùng chọn dựa vào tên các thẻ HTM trong trang web của bạn.
Ví dụ : Định dạng thẻ h1 thì vùng chọn sẽ là h1 như sau:
[html] h1 {background: red;
color: blue;
}
[/html]
Đây là kiểu định dạng đơn giản, nhưng được khuyên không nên sử dụng nhiều bởi dĩ nhiên khi bạn định dạng như trên thì tất cả các thẻ h1 trong trang web sẽ chuyển thành định dạng như vậy. Ví dụ trong trang web có 100 thẻ h1 thì tất cả 100 thẻ đó đều cùng 1 màu sắc như trên.
Vùng chọn dựa vào id
Khi nhắc đến id nghĩa là chỉ có duy nhất mà không có trùng lặp. Nếu bạn cố tình cho nhiều tên id giống nhau thì code vẫn chạy bình thường nhưng khi đến lập trình bên phía server thì sẽ bị lỗi. Vì vậy không nên dùng nhiều tên id giống nhau. Sử dụng id bạn sẽ định dạng được các thẻ theo ý riêng của mình.
Ví dụ: Định dạng thẻ h1 dựa vào id=”nenvang” thì đoạn code của thẻ h1 sẽ như sau:
[html]<h1 id="nenvang"> Học lập trình web </h1>
[/html]Code định dạng css như sau:
[html] #nenvang {background: yellow;
color: blue;
}
[/html]
Nhìn vào cú pháp bạn sẽ thấy : Để định dạng vùng theo id thì sử dụng cú pháp #nameID trong đó nameID là tên id bạn đặt trong thẻ cần định dạng và trước tên id sẽ là dấu #, khi chạy chương trình thì chỉ có các thẻ h1 có id=”nenvang” mới chịu tác động còn các thẻ h1 khác sẽ không chịu tác động. Đây là một cách được sử dụng rất nhiều hiện nay.
Vùng chọn dựa vào class
Vùng chọn dựa vào class khá giống với vùng chọn id chỉ khác đó là tên class có thể nhiều tên giống nhau và thay vì sử dụng dấu # trước tên class thì chúng ta sẽ sử dụng dấu chấm. Ngay sau dấu chấm sẽ là tên class
Ví dụ: Định dạng thẻ h2 dựa vào class=”nenxanh” thì đoạn code của thẻ h2 sẽ như sau:
[html]<h2 class="nenxanh"> Học css căn bản </h2>
[/html]Code định dạng css như sau:
[html] .nenxanh {background: blue;
color: red;
}
[/html]
Như vậy chỉ có các thẻ h2 mà có class =”nenxanh” mới chịu tác động css. Đây cũng là selector phổ biến trong các trang web hiện nay mà bạn cần biết.
Vùng chọn phân cấp
Ở 3 vùng chọn trên khá là đơn giản và dễ hiểu nhưng đến cùng chọn này thì mức độ phức tạp sẽ cao hơn. Vùng chọn phân cấp tức là bạn cần định dạng 1 thẻ mà thẻ đó nằm trong 1 thẻ khác hay trong 1 id, class khác và id, class đó lại nằm trong 1 id, class khác nữa.
Ví dụ : Định dạng thẻ h3 nằm trong thẻ div có id=”nenmaudo” thì code HTML như sau:
Code định dạng css như sau:
[html] #nenmaudo h3 {background: red;
color: white;
}
[/html]
Nhìn vào đoạn code định dạng bên trên ta thấy rằng chỉ những thẻ h3 nằm trong thẻ div mà có id=”nenmaudo” thì mới chịu tác động. Cách này được sử dụng rất nhiều hiện nay.
Vùng chọn tất cả
Nghe tên vùng chọn thôi bạn cũng đã hiểu được ý nghĩa của nó rồi đúng không? Vùng chọn tất cả được sử dụng bằng dấu * nghĩa là tất cả các thẻ trong trang HTML sẽ chịu tác động cùng nhau. Có nhiều bạn nhầm lẫn vùng chọn này với vùng chọn theo tên body. Vì vậy bạn cần phân biệt 2 vùng chọn này hoàn toàn khác nhau nhé. Vùng chọn theo tên thẻ body chưa chắc đã tác động lên hết các thẻ HTML còn vùng chọn * thì chắc chắn sẽ tác động lên tất cả các thẻ HTML trong trang web.
Ví dụ : Định dạng màu nền cho toàn trang web là màu xanh và màu của tất cả chữ là màu trắng.
[html] * {background: blue;
color: white;
}
[/html]
Lời kết : Kết thúc bài hôm nay bạn đã nắm được các vùng chọn CSS thông dụng hiện nay, việc sử dụng vùng chọn trong CSS rất quan trọng vì vậy bạn cần đọc và thực hành theo để rút ra kinh nghiệm cho mình. Bài tới chúng ta sẽ cùng tìm hiểu các thuộc tính định dạng CSS trong thẻ a.
Chúc bạn thành công!
Những bài bạn nên xem:
# Cùng chuyên mục : Serie hướng dẫn học HTML căn bản
