10/10/2018, 11:23
[CSS Q] Sự khác nhau giữa ID và Class
cho em hỏi giữ 2 cái đó có khác nhau không, em thấy dùng thì vẫn như nhau nhưng xem nhiều template lúc thì dùg class(.something) lúc thì nó dùng id(#something), có khi nó dùng một lượt 2 cái, chỉ em với!
Thanks!!!
Thanks!!!
Bài liên quan
Khái niệm ID và class cần truy hồi từ nguồn gốc của nó khi mà W3C hình dung trang html là một tập hợp các phần tử. Các phần tử được định nghĩa qua các tag html. Các phần tử này phải được định nghĩa bằng một cặp thẻ hoặc phải được kết thúc bằng />. Khi cần tác động đến chúng, W3C quy định 2 cách đánh dấu chúng: thông qua class và ID.
Như cái tên này gợi nhắc thì class chỉ một lớp các phần tử còn ID thì chỉ đích danh một phần tử. Khi chỉ định một nhóm các phần tử, tên gọi của class sẽ giúp chuyển sự tác động đến tất cả các phần tử mang tên của lớp. Trong khi đó, sự tác động này sẽ dừng lại ở phần tử đầu tiên được đánh dấu với ID. Nghĩa là có thể có nhiều phần tử cùng có tên của ID nhưng chỉ có phần tử đầu tiên chịu tác động.
Khi nào bạn vừa muốn dùng ID vừa muốn dùng class cho 1 phần tử: khi phần tử đó vừa muốn nhận giá trị duy nhất vừa muốn dùng chung một số thuộc tính với các phần tử khác. Tương tự như trường hợp dùng nhiều class trên 1 phần tử.
Còn post trên và post của pcdinh tôi thấy chẳng có gì là khác nhau cả ! Tôi cũng nói y trang vậy, mỗi tội ko kĩ và dài như pcdinh chứ đâu có sai? Còn cái đặt #id dành cho id tương ứng mình muốn chỉ thể hiện style trên element nào mà có id đó thì ai làm css chả biết và class thì dùng cho nhiều element có class định nghĩa trong css! Hình như bài post cứ nhiều dòng mới đúng thì phải :d đôi khi cái gì cần ngắn thì phải ngắn thôi !
Ví dụ :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #idTest1{ font-weight:bold; } #idTest2{ text-decoration:overline; } .classTest1{ color:#FF0000; } .classTest2{ text-decoration:underline; } </style> </head> <body> <!-- Sẽ thấy là với trường hợp là id thì sẽ không áp dụng được 2 id và nó sẽ không có hiện tượng gì xảy ra --> <p id="idTest1 idTest2">Test thu nghiem voi ID</p> <!-- Giờ đổi lại là 1 ID thui thì sẽ thấy là được --> <p id="idTest1">Test thu nghiem voi ID</p> <p class="classTest1 classTest2">Test thu nghiem voi class </p> </body> </html>^^
Thật ra id & class - cái tên của nó đã nó lên tất cả
- ID: là ko thể trùng trong phạm vi ảnh hưởng của nó.
Nếu bạn từng lập trên trêc C++,VB hay các ngôn ngữ khác thì bạn cũng đã biết rồi.
Do trong lúc coding html nếu bạn dùng text editor như Editplus,... thì nó ko có kiểm tra sự trùng lặp này, Mặc dù vẫn chạy được trên browser, nhưng nếu bạn lấy value của ID trùng đó sẽ có sự lẫn lộn. ( thường lấy value của id trùng cuối)
- Class: Các bạn lập trình OOB chắc chắn đã biết rồi. nó chỉ 1 nhóm các đối tượng có các thuộc tính giống nhau. Trong css html cũng tương tự nhưng chỉ để format cho các thành phần trong html.
VD Người là một class; Nam,Dũng cùng thuộc class người,...
Vài lời góp ý. hơi dài dòng
Mong các bạn đóng góp thêm
Cái mà em nói là trùng ID vẫn chạy OK đó là do em test theo kinh nghiệm. Trình duyệt đã được chỉnh sửa lại rule để đưa ID về class. Kinh nghiệm đó không portable, có tính cục bộ và nó sẽ làm hỏng kiến thức căn bản.
http://www.blackwidows.co.uk/resourc...s/css/css2.php
http://webdesign.about.com/od/css/f/blfaqmultiIDs.htm
@pcdinh
Cái mà em nói là trùng ID vẫn chạy OK đó là do em test theo kinh nghiệm. Trình duyệt đã được chỉnh sửa lại rule để đưa ID về class. Kinh nghiệm đó không portable, có tính cục bộ và nó sẽ làm hỏng kiến thức căn bản.-->thế nên em mới bảo là sai logic chứ ko khuyến cáo làm theo như thế