Sử dụng thuộc tính class
Thuộc tính HTML class được sử dụng để xác định các kiểu giống nhau cho phần tử có cùng tên class.
Nghĩa là mọi phần tử có cùng tên lớp sẽ có định dạng và kiểu chung.
Ví dụ ở đây chúng ta có ba phần tử < div > có cùng tên lớp.
Ví dụ
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Sử dụng thuộc tính lớp trên các phần tử nội tuyến
Thuộc tính lớp cũng có thể được sử dụng trên các phần tử nội tuyến.
Ví dụ
span.note {
font-size: 120%;
color: red;
}
My Important Heading
This is some important text.
Ghi chú. Thuộc tính lớp có thể được sử dụng trên mọi phần tử HTML. Tên lớp có phân biệt chữ hoa, chữ thường.
Element section select with the class tool
Trong CSS, để chọn phần tử với lớp cụ thể, đặt một dấu chấm [. ] trước tên lớp .
Ví dụ
Dùng CSS để định kiểu cho mọi phần tử có tên lớp là “thành phố”.
.city {
background-color: tomato;
color: white;
padding: 10px;
}
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Nhiều lớp trên một phần tử
Các phần tử HTML có thể sở hữu nhiều tên lớp , mỗi tên lớp phải được phân tách bằng khoảng trắng [dấu cách].
Ví dụ
Tạo kiểu các phần tử với tên lớp “thành phố”, và cũng tạo kiểu phần tử với tên class “main”
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
Nhiều Class
Cả ba tiêu đề đều có class tên "city". Tuy nhiên, London còn có thêm tên class "main" dùng để căn giữa văn bản
London
Paris
Tokyo
Trong ví dụ trên, phần tử < h2 > đầu tiên sở hữu cả hai lớp là “city” và “main” nên sẽ . class này.
Các thẻ khác nhau cũng có thể dùng chung tên lớp
Các thẻ khác nhau, như < h2 > và < p>, có thể tên class giống nhau, bằng cách đó chúng có cùng kiểu style.
Ví dụ
.city {
background-color: tomato;
color: white;
padding: 10px;
}
Thẻ khác nhau, nhưng cùng tên class
Kể cả nếu hai phần tử không có cùng tên thẻ, chúng có thể có cùng tên class, và có kiểu style giống nhau
Paris
Paris is the capital of France.
Sử dụng class thuộc tính trong JavaScript
Tên lớp cũng có thể được sử dụng bởi JavaScript để thực hiện các tác vụ nhất định cho phần tử với tên class cụ thể.
JavaScript có thể truy cập các phần tử với tên lớp cụ thể bằng phương thức getElementsByClassName[].
Ví dụ
Khi người dùng nhấp vào nút sẽ ẩn mọi phần tử có tên lớp là “thành phố”
Sử dụng thuộc tính class trong JavaScript
Nhấn vào nút "Hide elements" để ẩn mọi phần tử có tên class là "city"
Hide elements
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
function myFunction[] {
var x = document.getElementsByClassName["city"];
for [var i = 0; i < x.length; i++] {
x[i].style.display = "none";
}
}
Trích nguồn từ. [https. //www. w3schools. com/html/html_classes. asp]