TRANG CHỦ

Tin học 12 - Bài 16: Định dạng khung (CSS)

Bài học tập trung vào box model trong CSS, cách phân biệt phần tử khối và nội tuyến, và các bộ chọn đặc biệt để áp dụng định dạng khung linh hoạt, chính xác.

Mục tiêu

  • Dùng CSS định dạng khung (box model): margin, border, padding, width/height.
  • Áp dụng CSS cho nhiều bộ chọn: thẻ, class, id, thuộc tính; phân biệt khối (block) và nội tuyến (inline).
box model block inline selector

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

  • Khối (block): chiếm trọn chiều ngang, thường xuống dòng mới; ví dụ: h1–h6, p, div, section, ul/ol/li, table.
  • Nội tuyến (inline): nằm trong dòng, chỉ chiếm nội dung; ví dụ: span, a, img, em, strong.
  • Thuộc tính display đổi loại hiển thị: block | inline | none.
Gợi ý: Có thể chuyển span từ inline sang block bằng display: block để áp dụng kích thước rõ ràng.

2. Thiết lập định dạng khung (CSS Box Model)

  • Thành phần khung: content → padding → border → margin.
  • Kích thước: width, height (áp dụng tốt cho phần tử khối).
  • Đệm: padding (khoảng cách nội dung ↔ viền).
  • Lề: margin (khoảng cách viền ngoài ↔ xung quanh).
  • Viền: border-width | border-style | border-color hoặc rút gọn border.
Ví dụ:
  • h1 { border: 5px ridge blue; width: 200px; padding: 10px; margin: 20px; }
  • em { border: 2px double red; }
Ghi nhớ: thuộc tính khung không kế thừa; nội tuyến không đặt width/height hữu hiệu như khối.

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

a) Class (.ten)

  • Gán cho nhiều phần tử; một phần tử có thể có nhiều class.
  • Ví dụ: .test, .test.warning, p.test.

b) ID (#ten)

  • Duy nhất trong trang; dùng khi cần định dạng riêng cho một phần tử.
  • Ví dụ: #home { color: red; }, p#home { font-size: 150%; }.

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

  • Áp dụng theo tên/giá trị thuộc tính HTML.
  • Ví dụ: [href] { border: 1px solid blue; }, a[target="_blank"] { color: red; font-weight: bold; }.
Quy tắc đặt tên: phân biệt hoa–thường; không bắt đầu bằng số; không chứa khoảng trắng/ký tự đặc biệt.

4. Thực hành – Luyện tập – Vận dụng

  • Thực hành: tạo bảng 16 tên màu CSS bằng table/caption/tr/th/td và định dạng khung/viền cho bảng & ô.
  • Luyện tập: ẩn phần tử bằng display: none; giải thích bộ chọn nhóm .test .test_more { background-color: red; }.
  • Vận dụng: định dạng 3 đoạn p quan trọng: P1 khác biệt, P2 & P3 cùng kiểu (dùng id cho P1, class cho P2 & P3).
  • Thiết lập khung/viền khác nhau cho từng phía (trái/phải/trên/dưới) bằng margin-*/padding-*/border-*.
margin padding border display