Sự khác biệt giữa ID và Class | CSS-Thủ thuật – sự khác biệt giữa lớp html và id

Chúng tôi cần các cách để mô tả nội dung trong tài liệu HTML / XHTML. Các phần tử cơ bản như h1, p và ul thường sẽ thực hiện công việc, nhưng bộ thẻ cơ bản của chúng tôi không bao gồm mọi loại phần tử trang hoặc lựa chọn bố cục có thể có. Đối với điều này, chúng tôi cần ID và các lớp.

Bạn đang xem : sự khác biệt giữa lớp html và id

ID và các lớp là “hook”!

Chúng tôi cần các cách để mô tả nội dung trong tài liệu HTML / XHTML. Các phần tử cơ bản như & lt; h1 & gt; , & lt; p & gt; & lt; ul & gt; thường sẽ thực hiện công việc, nhưng bộ cơ bản của chúng tôi các thẻ không bao gồm mọi loại phần tử trang hoặc lựa chọn bố cục có thể có. Đối với điều này, chúng tôi cần ID và Lớp. Ví dụ: & lt; ul id = "nav" & gt; , điều này sẽ cho chúng tôi cơ hội nhắm mục tiêu cụ thể danh sách không có thứ tự này, để chúng tôi có thể điều khiển nó duy nhất đến các danh sách không có thứ tự khác trên trang của chúng tôi. Hoặc chúng tôi có thể có một phần trên trang của chúng tôi không có thẻ liên quan để biểu thị nó, ví dụ: chân trang, nơi chúng tôi có thể làm điều gì đó như sau: & lt; div id = "footer" & gt; . Hoặc có lẽ chúng tôi có các hộp trong thanh bên để ngăn cách nội dung ở đó theo một cách nào đó: & lt; div class = "sidebar-box" & gt; .

Những ID này và Phân loại các “móc” mà chúng tôi cần xây dựng thành đánh dấu để bắt tay vào thực hiện chúng. CSS rõ ràng cần những thứ này để chúng tôi có thể xây dựng các bộ chọn và thực hiện kiểu của chúng tôi, nhưng các ngôn ngữ web khác như JavaScript cũng phụ thuộc vào chúng. Nhưng sự khác biệt giữa chúng là gì?

ID là duy nhất

  • Mỗi phần tử chỉ có thể có một ID
  • Mỗi trang chỉ có thể có một phần tử với ID đó

Khi tôi lần đầu tiên học công cụ này, tôi đã nghe nói nhiều lần rằng bạn chỉ nên sử dụng ID một lần, nhưng bạn có thể sử dụng các lớp học nhiều lần. Về cơ bản, nó đi vào tai này và tai kia vì nó giống như một “quy tắc ngón tay cái” tốt đối với tôi hơn là một thứ gì đó cực kỳ quan trọng. Nếu bạn hoàn toàn là một người sử dụng HTML / CSS, thì thái độ này vẫn có thể tồn tại vì đối với bạn, chúng thực sự không có gì khác biệt.

Đây là một: mã của bạn sẽ không vượt qua xác thực nếu bạn sử dụng cùng một ID trên nhiều phần tử. Việc xác thực phải quan trọng đối với tất cả chúng ta, vì vậy chỉ riêng điều đó đã là một việc lớn. Chúng ta sẽ xem xét thêm các lý do cho sự độc đáo khi chúng ta tiếp tục.

Các lớp không phải là duy nhất

  • Bạn có thể sử dụng cùng một lớp trên nhiều phần tử.
  • Bạn có thể sử dụng nhiều lớp trên cùng một phần tử.

Bất kỳ thông tin tạo kiểu nào cần được áp dụng cho nhiều đối tượng trên một trang đều phải được thực hiện với một lớp. Lấy ví dụ một trang có nhiều “tiện ích con”:

  & lt; div class = "widget" & gt; & lt; / div & gt;
& lt; div class = "widget" & gt; & lt; / div & gt;
& lt; div class = "widget" & gt; & lt; / div & gt;  

Giờ đây, bạn có thể sử dụng tên lớp “widget” làm móc nối của mình để áp dụng cùng một bộ kiểu cho từng kiểu trong số này. Nhưng điều gì sẽ xảy ra nếu bạn cần một trong số chúng lớn hơn cái còn lại, nhưng vẫn chia sẻ tất cả các thuộc tính khác? Bạn đã tham gia các lớp học ở đó, vì bạn có thể đăng ký nhiều lớp học:

  & lt; div class = "widget" & gt; & lt; / div & gt;
& lt; div class = "widget lớn" & gt; & lt; / div & gt;
& lt; div class = "widget" & gt; & lt; / div & gt;  

Không cần đặt tên lớp hoàn toàn mới ở đây, chỉ cần áp dụng một lớp mới ngay trong thuộc tính lớp. Các lớp này được phân định bằng dấu cách và hầu hết các trình duyệt đều hỗ trợ bất kỳ số lượng nào trong số chúng (thực tế, giống như hàng nghìn, nhưng nhiều hơn những gì bạn cần).

Xem Thêm  Tất cả các biến trong PHP bắt đầu bằng ký hiệu nào? - tất cả các biến trong php bắt đầu bằng ký hiệu nào

Không có mặc định trình duyệt nào cho bất kỳ ID hoặc Lớp nào

Việc thêm tên lớp hoặc ID vào một phần tử sẽ không ảnh hưởng gì đến phần tử đó theo mặc định.

Đây là điều khiến tôi khó chịu khi mới bắt đầu. Bạn đang làm việc trên một trang web và tìm ra rằng việc áp dụng một tên lớp cụ thể sẽ khắc phục được sự cố bạn đang gặp phải. Sau đó, bạn chuyển sang một trang web khác có cùng vấn đề và cố gắng khắc phục nó bằng chính tên lớp đó vì nghĩ rằng bản thân tên lớp có một số thuộc tính kỳ diệu đối với nó chỉ để phát hiện ra rằng nó không hoạt động.

Các lớp và ID không có bất kỳ thông tin kiểu dáng nào đối với chúng. Chúng yêu cầu CSS để nhắm mục tiêu chúng và áp dụng kiểu.

Mã vạch và Số sê-ri

Có thể một sự tương tự tốt ở đây là mã vạch và số sê-ri. Mang một chiếc iPod trong một cửa hàng. Trên bao bì sẽ có mã vạch. Điều này cho cửa hàng biết sản phẩm là gì, vì vậy khi nó được quét, hệ thống sẽ biết chính xác sản phẩm là gì và giá của nó là bao nhiêu. Nó thậm chí có thể biết nó có màu gì hoặc nó được giữ ở đâu trong cửa hàng. Tất cả iPod cùng loại này đều có cùng một mã vạch.

iPod cũng sẽ có số sê-ri trên đó, số này hoàn toàn duy nhất đối với bất kỳ iPod nào khác (hoặc bất kỳ thiết bị nào khác) trên thế giới. Số sê-ri không biết giá. Có thể, nhưng đối với cửa hàng, đây không phải là cách hiệu quả để lưu trữ và sử dụng dữ liệu đó. Sử dụng mã vạch dễ dàng hơn nhiều, vì vậy, ví dụ: nếu giá thay đổi, bạn chỉ có thể thay đổi giá cho mã vạch đó chứ không phải mọi số sê-ri riêng lẻ trong hệ thống của mình.

Điều này giống như ID và Lớp. Thông tin có thể tái sử dụng nên được lưu giữ trong một lớp học và thông tin hoàn toàn duy nhất nên được lưu giữ trong ID.

ID có chức năng trình duyệt đặc biệt

