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.

Cách sử dụng Class

Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class

Đoạn văn này có cùng class với đoạn văn thứ 3

Đ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

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 Selector Nế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 đỏ.

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ết

h1.classtext {font-style:italic;}

Tránh lạm dụng Class Mộ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 ID ID đượ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

Đâ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ặc

p#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à ID

Nó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 " "].

Page 2

Khi so sánh class CSS với ID, sự khác biệt là class CSS áp dụng một kiểu cho nhiều phần tử. Mặt khác, ID áp dụng một style cho một phần tử duy nhất. ID cũng đặc biệt ở chỗ bạn có thể sử dụng một URL đặc biệt để liên kết trực tiếp đến một phần tử và nó được JavaScript sử dụng.

Trong CSS, selectors được sử dụng để nhắm mục tiêu một phần tử cụ thể hoặc nhiều phần tử trên trang web. Khi một phần tử đã được nhắm mục tiêu, một kiểu hoặc tập hợp các kiểu có thể được áp dụng cho phần tử.

Có một loạt các selectors có sẵn. Hai trong số phổ biến nhất được sử dụng là class và ID. Cả hai đều được sử dụng để nhắm mục tiêu các yếu tố mà một kiểu sẽ được áp dụng.

Các bài viết liên quan:

Class CSS so với selectors ID

Sự khác biệt giữa selectors class và ID là gì? Đây là một câu hỏi được hỏi bởi nhiều nhà phát triển mới làm quen với CSS và một câu hỏi mà chúng tôi sẽ trả lời trong hướng dẫn này.

Khi đọc xong hướng dẫn này, bạn sẽ biết sự khác biệt giữa hai selectors này. Bạn sẽ có thông tin cần thiết để đưa ra quyết định sáng suốt về việc sử dụng công cụ chọn nào trong mã của mình. Bắt đầu nào.

Xem thêm CSS selectors nâng cao

Selectors CSS

Khi thiết kế một trang web, bạn sẽ muốn các style nhất định áp dụng cho các phần tử cụ thể trên trang. Ví dụ: bạn có thể muốn đặt màu văn bản của tất cả các thẻ

thành màu xanh lục hoặc thay đổi kích thước phông chữ của tiêu đề.

Selectors cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web mà bạn có thể áp dụng các kiểu. Trong CSS, có sẵn nhiều selectors, chẳng hạn như selectors phổ quát, selectors con, selectors con và selectors nhóm. Nếu bạn muốn tìm hiểu thêm về selectors CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về selectors CSS.

Hai selectors, class và id, được sử dụng để áp dụng kiểu cho các phần tử dựa trên class và ID được gán cho một phần tử HTML, tương ứng. Nhưng những selectors này thường bị nhầm lẫn, vì vậy hãy cùng khám phá cách hoạt động của từng bộ.

Selectors ID là duy nhất

Selectors id cho phép bạn xác định các quy tắc kiểu áp dụng cho một phần tử duy nhất trên trang web. Mỗi trang web chỉ có thể có một phần tử với một thuộc tính ID duy nhất. Điều này có nghĩa là selectors ID không bao giờ có thể được sử dụng để tạo kiểu cho nhiều phần tử.

Xem thêm OOP[ hướng đối tượng] trong R

selectors ID được xác định bằng cách sử dụng dấu thăng. Ngay sau đó là giá trị ID mà bạn muốn áp dụng một bộ quy tắc kiểu. Dưới đây là một ví dụ về công cụ chọn ID đang hoạt động:

banner website

#betaBanner { color: white; background-color: orange; }

Kiểu này áp dụng cho phần tử

trong tài liệu HTML của chúng tôi với ID betaBanner. Kiểu sẽ đặt màu nền của phần tử thành màu cam và màu của văn bản trong phần tử thành màu trắng.

Selectors class không phải là duy nhất

Selectors class cho phép bạn xác định các quy tắc kiểu áp dụng cho bất kỳ phần tử nào có thuộc tính class bằng một giá trị nhất định.

Như chúng ta đã thảo luận trước đó, selectors ID chỉ có thể được sử dụng để tạo kiểu cho một phần tử. Điều này là do ID chỉ có thể được sử dụng một lần trên một trang web. Mặt khác, các class có thể được sử dụng trên nhiều phần tử. Vì vậy, nếu bạn áp dụng một kiểu bằng cách sử dụng selectors lớp, bất kỳ phần tử nào chia sẻ class đó sẽ tuân theo các kiểu bạn xác định.

selectors class được xác định bằng dấu chấm, theo sau là giá trị của class mà bạn muốn áp dụng một tập hợp kiểu. Dưới đây là một ví dụ về công cụ chọn class đang hoạt động:

đây là banner.

.orangeBackground { background-color: orange; }

Kiểu này đặt màu nền của thẻ

của chúng tôi thành màu cam. Ngoài ra, kiểu đặt màu nền của thẻ