Giáo án tích hợp AI Tin học 12 THUD Bài 16: Định dạng khung
Giáo án điện tử Tin học 12 (Định hướng TH ứng dụng) Bài 16: Định dạng khung. Sách kết nối tri thức mới nhất cho năm học 2026 - 2027. Có tích hợp video AI, điều chỉnh cấu trúc, kiến thức phù hợp với năm học mới để tạo ra một bản powerpoint hoàn thiện và chất lượng. Thầy/cô chỉ cần tải về và giảng dạy. Có thể chỉnh sửa dễ dàng.
=> Giáo án điện tử Tin học 12 TH ứng dụng Kết nối tri thức (Tích hợp video AI)
Các tài liệu bổ trợ
BÀI 16: ĐỊNH DẠNG KHUNG
I. NỘI DUNG CHI TIẾT BÀI HỌC
Phân loại phần tử khối và nội tuyến Các thẻ HTML được chia thành hai loại: khối (block level) và nội tuyến (inline level). Phần tử khối bắt đầu đầu dòng và kéo dài hết chiều rộng trang. Phần tử nội tuyến được nhúng trong một phần tử khác. Thuộc tính display cho phép thay đổi loại phần tử với các giá trị block, inline, none. Giá trị none giúp ẩn phần tử.
Thiết lập định dạng khung bằng CSS Các thông số chính của khung gồm: phần nội dung, vùng đệm (padding), khung (border), lề khung (margin). Bảng thông số khung:
width: Chiều rộng khung (chỉ áp dụng cho phần tử khối).
height: Chiều cao khung (chỉ áp dụng cho phần tử khối).
padding: Vùng đệm, khoảng cách từ nội dung đến đường viền.
margin: Lề khung, khoảng cách từ đường viền đến phần tử xung quanh.
border: Thiết lập đường viền (màu, độ dày, kiểu).
Bộ chọn đặc biệt của CSS Bộ chọn class: Định dạng nhóm phần tử có cùng ý nghĩa, cú pháp là .classname {thuộc tính: giá trị;}. Bộ chọn id: Định dạng cho duy nhất một phần tử, cú pháp là #idname {thuộc tính: giá trị;}. Bộ chọn thuộc tính: Định dạng các phần tử dựa trên thuộc tính cụ thể, cú pháp là [attribute] {thuộc tính: giá trị;}.
II. KIẾN THỨC TRỌNG TÂM
Phân biệt phần tử khối và nội tuyến là cơ sở để bố cục trang web.
Thuộc tính display dùng để thay đổi bản chất hiển thị của thẻ HTML.
Các thuộc tính về khung (width, height, padding, margin, border) giúp kiểm soát không gian hiển thị.
Các thuộc tính khung không có tính kế thừa.
Sử dụng class, id và bộ chọn thuộc tính giúp định dạng linh hoạt cho các phần tử cụ thể.
III. BỐ CỤC SLIDE PPTX
Slide 1: ĐỊNH DẠNG KHUNG Chủ đề 4, Bài 16
Slide 2: PHÂN LOẠI PHẦN TỬ Khối (block) và nội tuyến (inline) và cách dùng thuộc tính display
Slide 3: CÁC THÔNG SỐ KHUNG Nội dung, vùng đệm (padding), khung (border) và lề (margin)
Slide 4: THUỘC TÍNH KHUNG CSS Sử dụng width, height, padding, margin và border để định dạng
Slide 5: BỘ CHỌN CLASS VÀ ID Định dạng nhóm (class) hoặc phần tử đơn nhất (id)
Slide 6: BỘ CHỌN THUỘC TÍNH Định dạng phần tử dựa trên các thuộc tính của thẻ HTML