- Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
- Đăng Nhập
Thuộc tính class trong HTML được dùng để định nghĩa các phong cách giống nhau cho các thành phần với cùng một tên class.
Toàn bộ các thành phần với cùng một thuộc tính class sẽ có chung một phong cách.
Ở đây chung ta có ba thành phần <div> trỏ đến cùng một tên class:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Kết quả
London is the capital of England.
Paris is the capital of France.
Tokyo is the capital of Japan.
Thuộc tính HTML class cũng có thể được sử dụng trên các thành phần inline:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Tip: Thuộc tính class có thể được sử dụng trên bất kì thành phần HTML nào.
Ghi chú: Tên Class phân biệt hoa thường!
Tip: Bạn có thể học thêm nhiều hơn nũa về CSS trong hướng dẫn CSS.
Trong CSS, để chọn các thành phần với một class cụ thể, viết một dấu chấm(.), tiếp theo là tên của class:
Sử dụng CSS để tạo kiểu cho toàn bộ các thành phần với tên class là "city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p><!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Kết quả:
London is the capital of England.
Paris is the capital of France.
Tokyo is the capital of Japan.
Các thành phần HTML có thể có nhiều hơn một tên class, mỗi tên class phải được ngăn cách bởi một khoảng trắng.
Tạo kiểu cho các thành phần có tên class là "city", đồng thời tạo kiểu cho các thành phần có tên là "main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2><!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
<body>
<h2>Multiple Classes</h2>
<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Trong ví dụ trên, thành phần <h2> đầu tiền thuộc về cả class "city" và class "main".
Các thẻ khác nhau, như <h2> và <p>, có thể có chung một tên class và qua đó chia sẻ cùng một phong cách:
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p><!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class, Different Tag</h2>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
Tên class cũng có thể được sử dụng bởi JavaScript để thực hiện các nhiệm vụ nhất định, trên các thành phần với tên class cụ thể.
JavaScript có thể truy cập vào các thành phần với một tên class cụ thể bằng cách sử dụng phương thức getElementsByClassName() :
Khi một người dùng bấm vào một nút, giấu toàn bộ các thành phần với tên class là "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script><!DOCTYPE html>
<html>
<body>
<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>Đừng lo nếu bạn không hiểu code trong ví dụ trên.
Bạn sẽ được học thêm về JavaScript trong chương HTML JavaScript, hoặc bạn có thể học hướng dẫn về JavaScript
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website