Phân biệt ID và Class trong css WordPress

Mỗi thẻ HTML đều mang các thuộc tính riêng và khác nhau. Bên cạnh đó, sở hữu 2 tính chất ID và Class thì 100% các thẻ đều có thể dùng. ID giống như mã số chứng minh của Cả nhà, còn class giống như giới tính của Cả nhà vậ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

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, dùng để gắn cho một thẻ HTML nào ấy. Trong 1 file HTML thì ID là độc nhất, 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 lề luật sau:

  • Tên đặt tiếng Anh và không dấu, không có khoảng trắng, không có ký tự đặc biệt.
  • Đặt tên có ý nghĩa, giúp Quan sát ID là ta biết được thẻ đấy sở hữu công dụng là gì.

Ví dụ: Mình tạo một hộp thoại hiển thị mã giảm giá, và mình sẽ dùng 1 thẻ div để bao vòng vo số đông hộp thoại đó. Sau đó mình cũng ko quên đặt ID cho nó là “choweb“.

<div id=”choweb“>

Content

</div>

khi này, nếu như bạn muốn sử dụng CSS để chỉnh cho thẻ này thì sử dụng cú pháp sau:

#choweb
background:red;
height: 300px

Note : Bạn quan tâm dấu # trước Name ID nhé , có ID luôn phải mang dấu # và đó là bắt buộc

2. Class trong HTML là gì?

nếu ID là độc nhất vô nhị 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 với chung 1 đặc điểm. Bởi vậy, bạn sở hữu thể gắn một class cho phổ thông 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é.

2. Class trong HTML là gì?

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, giả dụ sở hữu 100 bài thì mình sẽ cần đến 100 blocks. Giả dụ chúng ta tiêu dùng ID để đặt cho 100 blocks đấy thì rất khó. Cho nên, 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 vận 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 dùng ID và lúc nào tiêu dùng class?

Đây là thắc mắc mà đầy đủ bạn đã hỏi mình. Để trả lời thì bạn phải xem lại hai định nghĩa mà mình đã biểu thị ở trên.

  • ID là duy nhất trong một tập tài liệu HTML. Vì vậy, bạn nên đặt nó nếu như cấu trúc trang web chỉ còn đó 1 vị trí mà thôi, tức CSS không mang tính kế thừa.
  • Class thì khác, có thể gắn class cho phổ biến thẻ HTML khác nhau. Do đó, bạn nên sử dụng trong trường hợp muốn những thẻ HTML khác nhau có thể kế thừa CSS của nhau.

Qua bày này mình đã chỉ 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 đề để Cả nhà học những bài tiếp theo đấy nhé. Hãy xem thật kỹ, ví như có câu hỏi 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