Bộ chọn Class trong CSS
Trong CSS, Class được sử dụng để định kiểu cho phần tử với class được chỉ định. Class thường được dùng cho các đối tượng nhóm muốn có cùng một thuộc tính định dạng, mỗi tên class có thể được sử dụng với nhiều phần tử.
Để khai báo Class trong CSS, ta dùng cú pháp sau:
.ten_class {
định dạng các thuộc tính CSS
}
Ví dụ:
.quantrimang {
background-color: black;
color: white;
font-size: 20px;
Để xác định phần tử HTML bằng tên class, ta sử dụng cú pháp class="ten_class"
.
Ví dụ:
<p class="quantrimang">Website Quản Trị Mạng</p>
Lưu ý:
- Class có thể dùng với bất kì phần tử HTML nào.
- Tên class chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới
_
, dấu gạch nối-
. Tên class không nên bắt đầu bằng chữ số. - Tên class có phân biệt giữa chữ viết hoa và viết thường.
Ví dụ 1: Chọn và định kiểu tất cả các phần tử với class = "intro":
.intro {
background-color: #58257b;
color: white;
}
Kết quả:
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: #58257b;
color: white;
}
</style>
</head>
<body>
<h1>Chào mừng bạn đến với Website Quản Trị Mạng</h1>
<div class="intro">
<p>Chuyên mục Làng Công nghệ.</p>
<p>Công nghệ</p>
</div>
<p>Giới thiệu về Quản Trị Mạng</p>
</body>
</html>
Ví dụ 2: Định kiểu cho tất cả các phần tử <p> với class = "hometown" (chỉ áp dụng cho <p>)
p.hometown {
background: #58257b;
color: white;
}
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown {
background: #58257b;
color: white;
}
</style>
</head>
<body>
<h2 class="hometown">Chào mừng bạn đến với Website Quản Trị Mạng</h2>
<p>Chuyên mục Làng Công nghệ</p>
<p class="hometown">Chuyên mục Công nghệ</p>
<p>Chuyên mục Khoa học</p>
<p class="hometown">Chuyên mục Ứng dụng</p>
</body>
</html>
Ví dụ 3: Một phần tử có thể có nhiều class
<p class="center large">Phần tử có 2 class kết hợp</p>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h3 class="center">Heading này không bị ảnh hưởng bởi class center</h3>
<p class="center">Đoạn này sẽ được căn giữa và có màu đỏ</p>
<p class="center large">Đoạn này sẽ được căn giữa, có màu đỏ và kích thước
font chữ rất to</p></body>
</html>
Xem thêm:
Bạn nên đọc
-
Tìm hiểu sâu về Color trong CSS
-
Cách tạo hiệu ứng khi rê chuột qua (hover) bằng CSS
-
Icon trong CSS
-
TOP code CSS xếp hạng sao (Star Rating) đẹp cho website
-
Thuộc tính Display (inline-block) trong CSS
-
Sử dụng Web Font trong CSS
-
Căn chỉnh - Align trong CSS
-
Thiết kế Layout - Bố cục website trong CSS
-
Cách tạo hiệu ứng đánh máy bằng CSS
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Mảng trong Python
Hôm qua -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2