Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.
Đoạn văn bản này xuất hiện bình thường
Khi chúng ta gắn class cho thẻ html chúng ta có thể hướng tới đối tượng dễ dàng hơn cho dù nó có ở cấp bậc nào đi chăng nữa
Đoạn này cùng class với văn bản thứ nhất và thứ 3 trong ví dụ nàyĐoạn văn này xuất hiện bình thườngỞ đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1và thẻ p. Bây giờ chúng ta sẽ tô đậm nóp {font-family: helvetica;font-size:16px;}.classtext {font-weight: bold;}(Lưu ý: đoạn code CSS trên bạn phải đặt vào trong thẻ và chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.)Kết quả hiển thị trên trinh duyệt
Bạn đang xem: Sự khác nhau giữa class và id trong css
Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica (hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font San Serif) nhưng đoạn văn có class=”classtext” sẽ được hiển thị vừa font Helvetica, cỡ chữ là 16px và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn với class=”classtext”. Thẻ span là cặp thẻ trắng sẽ không gây tác động gì cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.Contextual Class SelectorNếu bây giờ bạn chỉ muốn đoạn văn bản thứ 4 có màu đỏ thì phải làm sao? bởi vì nếu bạn thêm.classtext {font-weight:bold; color:red”} thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ (hay nói cách khác những đối tượng nào thuộc class=classtext để hiện chữ màu đỏ, như thế không phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên class vào để tạo thành Selector.p {font-family: helvetica; font-size:16px;}.classtext {font-weight: bold;}span.classtext {color:red;} như thế thì chỉ có đoạn văn bản thứ 4 là sẽ có màu đỏ.
Xem thêm: Công Cụ Dịch Trên Chrome – Thay Đổi Ngôn Ngữ Của Chrome Và Dịch Trang Web
Xem thêm: Lột Xác Windows 10 Với Bộ Theme Win 10 Siêu Đẹp Kèm Hướng Dẫn
Nếu bạn muốn bạn cũng có thể làm cho chữ cùng classtext nằm trong thẻ h1 in nghiêng bằng cách viếth1.classtext {font-style:italic;} Tránh lạm dụng ClassMột trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class Selector để hướng tới nó.Cách sử dụng IDID được viết giống y như khi bạn viết code cho Class, chỉ có khác một điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm (.) khi viết CSS . Nếu một đoạn văn bản được viết như sau
Đoạn này cùng class với văn bản thứ nhất và thứ 3 trong ví dụ nàyĐoạn văn này xuất hiện bình thườngỞ đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1và thẻ p. Bây giờ chúng ta sẽ tô đậm nóp {font-family: helvetica;font-size:16px;}.classtext {font-weight: bold;}(Lưu ý: đoạn code CSS trên bạn phải đặt vào trong thẻ và chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.)Kết quả hiển thị trên trinh duyệt
Đây là đoạn văn bản bất kỳ
thì trong phần CSS code của nó sẽ như sau#classtext {color:red;} hoặcp#classtext {color:red;} Còn lại ID được sử dụng y như Class, những gì bạn biết về Class ở trên bạn đều có thể áp dụng được với ID. Vậy chúng khác nhau ở điểm gì?Sự khác biệt giữa Class và IDNói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang hay những thành phần sử dụng cùng các thuộc tính css.Ví dụ: bạn thấy ở trên trang chủ blog của mình thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau (các class đặt cách nhau bởi dấu cách ” “).
thì trong phần CSS code của nó sẽ như sau#classtext {color:red;} hoặcp#classtext {color:red;} Còn lại ID được sử dụng y như Class, những gì bạn biết về Class ở trên bạn đều có thể áp dụng được với ID. Vậy chúng khác nhau ở điểm gì?Sự khác biệt giữa Class và IDNói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang hay những thành phần sử dụng cùng các thuộc tính css.Ví dụ: bạn thấy ở trên trang chủ blog của mình thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau (các class đặt cách nhau bởi dấu cách ” “).
