Khi học HTML, bạn không thể quan tâm đến việc sử dụng các thuộc tính. Trong bài viết trước đây mình đã giới thiệu và hướng dẫn các bạn cách sử dụng 1 thuộc tính rất thường xuyên được sử dụng đó là thuộc tính STYLE trong HTML. Nhưng đó không phải thuộc tính duy nhất bạn hay sử dụng, khi làm web với HTML còn thuộc tính ID và thuộc tính CLASS hầu như rất thường xuyên được sử dụng, theo mình thấy thì 2 thuộc tính này còn dùng nhiều hơn cả thuộc tính . Hai thuộc tính này giúp bạn xác định đối tượng nào được xác định chính xác để có thể thiết lập CSS cho nó hoặc cao siêu hơn thì sẽ dùng để kết hợp với JS
Để bạn hiểu rõ hơn về tác dụng và chức năng của thuộc tính ID và thuộc tính CLASS trong HTML chúng ta sẽ cùng tìm hiểu ở bên dưới đây
Thuộc tính ID trong HTML
Thuộc tính ID dùng để đặt tên cho 1 HTML HTML bất kỳ phần nào. Mỗi phần tử chỉ có 1 ID duy nhất và để khai báo ID trong HTML bạn sử dụng cú pháp như sau. id=”ten-id”
Ví dụ
#thuoc-tinh-id { background-color: red; color: black; font-size: 15px; } #thuoc-tinh-class { background-color: blue; color: #fff; font-size: 30px; }Thuộc tính ID
Thuộc tính CLASS
Như bạn thấy trong ví dụ trên có 2 thẻ
và để phân biệt chúng thì ta sẽ gán thêm thuộc tính ID cho từng phần tử. Khi khai báo trong HTML thì chúng ta có 2 thuộc tính ID là id=”thuoc-tinh-id” và id=”thuoc-tinh-class”. Còn khi khai báo trong CSS thì chúng ta sẽ sử dụng cú pháp #ten-id. Về phần CSS này thì mình sẽ nói rõ hơn trong series học CSS cơ bản.
Lưu ý
- Chỉ được phép sử dụng các chữ cái, chữ số, dấu gạch dưới [ _ ], dấu gạch nối [ – ] để đặt tên cho ID
- Tên ID không nên bắt đầu bằng chữ số vì nó sẽ không hoạt động trên một số trình duyệt
Tham khảo thêm
- Phần tử khối [Block Element] và phần tử nội tuyến [Inline Element] trong HTML
- Tag a in HTML – Thẻ tạo link liên kết trong HTML
- Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML
Thuộc tính CLASS trong HTML
Thuộc tính LỚP được sử dụng để đặt tên cho 1 hoặc nhiều phần tử HTML khi bạn muốn chúng có cùng định dạng. Thông thường sẽ sử dụng cho nhiều phần tử HTML chứ không phải nếu có 1 phần tử thì không nên sử dụng thuộc tính LỚP. Ngoài ra, 1 phần tử có thể sử dụng nhiều lớp và mỗi lớp cách nhau bằng 1 khoảng trống [khoảng cách]. Để khai báo lớp trong HTML chúng ta sử dụng cú pháp. class=”mười lớp”
Ví dụ
.id { background: #50e5fc; padding: 10px; } .class { border: 2px solid #78b43d; font-size: 12px; } .thuoc-tinh-id { background-color: red; color: black; font-size: 15px; } .thuoc-tinh-class { background-color: blue; color: #fff; font-size: 30px; }Thuộc tính ID
Thuộc tính CLASS
Thuộc tính ID
Thuộc tính CLASS
Trong ví dụ trên, bạn có thể thấy 1 class chúng ta dùng cho 2 phần tử hoặc có thể nhiều hơn tùy ý. Và 1 phần tử chúng ta có thể sử dụng 2 class hoặc nhiều hơn. Ở đây bạn có thể thấy thẻ
Lưu ý
- Chỉ được phép sử dụng các chữ cái, chữ số, dấu gạch dưới [ _ ], dấu gạch nối [ – ] để đặt tên cho LỚP
- Tên LỚP không nên bắt đầu bằng chữ số vì nó sẽ không hoạt động trên một số trình duyệt
Lời kết
Trên đây là tất cả những gì mình muốn nói về thuộc tính ID và thuộc tính LỚP trong HTML. Hi vọng với những kiến thức mình chia sẻ sẽ giúp bạn biết cách sử dụng các thuộc tính ID và CLASS sao cho phù hợp khi thiết kế web với HTML
Cảm ơn bạn đã ghé qua blog của Hùng. Nếu thấy bài viết hay và có ý nghĩa thì like và share ủng hộ cho mình nhé. Ngoài ra bạn có thể đọc thêm các bài viết khác trong series học HTML để học thêm nhiều kiến thức về HTML hơn nhé. Chúc bạn thành công
Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa hoàn hảo nhưng nó sẽ hữu ích với bạn
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ẻ đ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 ở loạt phim gần cuối
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ản
Vù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ẻ h1
trong trang web thì sẽ có đoạn CSS sau với vùng chọn h1
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 ID
Lự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
trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn một phần tử có thể là do 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
Id được thiết lập dựa trên thuộc tính id
trong thẻ HTML và bất kỳ 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ụ
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ẻ 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ư
.id { background: #50e5fc; padding: 10px; } .class { border: 2px solid #78b43d; font-size: 12px; } .thuoc-tinh-id { background-color: red; color: black; font-size: 15px; } .thuoc-tinh-class { background-color: blue; color: #fff; font-size: 30px; }0, lưu ý là phải viết sát nhauThuộc tính ID
Thuộc tính CLASS
Thuộc tính ID
Thuộc tính CLASS
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ớp
Lớ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ư
.id { background: #50e5fc; padding: 10px; } .class { border: 2px solid #78b43d; font-size: 12px; } .thuoc-tinh-id { background-color: red; color: black; font-size: 15px; } .thuoc-tinh-class { background-color: blue; color: #fff; font-size: 30px; }1. Khi khai báo vùng chọn lớp trong CSS, thì tên lớp phải được đặt sau dấu chấm [Thuộc tính ID
Thuộc tính CLASS
Thuộc tính ID
Thuộc tính CLASS
h1
0]. Ví dụ về cách sử dụng class linh hoạtXem 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ấp
Kiể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]
- Menu 1
- Menu 2
- Menu 3
- Google+
[/html]
Như ở đoạn trên, mình có hai danh sách với thẻ h1
1 mang 2 id khác nhau. Bây giờ mình muốn viết CSS cho các thẻ h1
2 trong cái danh sách h1
3 thì làm thế nào? . Lúc này, chúng ta sẽ sử dụng đến vùng lựa chọn thứ cấp
Để chọn các thẻ h1
2 bên trong h1
3, mình sẽ viết vùng chọn là h1
6 thay vì chỉ viết h1
7 trong CSS. Lúc này CSS sẽ hiểu rằng chúng ta muốn chọn tất cả các thẻ h1
2 nằm bên trong phần tử mang h1
3
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ừ 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]
- Menu 1
- Menu 1.a
- Menu 1.b