Giải Khoa học máy tính 12 Chân trời bài F7: Giới thiệu CSS

Giải bài F7: Giới thiệu CSS sách Tin học 12 theo định hướng khoa học máy tính chân trời sáng tạo. Phần đáp án chuẩn, hướng dẫn giải chi tiết cho từng bài tập có trong chương trình học của sách giáo khoa. Hi vọng, các em học sinh hiểu và nắm vững kiến thức. Giải sgk Tin học 12 Khoa học máy tính chân trời sáng tạo

B. Bài tập và hướng dẫn giải

KHỞI ĐỘNG

Trong trang web portfolio.html đã tạo ở những bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ <h1> được tô màu xanh. Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nổi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?

KHÁM PHÁ

1. Khái niệm CSS

Làm

Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.

2. Các cách bổ sung mã lệnh CSS trong trang web

Làm

Câu 1: Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixels. Gợi ý: Sử dụng thuộc tính font-size với giá trị là 60px.

Câu 2: Em hãy thay đổi màu cho riêng đề mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.

LUYỆN TẬP

Câu 1: Theo em, HTML và CSS khác nhau ở điểm nào?

Câu 2: Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.

Câu 3: Giả sử trong tệp .css, mã lệnh được viết là h1 { color: red; }, còn trong tệp html, thẻ <h1> được viết là <h1 style="color: blue">. Khi hiển thị, đề mục h1 này sẽ có màu gì?

VẬN DỤNG

Câu 1: Chèn mã lệnh CSS để định kiểu cho tên của mình trong trang web portfolio.html với màu sắc, kích thước, hiệu ứng độ bóng và khoảng cách của các kí tự tuỳ ý sao cho nổi bật và đẹp mắt.

Câu 2: Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở Thực hành  đồng thời thay đổi màu chữ thành màu trắng.

Câu 3: Chèn mã lệnh CSS để định kiểu cho các mục <li> của các danh sách <ul> sao cho:

Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.

Gợi ý: Sử dụng thuộc tính list-style-type với giá trị circle để thay đổi biểu tượng đánh dấu đầu dòng; thuộc tính background-color và border lần lượt cho màu nền và viền của mỗi mục; thuộc tính border-radius với giá trị 10px để bo tròn 4 góc của khung. Ngoài ra, có thể thêm thuộc tính padding với giá trị 10px để tạo khoảng trống bao quanh phần văn bản nằm trong khung.

Hình 4 là một ví dụ kết quả sau khi định kiểu bằng mã lệnh CSS.

Từ khóa tìm kiếm:

Giải Tin học 12 theo định hướng khoa học máy tính chân trời sáng tạo, giải bài F7: Giới thiệu CSS tin học 12 khoa học máy tính chân trời, giải Tin học 12 theo định hướng khoa học máy tính chân trời sáng tạo bài F7: Giới thiệu CSS

Bình luận

Giải bài tập những môn khác