Bài F9. Một số kĩ thuật định kiểu bằng vùng chọn trong CSS
Nội dung lý thuyết
1. Khái niệm vùng chọn CSS
Khi muốn định kiểu một phần tử của tệp HTML, cần xác định phần tử đó. Vùng chọn là khung mẫu dùng để chỉ định phần tử HTML cụ thể sẽ được định kiểu. Đây là cách thức giúp áp dụng cùng một kiểu CSS cho một nhóm phần tử xác định.
Vùng chọn CSS được khai báo theo nhiều yếu tố như:
Tên phần tử: áp dụng cho tất cả các phần tử đó.
ID của phần tử: dùng
#id, chỉ định phần tử có ID cụ thể.Tên lớp: dùng
.class, chọn các phần tử có khai báo thuộc tínhclasstương ứng.
Tệp khai báo vùng chọn được đặt trong các tệp .css và được liên kết bằng thẻ <link> trong cặp thẻ <head>. Ví dụ:
<head> <link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head>
Khai báo CSS bằng vùng chọn giúp:
Tái sử dụng mã lệnh CSS, giảm trùng lặp.
Dễ sửa đổi, cập nhật kiểu dáng cho toàn trang web.
Đảm bảo sự nhất quán giao diện.
Phân chia rõ vai trò giữa HTML (cấu trúc) và CSS (hình thức).
2. Những kĩ thuật định kiểu cơ bản bằng vùng chọn
a) Định kiểu cho các phần tử cùng loại
Dùng tên phần tử làm vùng chọn.
Cú pháp:
tên-phần-tử {
thuộc_tính: giá_trị;
...
}Ví dụ 1: Định kiểu cho thẻ <div> thành màu xanh:
div {
color: #0053a0;
}b) Định kiểu cho các phần tử khác loại
Dùng tên lớp chung cho nhiều phần tử khác loại (ví dụ như <div>, <p>).
Cú pháp:
.tên-lớp {
thuộc_tính: giá_trị;
...
}Ví dụ 2: Tạo lớp chung my-class cho cả <div> và <p>:
.my-class {
color: #0053a0;
}HTML:
<div class="my-class">Nội dung của div</div> <p class="my-class">Nội dung của p</p>
Định kiểu nhiều lớp cho một phần tử:
.class-1 {
text-align: center;
}
.class-2 {
font-weight: bold;
}HTML:
<div class="class-1 class-2">Nội dung của div</div>
c) Định kiểu cho riêng một phần tử xác định
Dùng thuộc tính id, duy nhất cho một phần tử trong HTML.
Cú pháp:
#id {
thuộc_tính: giá_trị;
}Ví dụ 4: Định kiểu cho phần tử <div> có id="my-id":
#my-id {
color: red;
}HTML:
<div id="my-id">Nội dung của div</div>