Các lớp không có khả năng đặc biệt trong trình duyệt, nhưng ID có một mẹo rất quan trọng trong tay của họ. Đây là “giá trị băm” trong URL. Nếu bạn có một URL như http: //yourdomain.com#comments, trình duyệt sẽ cố gắng xác định vị trí của phần tử có ID là “nhận xét” và sẽ tự động cuộn trang để hiển thị phần tử đó. Điều quan trọng cần lưu ý ở đây là trình duyệt sẽ cuộn bất kỳ phần tử nào mà nó cần để hiển thị phần tử đó, vì vậy nếu bạn đã làm điều gì đó đặc biệt như vùng DIV có thể cuộn trong nội dung thông thường của mình, div đó cũng sẽ được cuộn theo.

Đây là lý do quan trọng ngay tại đây tại sao việc có ID phải hoàn toàn duy nhất lại quan trọng. Vì vậy, trình duyệt của bạn biết nơi để cuộn!

Xem Thêm  Hướng dẫn cơ bản về Python cho Vòng lặp với hàm range () - trong phạm vi cho vòng lặp python

Các phần tử có thể có CẢ HAI

Không có gì ngăn cản bạn có cả ID và Lớp trên một phần tử duy nhất. Trong thực tế, nó thường là một ý tưởng rất hay. Lấy ví dụ về đánh dấu mặc định cho một mục danh sách nhận xét WordPress:

  & lt; li id ​​= "comment-27299" class = "item" & gt;  

Nó có một lớp được áp dụng cho nó mà bạn có thể muốn tạo kiểu cho tất cả các nhận xét trên trang, nhưng nó cũng có một giá trị ID duy nhất (được tạo động bởi WordPress, đủ đẹp). Giá trị ID này hữu ích cho việc liên kết trực tiếp. Giờ đây, tôi có thể liên kết trực tiếp đến một nhận xét cụ thể trên một trang cụ thể một cách dễ dàng.

CSS không quan tâm

Về CSS, bạn không thể làm gì với ID mà bạn không thể làm với Lớp và ngược lại. Tôi nhớ khi tôi lần đầu tiên học CSS và tôi gặp sự cố, đôi khi tôi sẽ thử và khắc phục sự cố bằng cách chuyển đổi các giá trị này. Không. CSS không quan tâm.

JavaScript quan tâm

Mọi người JavaScript có lẽ đã đồng điệu hơn với sự khác biệt giữa các lớp và ID. JavaScript phụ thuộc vào việc chỉ có một phần tử trang với bất kỳ id cụ thể nào, nếu không hàm getElementById thường được sử dụng sẽ không đáng tin cậy. Đối với những người quen thuộc với jQuery, bạn biết việc thêm và xóa các lớp vào các phần tử trang dễ dàng như thế nào. Nó là một hàm gốc và được tích hợp sẵn của jQuery. Lưu ý rằng không có chức năng nào như vậy tồn tại cho ID’s. JavaScript không có trách nhiệm thao túng các giá trị này, nó sẽ gây ra nhiều vấn đề hơn mức đáng có.

Nếu bạn không cần chúng, đừng sử dụng chúng < / h3>

Như bạn có thể thấy, các lớp và ID rất quan trọng và chúng tôi dựa vào chúng hàng ngày để tạo kiểu và thao tác trang mà chúng tôi cần làm. Tuy nhiên, bạn nên sử dụng chúng một cách thận trọng và có ngữ nghĩa.

Điều này có nghĩa là tránh những điều như thế này:

  & lt; a href = "https://css-tricks.com" class = "link" & gt; CSS-Tricks.com & lt; / a & gt;  

Chúng tôi đã biết phần tử này là một liên kết, nó là một phần tử neo! Ở đây không nhất thiết phải áp dụng một lớp, vì chúng tôi đã có thể áp dụng kiểu thông qua thẻ của lớp đó.

Cũng nên tránh điều này:

  & lt; div id = "right-col" & gt;  

ID được sử dụng thích hợp ở đây vì trang có thể sẽ chỉ có một cột bên phải, nhưng tên không phù hợp. Hãy thử và mô tả bối cảnh của phần tử, không phải vị trí của nó hoặc nó trông như thế nào. Một ID ở đây là “thanh bên” sẽ thích hợp hơn.

Vi định dạng chỉ là tên lớp cụ thể

