Selector Css là tập hợp các các thẻ html được cụ thể để phục vụ cho việc định dạng hiển thị nó theo cách mình mong muốn qua các thuộc tính css.
Giả sử chúng ta có đoạn mã html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selector</title>
</head>
<body>
<h1>Tiêu đề nội dung</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores est ipsam maiores odio quibusdam
similique vitae. Ab, cum, ducimus.</p>
</body>
</html>
Bây giờ tôi muốn thiết lập tiêu đề có màu đỏ và font-size 20px thì việc đầu tiên cần làm là xác định ra thẻ mình cần định dạng.
Tất nhiên ở ví dụ này nó chính là thẻ h1, sau đó chúng ta tiến hành viết code css.
<style>
h1 {
color: red;
}
</style>
Ok, qua ví dụ trên chắc bạn cũng đã hiểu cơ bản về Selector Css rồi đúng không? bây giờ chúng ta qua phần mới…
Một số selector css thường dùng
#1. Selector là một thẻ html(element html selector)
Đây là bộ chọn được xác định bằng việc chỉ cần gọi tên thẻ cần định dạng, ví dụ như h2, p, img…
h1 {
color: red;
}
p{
font-style: italic;
color: orange;
}
#2. Selector là một id(id selector)
Chắc bạn đang băn khoăn id là gì đúng không?
Id đơn giản là một nhãn để định danh cách phần tử trong html của website. Ví dụ trong website tôi thường bố cục các phần định danh như #wrapper, #header, #content, #footer.
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
</div>
<div id="footer">
FOOTER
</div>
</div>
Bây giờ có yêu cầu cần cho phần header website có background màu cam chúng ta làm như sau.
#header{
background: orange;
}
Lưu ý khi viết id selector cần có ký tự # đằng trước tên của id muốn định dạng, ví dụ #header, #footer.
#idname{}
#3. Selector là một Class(Class selector)
Bạn hãy tưởng tượng trong website có nhiều khu vực trên layout cùng sử dụng một hoặc một tập hợp định dạng css nào đó. Để tối ưu thay vì mình phải style css nhiều lần cho từng đối tượng thì giờ đây chúng ta hoàn toàn tạo ra những class chuyên thực hiện một nhiệm vụ nào đó.
Ví dụ class định dạng căn giữa một đoạn văn bản.
.text-center{
text-align: center;
}
Css in đậm văn bản
.font-weight-bold{
font-weight: bold;
}
Tương tự như vậy chúng ta có thể tạo ra rất nhiều class khác nhau phục vụ cho những nhóm định dạng nhất định. Khi cần dùng chúng ta chỉ cần dán css đó vào thẻ html cần làm việc.
<p class="text-center font-weight-bold">Lorem ipsum dolor sit amet.</p>
Bạn lưu ý class selector được bắt đầu bởi ký tự . và theo sau nó là tên class
.classname{}
Tổng kết
Thông qua bài viết này tôi giới thiệu đến bạn 3 bộ chọn quan trọng trong quá trình style css đó là element html selector, class selector, id selector. Ngay bây giờ bạn nên ghi chú lại những thứ quan trọng và thực hành lại để nắm chắc bài học này. Bạn hãy nhớ Selector chính là tập hợp những phần tử được chọn để phục vụ cho định dạng css.
Xin chào, sớm hẹn gặp lại!