BÀI 16. ĐỊNH DẠNG KHUNG
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12
BÀI 16. ĐỊNH DẠNG KHUNG
Ảnh
Khởi động
Khởi động
Ảnh
Hình vẽ
- Khởi động:
Trên một số trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện không?
1. Phân loại phần tử khối và nội tuyến
Phân loại phần tử khối và nội tuyến
Ảnh
1. Phân loại phần tử khối và nội tuyến
- Hoạt động 1
- HĐ1: Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến
Hình vẽ
Ảnh
Quan sát cách tô màu nên của hai phần tử trên trang web trong Hình 16.1, em có nhận xét gì?
Ảnh
Ảnh
- Nhiệm vụ 1
Ảnh
Hình vẽ
- Nhiệm vụ 1: Thảo luận nhóm và trả lời câu hỏi:
Các phần tử HTML được chia làm mấy loại? Phần tử nội tuyến là gì? Phân loại phần tử CSS.
- Câu hỏi củng cố
- Câu hỏi củng cố:
Ảnh
Hình vẽ
1. Chiều rộng của các phần tử nội tuyến phụ thuộc vào những yếu tố nào? Có phụ thuộc vào chiều rộng cảu cửa sổ trình duyệt không? 2. Khẳng định “Chiều rộng của các phần tử khối chỉ phụ thuộc vào kích thước cửa sổ trình duyệt” là đúng hay sai?
- Kết luận
Ảnh
Hình vẽ
- Kết luận:
Các thẻ (hay phần tử) HTML được chia làm hai loại: khối (block level) và nội tuyến (inline). Phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Ví dụ, dòng chữ "Thư Bác Hồ gửi học sinh" được thể hiện ở dạng khối. Phần tử nội tuyến là các phần tử nhúng bên trong một phần tử khác.
Ví dụ: cụm từ Việt Nam là một phần tử nội tuyến, được nhúng trong phần tử p.
+ tiếp
Hình vẽ
- Kết luận:
Mặc định, các phần tử HTML sẽ thuộc một trong hai loại này, như được trình bày trong Bảng 16.1.
Ảnh
Chúng ta có thể thay đổi loại phần tử HTML bằng thuộc tính display. Các giá trị của thuộc tính này bao gồm block, inline, none. Giá trị none sẽ làm ẩn (không hiển thị) phần tử này trên trang web.
- Ví dụ
Ảnh
- Ví dụ:
+ CSS đổi lại phần tử span từ dạng mặc định là inline sang block.
+ Kết quả áp dụng mẫu CSS trên được minh hoạ trong Hình 16.2.
Ảnh
2. Thiết lập định dạng khung bằng CSS
Thiết lập định dạng khung bằng CSS
Ảnh
2. Thiết lập định dạng khung bằng CSS
- Hoạt động 2
- HĐ2: Tìm hiểu cách thiết lập định dạng khung cho các phần tử
Hình vẽ
Ảnh
Quan sát Hình 16.3 để biết các thông số chính của khung của phần tử HTML để có thể hiểu được cách thiết lập khung, viền bằng CSS.
Ảnh
- Nhiệm vụ 2
Ảnh
Hình vẽ
- Nhiệm vụ 2: Thảo luận nhóm và trả lời câu hỏi:
Cho biết các thuộc tính liên quan đến khung của một phần tử HTML.
- Câu hỏi củng cố
- Câu hỏi củng cố:
Ảnh
Hình vẽ
1. Trong các thuộc tính khung của một phần tử HTML, khoảng cách tử vùng văn bản đến đường viện khung được gọi là gì? 2. Lề khung khác gì với vùng đệm?
- Kết luận
Ảnh
Hình vẽ
- Kết luận:
Phần tử khối: Khung được xác định với đầy đủ tính chất. Phần tử nội tuyến: Khung chỉ có thể thiết lập mà không có các thông số chiều cao và chiều rộng.
Cần phân biệt hai loại phần tử HTML:
- Lưu ý
- Lưu ý:
Ảnh
Ảnh
- Ví dụ
Ảnh
- Ví dụ:
Ảnh
3. Một số bộ chọn đặc biệt của CSS
Một số bộ chọn đặc biệt của CSS
Ảnh
3. Một số bộ chọn đặc biệt của CSS
- Hoạt động 3
- HĐ3: Tìm hiểu một số cách thiết lập các bộ phận chọn đặc biệt khác:
Hình vẽ
Ảnh
Thảo luận, tìm hiểu thêm cách thiết lập bộ chọn đặc biệt của CSS và trả lời các câu hỏi sau:
Ảnh
1. Có thể đặt mẫu định dạng cho các thẻ với thuộc tính cho trước được không? 2. Có thể thiết lập các mẫu định dạng khác nhau cho cùng một loại phần tử giống nhau được không? Nếu có thì thực hiện bằng cách nào?
- Câu hỏi củng cố
- Câu hỏi củng cố:
Ảnh
Hình vẽ
1. Nêu sự khác biệt cơ bản giữa thuộc tính id và class của các phần tử HTML. 2. Mỗi bộ chọn sau có ý nghĩa gì? a) div#bat_dau >p b) p.test em#p123
a. Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau:
a. Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau:
- Cấu trúc chung của định dạng CSS liên quan đến lớp như sau:
Ảnh
- Ví dụ: Một số bộ chọn lớp CSS:
Ảnh
Ảnh
+ Bảng 16.3
a. Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau:
Ảnh
Ảnh
b. Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id
b. Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id
- CSS cho phép thiết lập các mẫu định dạng với các phần tử có id tương ứng như sau
- Ví dụ: Một số mẫu định dạng ID như sau:
Ảnh
Ảnh
Ảnh
c. Thiết lập bộ chọn thuộc tỉnh CSS
c. Thiết lập bộ chọn thuộc tỉnh CSS
Một tính chất quan trọng khác của CSS là có thể thiết lập bộ chọn là thuộc tính. Các định dạng này sẽ được thiết lập và áp dụng cho các phần tử nếu được gắn với thuộc tính cụ thể nào đó.
Ảnh
Ví dụ:
Ảnh
+ Lưu ý
Ảnh
- Lưu ý:
Khi đặt tên cho id và class:
Tên của id và class phân biệt chữ in hoa, in thường. Tên bắt buộc phải có ít nhất một kí tự không là số, không bắt đầu bằng số, không chứa dấu cách và các kí tự đặc biệt khác. Một phần tử có thể thuộc nhiều lớp khác nhau. Để khai báo, chúng ta đặt các tên lớp cách nhau bởi dấu cách.
4. Thực hành
Thực hành
Ảnh
4. Thực hành
- Nhiệm vụ: Tạo trang web
- Nhiệm vụ: Tạo trang web
+ Yêu cầu:
Ảnh
Tạo trang web mô tả bảng 16 tên màu cơ bản CSS như Hình 16.5.
+ Hướng dẫn
+ Hướng dẫn:
Ảnh
Bước 1. Thiết lập trang web theo nội dung như Hình 16.5. Sử dụng các thẻ để thiết lập bảng. Tên bảng được thiết lập bằng thẻ ... và ô của bảng thiết lập bằng thẻ . Riêng các ô tiêu đề (hàng thứ nhất) sẽ sử dụng thẻ . Lưu ý các ô cuối của mỗi hàng cần được thiết lập màu nền theo đúng thông số màu đã ghi tại cột 1 hoặc cột 2. Bước 2. Thiết lập mẫu CSS để tạo khuôn khung, viền cho bảng.
5. Luyện tập và vận dụng
Luyện tập và Vận dụng
Ảnh
5. Luyện tập và Vận dụng
- Luyện tập
Ảnh
- Luyện tập:
1. Phần tử html có thể ẩn đi trên trang web được không? Nếu có thì dùng lệnh CSS gì? 2. Hãy giải thích ý nghĩa định dạng sau:
Ảnh
- Vận dụng
Ảnh
- Vận dụng:
1. Giả sử ND trang web của em có rất nhiều thẻ p, trong đó có ba đoạn mà em thấy quan trọng nhất, kí hiệu các đoạn này là P1, P2, P3. Có cách nào thiết lập định dạng CSS để có thể định dạng P1 khác biệt, P2 và P3 có cùng kiểu và cũng khác biệt không? Tất cả các đoạn còn lại có định dạng giống nhau. Hãy nêu cách giải quyết vấn đề của em. 2. Có thể thiết lập định dạng cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau được không? Tìm hiểu và trình bày cách thiết lập định dạng CSS cho các khung, viền như vậy.
Tổng kết
Tổng kết
Ảnh
Tổng kết:
Ôn lại kiến thức vừa học. Hoàn thành bài tập trong SBT. Chuẩn bị bài sau: "Bài 17. Các mức ưu tiên của bộ chọn".
Cảm ơn
Ảnh