Bạn nghĩ rằng vi định dạng nằm trên đầu của bạn? Họ không! Chúng chỉ là đánh dấu thông thường sử dụng các tên lớp được chuẩn hóa cho thông tin chúng chứa. Kiểm tra vCard tiêu chuẩn:


Xem thêm những thông tin liên quan đến chủ đề sự khác biệt giữa lớp html và id

css id vs class attributes, when to use id and when to use class, difference between id and class

  • Tác giả: techsith
  • Ngày đăng: 2015-07-30
  • Đánh giá: 4 ⭐ ( 3879 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: css3 id vs class attributes,
    when to use id and when to use class,
    difference between id and class in css
    css benefits of using class over id, css3 benefits of using id over class, html id vs class, css id vs class, html class vs id, css class vs id, The Difference Between ID and Class, id vs class tutorial, difference between id and class tutorial,The Difference Between class and id
    HTML5, CSS3 and JavaScript Tutorials , lessons with examples.
    Techsith.com

    id vs class more of a design related question and its a very important one. Overall you will be using more classes then ids.

    id: think of element that is unique. there is only one id per element. your html validateor would throw and en error if you do use it which means you will not be reusing the same style anywhere else. all the main containers in your HTMLs you should use id because you are not going to repete them . That doesnt mean that you cant use class there. advantage of using is for is as your main namespace. for css this way you can segregate work so your css doesn’t messup. for example leftContainer .button { color:red} which mean all the botton in the left containers are red.

    class: you can used them freely. any common styles you can define as class. as you can have multiple classes for the same element. and mix and match of the classes will make your css small . for example you can create two divs with same color but diffrent font sizes.

    Dont forget the attributes. actually id and class are attributes wich special meaning. and you can create your own custome attributes. like myattr. Platforms like angularjs uses them freely.

    overall i thin its better to use classes then ids especially when you working in a team envirement where you are responsible for a partial html . using id can be riskier if someone else is using the same id in the other part of the html .

    in css id has higher priority than class for example …..

    *My Udemy Courses
    https://www.udemy.com/js-masterclass/
    *couponCode*=TECHSITH-9.99

    https://www.udemy.com/course/react-hooks-course/?couponCode=TECHSITH-9.99

    Follow me for technology updates
    * https://facebook.com/techsith
    * https://www.facebook.com/groups/techsith
    * https://twitter.com/techsith1
    * https://www.linkedin.com/groups/13677140/
    * https://medium.com/@patelhemil

    Help me translate this video.
    * https://www.youtube.com/timedtext_cs_panel?c=UCbGZKLIHpox2l0whz6_RYyg&tab=2
    Note: use https://translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Sự khác biệt giữa các thuộc tính id và name trong HTML

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2929 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Các namethuộc tính được sử dụng khi gửi dữ liệu trong một trình đơn. Kiểm soát…

Bài 5: Phân biệt class và id trong html và css

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 7754 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi tìm hiểu các thêm định dạng css vào các thẻ html, chúng ta sẽ tìm hiểu cách phân biệt class và id cũng như công dụng của chúng trong việc kiểm soát và đinh danh các thẻ html. Giúp cho việc code html và css dễ kiểm tra, chỉnh sửa hơn.

Thuộc tính class trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 9928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML.

Tất cả những điều bạn cần biết về ID trong CSS

  • Tác giả: hamsa.life
  • Đánh giá: 4 ⭐ ( 3027 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phân biệt ID và Class, chúng giống và khác nhau như thế nào trong CSS, cái này mà bạn không nắm rõ là dở đấy!

  • Tác giả: freehost.page
  • Đánh giá: 4 ⭐ ( 2522 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sự khác biệt giữa Lớp và Đối tượng –

  • Tác giả: edxgroup.vn
  • Đánh giá: 4 ⭐ ( 9084 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn vẫn còn chưa phân biệt được sự khác biệt giữa lớp và đối tượng thì bài viết này sẽ là lời giải đáp tốt nhất! Vậy nên hãy đọc ngay!

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình