Bạn đang xem : một lớp làm gì trong html

HTML

class Thuộc tính

Thuộc tính HTML class
được sử dụng để chỉ định một lớp cho một phần tử HTML.

Nhiều phần tử HTML có thể chia sẻ cùng một lớp.

Sử dụng Thuộc tính lớp

Thuộc tính class thường được sử dụng để trỏ
đến một tên lớp trong một biểu định kiểu. Nó cũng có thể được sử dụng bởi JavaScript để truy cập và
thao tác các phần tử với tên lớp cụ thể.

Trong ví dụ sau, chúng ta có ba phần tử & lt; div & gt;
với thuộc tính class với giá trị là
“thành phố”. Cả ba & lt; div & gt;
các phần tử sẽ được tạo kiểu như nhau theo . city
định nghĩa phong cách trong phần đầu:

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.city {
background-color: cà chua;
màu: trắng;
border: 2px màu đen đặc;
margin: 20px;
padding: 20px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; div class = “city” & gt;

& lt; h2 & gt; London & lt; / h2 & gt;
& lt; p & gt; London là thủ đô của nước Anh. & lt; / p & gt;
& lt; / div & gt;

& lt; div class = “city” & gt;

& lt; h2 & gt; Paris & lt; / h2 & gt;
& lt; p & gt; Paris là thủ đô của Pháp. & lt; / p & gt;
& lt; / div & gt;

& lt; div class = “thành phố” & gt;

& lt; h2 & gt; Tokyo & lt; / h2 & gt;
& lt; p & gt; Tokyo là thủ đô của Nhật Bản. & lt; / p & gt;
& lt; / div & gt;

& lt; / body & gt ;
& lt; / html & gt;


Hãy tự mình thử »

Trong ví dụ sau, chúng tôi có hai phần tử & lt; span & gt;
với thuộc tính class với giá trị là
“Ghi chú”. Cả & lt; span & gt;
các phần tử sẽ được tạo kiểu như nhau theo . note
định nghĩa phong cách trong phần đầu:

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.note {
font-size: 120%;
color: red;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

Xem Thêm  Sự khác biệt giữa Phông chữ, Kiểu chữ và Họ Phông chữ là gì? - phông chữ và họ phông chữ

& lt; h1 & gt; My & lt; span class = “note” & gt; important & lt; / span & gt; Tiêu đề & lt; / h1 & gt;
& lt; p & gt; Đây là một số & lt; span class = “note” & gt; quan trọng & lt; / span & gt; text. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;


Hãy tự mình thử »

Mẹo: Thuộc tính class có thể được sử dụng trên bất kỳ phần tử HTML nào.

Lưu ý: Tên lớp có phân biệt chữ hoa chữ thường!

Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi.

Cú pháp cho lớp

Để tạo một lớp học; viết một ký tự dấu chấm (.), theo sau là một
tên lớp.
Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}:

Ví dụ

Tạo một lớp có tên “thành phố”:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.city {
background-color: cà chua;
color: white;
padding: 10px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; h2 class = “city” & gt; London & lt; / h2 & gt;
& lt; p & gt; London là thủ đô của nước Anh. & lt; / p & gt;

& lt; h2 class = “city” & gt; Paris & lt; / h2 & gt;
& lt; p & gt; Paris là thủ đô của Pháp. & lt; / p & gt;

& lt; h2 class = “city” & gt; Tokyo & lt; / h2 & gt;
& lt; p & gt; Tokyo là thủ đô của Nhật Bản. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;


Hãy tự mình thử »

Nhiều lớp

Các phần tử HTML có thể thuộc về nhiều lớp.

Để xác định nhiều lớp, hãy tách tên lớp bằng một khoảng trắng, ví dụ: & lt; div
class = “city main” & gt ;. Phần tử sẽ được tạo kiểu theo tất cả
các lớp được chỉ định.

Trong ví dụ sau, phần tử & lt; h2 & gt; đầu tiên thuộc về cả
lớp
thành phố và cả lớp main ,
và sẽ nhận được các kiểu CSS từ cả hai lớp:

Xem Thêm  Bảng màu - màu ô bảng html

Các phần tử khác nhau có thể chia sẻ cùng một lớp

Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp.

Trong ví dụ sau, cả & lt; h2 & gt; & lt; p & gt;
chỉ vào lớp “thành phố”
và sẽ chia sẻ cùng một phong cách:

Ví dụ

& lt; h2 class = “city” & gt; Paris & lt; / h2 & gt;
& lt; p
class = “city” & gt; Paris là thủ đô của Pháp & lt; / p & gt;


Hãy tự mình thử »

Sử dụng Thuộc tính lớp trong JavaScript

Tên lớp cũng có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho
các yếu tố cụ thể.

JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức getElementsByClassName () :

Ví dụ

Nhấp vào nút để ẩn tất cả các phần tử có tên lớp
“thành phố”:

& lt; script & gt;
function myFunction () {
var x = document.getElementsByClassName (“city”) ;
for (var i = 0; i & lt; x. chiều dài;
i ++) {
x [i] .style.display = “none”;
}
}
& lt; / script & gt;


Hãy tự mình thử »

Đừng lo lắng nếu bạn không hiểu mã trong ví dụ trên.

Bạn sẽ tìm hiểu thêm về JavaScript trong chương HTML JavaScript của chúng tôi hoặc bạn có thể nghiên cứu
Hướng dẫn JavaScript .

Tóm tắt chương

  • Thuộc tính HTML class chỉ định một hoặc
    các tên lớp khác cho một phần tử
  • Các lớp được CSS và JavaScript sử dụng để chọn và truy cập vào các lớp cụ thể
    phần tử
  • Thuộc tính class có thể được sử dụng trên bất kỳ
    Phần tử HTML
  • Tên lớp có phân biệt chữ hoa chữ thường
  • Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp
  • JavaScript có thể truy cập các phần tử có tên lớp cụ thể với getElementsByClassName ()
    phương pháp

Bài tập HTML

Tự kiểm tra bằng các bài tập

Bài tập:

Tạo một bộ chọn lớp có tên “đặc biệt”.

Thêm thuộc tính màu với giá trị “blue” bên trong lớp “đặc biệt”.

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; đầu & gt;

& lt; phong cách & gt;

;

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; p class = “special” & gt; Đoạn văn của tôi & lt; / p & gt;

Xem Thêm  Cách ném ngoại lệ trong Python - python ném ngoại lệ với tin nhắn

& lt; / body & gt;

& lt; / html & gt;

Bắt đầu bài tập


Xem thêm những thông tin liên quan đến chủ đề một lớp làm gì trong html

Học lập trình Web A-Z – HTML – Bài 1 làm quen với HTML và một số thẻ HTML cơ bản

  • Tác giả: Thư Viện Lập Trình – TIP & STORY
  • Ngày đăng: 2016-12-19
  • Đánh giá: 4 ⭐ ( 6496 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ADMIN đã chuyển qua kênh mới: THƯ VIỆN LẬP TRÌNH – EDU
    https://www.youtube.com/channel/UCdFgDwwUC_D_Bd1vUDEMBtA
    Các videos đào tạo sẽ chỉ đăng mới ở kênh mới ! Kênh cũ này sẽ sử dụng đăng thủ thuật và các câu chuyện nghành nghề công nghệ.

&nbsp là gì? Cách tạo khoảng cách (khoảng trắng) trong html

  • Tác giả: gbaydev.com
  • Đánh giá: 4 ⭐ ( 8876 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: là gì? Cách tạo khoảng trắng (khoảng cách) trong HTML, khi nào sử dụng và không sử dụng. Click để xem ngay nha.

Thẻ radio button và checkbox trong HTML

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

Thuộc tính class trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 7477 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, thuộc tính class trong HTML dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML. Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện

Form trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 1004 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo một Email HTML đơn giản, có tính đáp ứng

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 7377 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, tôi sẽ hướng dẫn cho bạn cách để tạo ra một email HTML có tính đáp ứng cao, đơn giản mà sẽ hoạt động trong mọi ứng dụng email, bao gồm tất cả các trình đọc email và ứng dụng trên…

Sử dụng bảng và lớp trong HTML

  • Tác giả: www.voer.edu.vn
  • Đánh giá: 4 ⭐ ( 1573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng bảng và lớp trong HTML (giáo trình – tài liệu – học liệu từ VOER)

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

By ads_php