BÀI 16. ĐỊNH DẠNG KHUNG
1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN
Phần tử khối (Block-level elements):
- Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng ngang của trang (hoặc phần tử chứa nó).
Phần tử nội tuyến (Inline-level elements):
- Không bắt đầu dòng mới, chỉ chiếm chiều rộng vừa đủ với nội dung của nó và nằm cùng dòng với các phần tử khác.
Chuyển đổi loại phần tử bằng thuộc tính display:
- display: block; (Chuyển thành khối).
- display: inline; (Chuyển thành nội tuyến).
- display: none; (Ẩn phần tử).
2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS
Mỗi phần tử HTML được bao quanh bởi một "cái hộp" hình chữ nhật gồm các lớp từ trong ra ngoài: Nội dung -> Vùng đệm -> Khung viền -> Lề.
Các thành phần của khung (Box Model):
- Content (Nội dung): Vùng chứa văn bản hoặc hình ảnh.
- Padding (Vùng đệm): Khoảng cách từ nội dung đến đường viền khung.
- Border (Khung/Viền): Đường viền bao quanh nội dung và vùng đệm.
- Margin (Lề khung): Khoảng cách từ đường viền ra các phần tử xung quanh bên ngoài.
Các thuộc tính kích thước (Chỉ áp dụng hiệu quả cho phần tử khối):
- width: Thiết lập chiều rộng.
- height: Thiết lập chiều cao.
Các thuộc tính đường viền:
- border-color: Màu của viền.
- border-width: Độ dày của viền.
- border-style: Kiểu đường viền (solid: liền, dotted: chấm, dashed: gạch đứt...).
- border (Viết gộp): Thiết lập đồng thời độ dày, kiểu và màu.
3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS
a) Thiết lập bộ chọn là một lớp (Class Selector)
- Dùng để định dạng cho một nhóm các phần tử có cùng ý nghĩa hoặc kiểu dáng.
- Khai báo trong CSS bằng dấu chấm (.).
b) Thiết lập bộ chọn riêng cho từng phần tử (ID Selector)
- Dùng để định dạng cho một phần tử duy nhất (mã định danh ID là độc nhất trong trang).
- Khai báo trong CSS bằng dấu thăng (#).
c) Thiết lập bộ chọn thuộc tính CSS
Dùng để định dạng các phần tử dựa trên thuộc tính cụ thể của thẻ HTML đó.
Lưu ý quy tắc đặt tên (cho ID và Class):
- Có phân biệt chữ hoa, chữ thường.
- Không bắt đầu bằng số.
- Không chứa dấu cách.
