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