HTML The class Attribute - Thuộc tính Class trong HTML
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.
Sử dụng thuộc tính 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:
ví dụ
<!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
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 Class trên các thành phần Inline
Thuộc tính HTML class cũng có thể được sử dụng trên các thành phần inline:
ví dụ
<!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.
Chọn các thành phần với một Class cụ thể
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:
ví dụ
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
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Các Class đa dạng
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.
ví dụ
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 có thể chia sẻ một Class
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:
ví dụ
<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>
Sử dụng thuộc tính Class trong JavaScript
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() :
ví dụ
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
Tags: