Thuộc tính class trong HTML, cách sử dụng

Thuộc tính class trong HTML được sử dụng để chỉ định một hoặc nhiều tên lớp cho phần tử HTML. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết thuộc tính class trong HTML.

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về phần tử block trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính class trong HTML.

thuoc tinh class trong html hoc html

Thuộc tính class trong HTML
 

Mục Lục bài viết:
1. Thuộc tính class trong HTML
2. Sử dụng thuộc tính class cho phần tử nội tuyến
    2.1. Lựa chọn phần tử với lớp cụ thể
    2.2. Phần tử HTML có thể chứa nhiều lớp
    2.3. Các thẻ khác nhau có thẻ chia sẻ cùng một lớp
3. Sử dụng thuộc tính Class trong JavaScript

1. Thuộc tính class trong HTML

Như đã đề cập ở trên, thuộc tính class trong HTML được sử dụng để chỉ định một hoặc nhiều tên lớp cho phần tử HTML.
Thuộc tính này có thể được sử dụng trên phần tử HTML bất kỳ. CSS và JavaScript sử dụng tên lớp để thực hiện các tác vụ cụ thể cho các phần tử có tên lớp được chỉ định.
Ví dụ: dưới đây là ví dụ về thuộc tính class trong HTML:

thuoc tinh class trong html

Kết quả trả về sau khi áp dụng thuộc tính class trong HTML có dạng như dưới đây:

thuoc tinh class trong html 2

2. Sử dụng thuộc tính class cho phần tử nội tuyến

Thuộc tính class trong HTML cũng được sử dụng trên phần tử nội tuyến.
Ví dụ: trong ví dụ dưới đây chúng ta sử dụng thuộc tính class cho phần tử nội tuyến:

thuoc tinh class trong html 3

Kết quả trả về sau khi áp dụng thuộc tính class trong HTML cho phần tử nội tuyến có dạng như dưới đây:

thuoc tinh class trong html 4

Lưu ý:
- Thuộc tính class có thể được sử dụng trên phần tử HTML bất kỳ.
- Tên lớp phải viết hoa.

2.1 Lựa chọn phần tử với lớp cụ thể

Trong CSS chúng ta có thể lựa chọn các phần tử với một lớp cụ thể, bằng cách thêm ký tự dấu chấm (.) sau đó là tên lớp.
Ví dụ: dưới đây là ví dụ minh họa cách lựa chọn phần tử với lớp cụ thể:

thuoc tinh class trong html 5

Kết quả trả về có dạng như dưới đây:

thuoc tinh class trong html 6

2.2. Phần tử HTML có thể chứa nhiều lớp

Các phần tử HTML có thể chứa một hoặc nhiều tên lớp, mỗi tên lớp được tách biệt bởi khoảng trống.
Ví dụ: ví dụ dưới đây minh họa phần tử HTML có nhiều lớp:

thuoc tinh class trong html 7

Kết quả trả về có dạng như dưới đây:

thuoc tinh class trong html 8

Trong ví dụ trên, phần tử h2 đầu tiên thuộc cả lớp "city" và lớp "main".

2.3. Các thẻ khác nhau có thẻ chia sẻ cùng một lớp

Các thẻ khác nhau như h2p có thể cùng một tên lớp, vì vậy có thể chia sẻ cùng một style.
Ví dụ: ví dụ dưới đây minh họa các thẻ khác nhau có thể chia sẻ cùng một lớp:

thuoc tinh class trong html 9

Kết quả trả về có dạng như dưới đây:

thuoc tinh class trong html 10

3. Sử dụng thuộc tính Class trong JavaScript

JavaScript sử dụng tên lớp để thực hiện các tác vụ cụ thể cho các phần tử với tên lớp được chỉ định.
JavaScript có thể truy cập các phần tử với tên lớp được chỉ định bằng cách sử dụng phương thức getElementsByClassName().
Ví dụ: ví dụ dưới đây minh họa cách sử dụng thuộc tính class trong JavaScript:

thuoc tinh class trong html 11

Kết quả trả về có dạng như dưới đây:

thuoc tinh class trong html 12

https://thuthuat.taimienphi.vn/thuoc-tinh-class-trong-html-50636n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về thuộc tính class trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính id trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết để Taimienphi.vn có thể giải đáp những thắc mắc giúp bạn học HTML tốt hơn nhé.

Tác giả: Thuỳ Chi     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Link (liên kết) trong HTML
HTML và XHTML, khái niệm về cách sử dụng
Đường dẫn file trong HTML, link Ảnh tuyệt đối và tương đối
Thẻ img trong HTML
Tìm hiểu Entities trong HTML
Từ khoá liên quan:

Thuộc tính class trong HTML

, HTML, thuộc tính class,

SOFT LIÊN QUAN
  • Copy HTML

    Sao chép mã nguồn HTML

    Rất ít người trong chúng ta còn xa lạ HTML, đây là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên hoặc diễn tả một trang web. Ví dụ như chỉ cần một đoạn thông tin trong bất kỳ trang web nào đó là bạn đã có thể tra ra ...

Tin Mới

  • Sự khác nhau giữa JSON và XML

    XML (Extensible Markup Language) và JSON (JavaScript Object Notation) là 2 định dạng trao đổi dữ liệu phổ biến nhất hiện nay. So sánh JSON và XML, sự khác nhau giữa JSON và XML là gì? Cùng theo dõi bài viết dưới đây để tìm hiểu nhé.

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Hướng dẫn trình bày văn bản chuẩn, soạn thảo văn bản hành chính đúng

    Soạn thảo văn bản là công việc quen thuộc thường ngày của dân văn phòng. Tuy nhiên việc trình bày văn bản sao cho đúng, chuẩn với quy định thì không


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá