Chọn css
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 lựa chọn là kỹ thuật quan trọng hàng đầu 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ứ thứ gì từ thẻ Lựa chọn vùng là gì?Trong CSS, vùng chọn có 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 chữ của 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 lựa chọn cơ bảnVùng lựa chọn dựa trên tên thẻKiểu vùng chọn này là đơn giản nhất, nghĩa là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa trên tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối kiểu cho toàn bộ thẻ Xem Bút NPVEyz của Thạch Phạm (@thachpham92) trên CodePen 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 trang web đượ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 Lựa chọn vùng dựa trên IDLựa chọn vùng dựa trên ID (tên định danh) có 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 được thiết lập dựa trên thuộc tính Xem Bút BygBGQ của Thạch Phạm (@thachpham92) trên CodePen Rõ ràng bạn thấy ở ví dụ trên mình có hai 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ư Xin lưu ý rằng, một thẻ có thể 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 [html] Hello[/html]Vùng lựa chọn dựa trên lớpLớp (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 lớp là một lớp 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 Lớp được khai báo trong một phần tử HTML bởi lớp thuộc tính như Xem Bút bNPbzq của Thạch Phạm (@thachpham92) trên CodePen Cũng giống như id, lớp cũng có thể được viết kèm theo kiểu thẻ tên h1. dính và phải liền nhau Lựa chọn vùng theo thứ cấpKiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho trang web đó là phần tử chọn theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó Ví dụ mình có một đoạn HTML thế này [html]
[/html] Như ở đoạn trên, mình có hai danh sách với thẻ Để chọn các thẻ Xem Bút WbqeBE của Thạch Phạm (@thachpham92) trên CodePen Lựa chọn vùng theo cấp độ liền kềĐây là một kiểu chọn vùng dựa theo thứ cấp, đồng thời giúp bạn chọn các phần tử bên trong một phần tử nào đó nhưng nó sẽ chỉ áp dụng cho các phần từ đó cũng nằm bên dưới nó để bật. Bây giờ mình có cái danh sách hai cấp bật như sau [html] [/html] Nếu mình muốn viết CSS cho các thẻ
Xem Pen WbqNeZ của Thạch Phạm (@thachpham92) trên CodePen Thường thì cách viết vùng lựa chọn này bạn sẽ sử dụng khi tạo menu đổ xuống trong trang web Lời kếtỞ trên là 4 kiểu thiết lập vùng chọn để viết CSS mà bạn sẽ thường xuyên sử dụng nhất, hầu hết như được sử dụng liên tục sau này khi viết CSS cho trang web nên bạn hãy cố gắng thử nghiệm cách sử dụng tập tin thấm nhuần nhất có thể nhé. |