Mỗi thẻ HTML đều có những tính chất riêng và khác nhau. Tuy nhiên, mang 2 thuộc tính ID và Class thì 100% những thẻ đều sở hữu thể sử dụng. ID giống như mã số chứng minh của Các bạn, còn class giống như nam nữ của Anh chị em vậy đấy. Chi tiết thế nào thì chúng ta cùng Nhận định ngay nhé
Phân biệt ID và Class trong css WordPress
Phân biệt ID và Class trong css WordPress
1. ID trong HTML là gì?
ID trong HTML là một chuỗi xác định và duy nhất, sử dụng để gắn cho 1 thẻ HTML nào ấy. Trong 1 file HTML thì ID là độc nhất vô nhị, tức thị bạn không thể đặt một ID cho hai thẻ HTML.
Việc đặt tên ID nên tuân theo quy tắc sau:
- Tên đặt tiếng Anh và không dấu, không có khoảng trắng, ko mang ký tự đặc thù.
- Đặt tên sở hữu ý nghĩa, giúp Quan sát ID là ta biết được thẻ đấy có công dụng là gì.
Ví dụ: Mình tạo 1 hộp thoại hiển thị mã ưu đãi, và mình sẽ sử dụng một thẻ div để bao quanh quéo phần nhiều hộp thoại ấy. Sau đấy mình cũng ko quên đặt ID cho nó là “choweb“.
<div id=”choweb“>
Content
</div>
khi này, giả dụ bạn muốn dùng CSS để chỉnh cho thẻ này thì dùng cú pháp sau:
#chowebbackground:red;height: 300px
Note : Bạn quan tâm dấu # trước Name ID nhé , mang ID luôn phải với dấu # và đó là đề nghị
2. Class trong HTML là gì?
nếu như ID là duy nhất trong 1 file tài liệu HTML thì class thì lại khác, nó được sử dụng để thiết lập một lớp những đối tượng mang chung một đặc điểm. Vì vậy, bạn với thể gắn 1 class cho phổ quát thẻ HTML khác nhau.
Việc đặt tên cho class cũng nên tuân thủ theo luật lệ mà mình đã hướng dẫn trong phần 1 nhé.
2. Class trong HTML là gì?
Ví dụ: Mình muốn hiển thị danh sách bài viết, và mỗi bài viết mình sẽ gọi nó là 1 block. Như vậy, nếu như có 100 bài thì mình sẽ cần đến 100 blocks. Giả dụ chúng ta dùng ID để đặt cho 100 blocks đấy thì rất khó. Bởi vậy, ta sẽ đặt một class cho 100 blocks, và ta chỉ cần viết CSS cho class ấy là 100 block kia sẽ được vận dụng CSS ngay.
<div class=”post”> Post một </div>
<div class=”post”> Post 2 </div>
<div class=”post”> Post 3 </div>
<div class=”post”> Post 4 </div>
Trong CSS mình sẽ viết như sau:
.postbackground:red;height: 100px;margin: 20px;
tương tự, chúng ta sử dụng dấu . cho class và dấu # cho ID.
3. Lúc nào dùng ID và lúc nào sử dụng class?
Đây là thắc mắc mà tất cả bạn đã hỏi mình. Để giải đáp thì bạn phải xem lại hai khái niệm mà mình đã thể hiện ở trên.
- ID là độc nhất vô nhị trong một tập tài liệu HTML. Cho nên, bạn nên đặt nó giả dụ cấu trúc trang web chỉ tồn tại 1 vị trí mà thôi, tức CSS ko sở hữu tính kế thừa.
- Class thì khác, có thể gắn class cho đa dạng thẻ HTML khác nhau. Cho nên, bạn nên tiêu dùng trong trường hợp muốn những thẻ HTML khác nhau mang thể kế thừa CSS của nhau.
Qua bày này mình đã hướng dẫn xong cách sử dụng ID và class trong HTML. Đây là vấn đề hơi quan yếu, nó là tiền đề để Anh chị học những bài tiếp theo đó nhé. Hãy xem thật kỹ, nếu sở hữu thắc mắc gì thì hãy bình luận để mình giải đáp.
Theo https://chowebs.com/phan-biet-id-va-class-trong-css-wordpress.html