CHỦ ĐỀ F. BÀI 9. THỰC HÀNH ĐỊNH DẠNG MỘT SỐ THUỘC TÍNH CSS
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 9. THỰC HÀNH ĐỊNH DẠNG MỘT SỐ THUỘC TÍNH CSS
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Khai báo được bộ chọn phần tử. Sử dụng được internal CSS, external CSS. Sử dụng được một số thuộc tính CSS.
NV1. Khai báo và áp dụng định dạng internal CSS
Tìm hiểu
Nhiệm vụ1. Khai báo và áp dụng định dạng internal CSS
Yêu cầu: Khai báo định dạng internal CSS cho văn bản HTML “Bai7-NV1.html” mà em đã hoàn thành ở Bài 7 để được trang web như Hình 1.
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Mở tệp HTML “Bai7-NV1.html”, ghi lưu với tên mới “Bai9-NV1.html”. Bước 2. Khai báo CSS. - Trong nội dung phần tử head, khai báo cặp thẻ . - Trong nội dung phần tử style, khai báo các quy tắc định dạng sau: h2 {color: firebrick; font-family: Verdana;} h3 {color: indianred;} label {font-size: 15px; font-weight: bold;} input {background-color: yellow;} textarea {background-color: ivory;} Bước 3. Ghi lưu văn bản, mở tệp bằng trình duyệt web và quan sát kết quả.
NV2. Khai báo và áp dụng định dạng external CSS
Tìm hiểu
Nhiệm vụ 2. Khai báo và áp dụng định dạng external CSS
Yêu cầu 1: Soạn tệp “Bai9-NV2.css” gồm các quy tắc định dạng sau: – Phần tử h2 sử dụng phông chữ Verdana, chữ được tô màu firebrick. − Phần tử h3 chữ được tô màu indianred. − Phần tử label có cỡ chữ 20 pixel. – Nền của phần tử input được tô màu yellow. – Nền của phần tử textarea được tô màu ivory.
Tiếp
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bai9-NV2.css”. - Mở phần mềm Sublime Text. - Tạo tệp mới và ghi lưu với tên “Bai9-NV2.ess”. Bước 2. Khai báo định dạng CSS. h2 {color: firebrick; font-family: Verdana;} h3 {color: indianred;} label {font-size: 20px;} input {background-color: yellow;} textarea {background-color: ivory;} Bước 3. Ghi lưu tệp định dạng CSS.
Tiếp
Yêu cầu 2: Em hãy áp dụng bảng định dạng “Bai9-NV2.css” đã soạn ở Yêu cầu 1 để trình bày văn bản HTML “Bai7-NV2.html” sao cho khi mở trên màn hình trình duyệt web, kết quả hiển thị như ở Hình 2.
Hướng dẫn thực hiện: Bước 1. Mở tệp HTML “Bai7-NV2.html”, ghi lưu với tên tệp mới “Bai9-NV2.html”. Bước 2. Áp dụng định dạng external CSS. – Mở tệp “Bai9-NV2.html”. Trong nội dung phần tử head, thêm khai báo . Bước 3. Ghi lưu, mở tệp “Bai9-NV2.html” bằng trình duyệt web và quan sát kết quả.
NV3. Áp dụng bảng định dangj external CSS đã có cho văn bản HTML
Tìm hiểu
Nhiệm vụ 3. Áp dụng bảng định dangj external CSS đã có cho văn bản HTML
Yêu cầu: Áp dụng bảng định dạng “Bai9-NV2.css” đã hoàn thành ở Nhiệm vụ 2 để trình bày văn bản HTML “Bai7-NV3.html” sao cho khi mở trên trình duyệt web kết quả hiển thị như ở Hình 3.
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Mở tệp “Bai7-NV3.html”, ghi lưu với tên tệp mới là “Bai9-NV3.html”. Bước 2. Áp dụng định dạng external CSS. - Mở tệp “Bai9-NV3.html”. - Khai báo áp dụng định dạng Bai9-NV2.css trong nội dung phần tử head. Bước 3. Ghi lưu, mở tệp “Bai9-NV3.html” trên trình duyệt web và quan sát kết quả. Lưu ý: Để thêm chú thích cho các quy tắc định dạng CSS, em viết chú thích trong cặp dấu /* và */.
Vân dụng
Vận dụng
Vận dụng
Tạo website cá nhân: Em hãy hoàn thiện website cá nhân đã tạo từ các bài học trước bằng cách khai báo và áp dụng các quy tắc định dạng trình bày để các tiêu đề sử dụng phông chữ và màu sắc đa dạng. Gợi ý thực hiện – Tạo thư mục con styles trong thư mục myHomepage. – Tạo tệp mới và ghi lưu vào thư mục styles với tên “style.css”. – Khai báo các quy tắc định dạng trong tệp “style.css” để trình bày, ví dụ: tiêu đề họ sử dụng phông chữ Verdana, chữ màu đỏ; tiêu đề h2 sử dụng phông chữ Verdana, chữ màu xanh. – Bổ sung khai báo tham chiếu sử dụng external CSS vào phần tử head của các tệp: "index.html", "hobbies.html", "album.html".
Tổng kết
Kết thúc bài hoc
Ảnh