học CSS tìm hiểu về vùng chọn cơ bản selector
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (63.75 KB, 4 trang )
[Học CSS] Tìm hiểu về vùng chọn cơ bản (Selector)
thachpham.com/web-development/html-css/vung-chon-css-co-ban.html
Thạch
Phạm
8 tháng 4,
2015
/>Vùng chọn trong CSS đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng
vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc
thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn là kỹ
thuật quan trọng đầu tiên khi bạn sử dụng CSS.
Vùng chọn trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ
<body> đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng
vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất, ngoài ra còn có các kiểu
sử dụng vùng chọn nâng cao khác mình sẽ nói ở gần cuối serie.
Vùng chọn là gì?
Trong CSS, vùng chọn nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc
CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ
h1 thì vùng chọn của bạn sẽ là h1.
Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML.
Các loại vùng chọn cơ bản
Vùng chọn dựa vào tên thẻ
Kiểu vùng chọn này là đơn giản nhất, đó là nó sẽ chọn toàn bộ các phần tử trên tài
liệu HTML dựa vào tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối
style cho toàn bộ thẻ h1 trong website thì sẽ có đoạn CSS sau với vùng chọn h1 .
Dĩ nhiên với kiểu sử dụng vùng chọn này thì toàn bộ các thẻ HTML trong website được
chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết
CSS cho một khu vực độc lập.
Vùng chọn dựa vào ID
Vùng chọn dựa vào ID (tên định danh) nghĩa là bạn có thể chọn một phần tử cụ thể dựa
vào giá trị của thuộc tính id trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn
một phần tử cụ thể là vì trên một trang tài liệu HTML thì mỗi phần tử phải mang một id
riêng biệt không trùng nhau.
1/4
Id được thiết lập dựa vào thuộc tính id trong thẻ HTML và bất cứ thẻ nào cũng có thể sử
dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng ( #tên-id ) đặt trước tên id để
phân biệt với các loại vùng chọn khác. Ví dụ:
Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ h1 nhưng mình muốn viết CSS cho một
thẻ h1 cụ thể nào đó thì sẽ đặt id riêng cho phần tử mà mình cần viết CSS thay vì sử
dụng vùng chọn dựa theo tên thẻ.
Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử
dụng id đó như h1#post-title , lưu ý là phải viết sát nhau.
Hãy lưu ý rằng, một thẻ có thể sẽ chứa nhiều id khác nhau và mỗi tên id sẽ được cách
nhau bởi khoảng trắng như thế này.
01
< h1 id = "post-title
sticky" >Hello</ h1 >
Vùng chọn dựa vào Class
Class (lớp) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của class là
một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì
chỉ được sử dụng một lần duy nhất cho một phần tử.
Class được khai báo trong một phần tử HTML bởi thuộc tính class như
