BÀI 16 – ĐỊNH DẠNG KHUNG BẰNG CSS

1. Phân loại phần tử khối và nội tuyến

• Phần tử khối (block): Chiếm toàn bộ chiều ngang, thường bắt đầu từ dòng mới. Ví dụ: <div>, <p>, <h1>.
• Phần tử nội tuyến (inline): Chỉ chiếm không gian nội dung, nằm trong dòng. Ví dụ: <span>, <em>, <strong>.

• Có thể thay đổi loại phần tử bằng thuộc tính display:

  display: 
• block: chuyển sang phần tử khối
• display: inline: chuyển sang nội tuyến
• display: none: ẩn phần tử

2. Thiết lập định dạng khung bằng CSS

• CSS cho phép định dạng khung viền bằng các thuộc tính như:
• border: viền
• border-width, border-style, border-color
• padding: khoảng cách giữa viền và nội dung
• margin: khoảng cách ngoài viền
• Lưu ý: Các thuộc tính khung không có tính kế thừa.

3. Một số bộ chọn đặc biệt của CSS

a) Bộ chọn theo lớp (class)

• Dùng để định dạng nhiều phần tử có cùng chức năng hoặc ý nghĩa.
• Khai báo: .ten_lop {…}
• Gắn vào phần tử: class="ten_lop"

b) Bộ chọn theo mã định danh (id)

• Dùng để định dạng một phần tử duy nhất.
• Khai báo: #ten_id {…}
• Gắn vào phần tử: id="ten_id"

c) Bộ chọn thuộc tính

• Dùng để định dạng phần tử dựa trên thuộc tính cụ thể.
• Ví dụ: input[type="text"] {…} định dạng ô nhập liệu văn bản.

Lưu ý khi đặt tên class và id:

• Phân biệt chữ hoa – thường.
• Không bắt đầu bằng số, không chứa khoảng trắng hay ký tự đặc biệt.
• Một phần tử có thể thuộc nhiều lớp (cách nhau bởi dấu cách).