Giải bài tập Tin học 12 Bài F7: Giới thiệu CSS
Khởi động trang 134 Tin học 12: Trong trang web porfolio.html đã tạo ở 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ẻ
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?
Lời giải:
Trong trang web porfolio.html đã tạo ở bài học trước, bổ xung mã lệnh CSS để các đề mục đánh dấu bằng thẻ
Nếu 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 Style nào đáp ứng yêu cầu này.
1. Khái niệm CSS
Hoạt động trang 135 Tin học 12: 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.
Lời giải:
Một số lợi ích của CSS trong việc xây dựng các trang web:
a) Linh hoạt về bố cục
CSS có thể thực hiện được nhiều yêu cầu phức tạp về bố cục, hình thức lẫn hiệu ứng của trang web. Bên cạnh đó, CSS còn giúp trang web thay đổi bố cục để tương thích với các kích thước màn hình khác nhau của máy tính, điện thoại thông minh,..
b) Nhất quán về hình thức
CSS giúp đảm bảo hình thức nhất quán cho các trang web trong cùng một website. Chẳng hạn, em chỉ cần định kiểu chung cho phần tử
c) Dễ bảo trì và nâng cấp
CSS giúp chia tách việc xây dựng nội dung và hình thức của trang web. Nội dung được xây dựng bằng các thẻ HTML và hình thức được quy định bởi CSS. Việc chia tách này làm cho trang web dễ bảo trì nâng cấp. Khi muốn thay đổi hình thức của trang web, em chỉ cần điều chỉnh các mã lệnh CSS mà không làm ảnh hưởng đến nội dung.
d) Có thể tái sử dụng
Việc điều khiển bằng mã lệnh CSS giúp đem lại khả năng tái sử dụng cho thành phần khác của cùng trang web hoặc các trang web khác nhau.
2. Các cách bổ sung mã lệnh CSS trong trang web
Hoạt động 1 trang 136 Tin học 12: Em hãy định kiểu cho kích thước phông chữ của các phần tử
Lời giải:
Định kiểu cho kích thước phông chữ của các phần tử
Hoạt động 2 trang 136 Tin học 12: 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ỳ ý.
Lời giải:
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 1 trang 137 Tin học 12: Theo em, HTML và CSS khác nhau ở điểm nào?
– CSS: là ngôn ngữ dùng định kiểu, hình thức và hiệu ứng cho các phần tử HTML.
– HTML là siêu văn bản dùng để tạo ra trang web, thể hiện các thành phần như văn bản, hình ảnh, âm thanh, video và các nội dung khác.
Lời giải:
Nội dung đang được cập nhật …
Luyện tập 2 trang 137 Tin học 12: Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.
Lời giải:
Các cách chèn mã lệnh CSS vào trang web:
Cách 1. Chèn trực tiếp mã lệnh CSS vào các thẻ mở của phần tử HTML thông qua thuộc tính style theo cú pháp:
«tên_thẻ_HTML style=”thuộc_tính_CSS: giá_trị; thuộc tính_CSS: giá_trị;”>
Ví dụ 1: Để tô màu xanh và đổ bóng cho để mục Giới thiệu chung, em chèn thuộc tính style vào thẻ
Thuộc tính color dùng để tô màu xanh cho chữ (mã màu #996bb0), thuộc tính text-shadow dùng để đổ bóng, với 1 pixel theo chiều ngang (hưởng sang phải), 1 pixel theo chiều dọc (hướng xuống dưới), 2 pixels làm mờ và màu xám rgba(0, 0, 0, 0.5) (Hình 1).
Cách này giúp định kiểu nhanh và trực tiếp cho một phần tử HTML cụ thể. Tuy nhiên, cách này có nhiều hạn chế, chẳng hạn như khó khăn bảo trì hoặc không thể tái sử dụng mã lệnh CSS.
Cách 2. Chèn cặp thẻ kèm mã lệnh CSS vào giữa cặp thẻ
của tệp portfolio.html. Phần mã lệnh CSS trong thẻ
color: #006bb0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
Một trong những ưu điểm của cách này là tách rời phẩn mã lệnh CSS với phần nội dung nằm trong thẻ
và giúp định kiểu toàn cục cho các phần tử HTML liên quan. Cụ thể trong Ví dụ 2, không chỉ để mục Giới thiệu chung, mà tất cả để mục
Cách 3. Tạo tệp mã lệnh CSS riêng biệt và chèn vào trang web một liên kết đến tệp CSS bằng thẻ đặt vào giữa cặp thẻ
. Thẻ dược viết theo cú pháp:
Ví dụ 3: Các bước cụ thể của cách 3 được thực hiện như sau:
D Trong Visual Studio Code, tạo tập style.css trong cùng thư mục với tập portfolio html Sau đó, nhập đoạn mã CSS dưới đây:
h1 {
}
color: #006bb0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
Trong tập portfolio.html, chèn thẻ vào cặp thẻ
để liên kết đến tập style.css, cụ thể:
Cách này cũng đem lại kết quả tương tự như cách 2. Một số ưu điểm của cách này là tách rời các thành phần của một trang web, hỗ trợ khả năng làm việc cộng tác, khả năng bảo trì và tái sử dụng mã lệnh.
Luyện tập 3 trang 137 Tin học 12: Giả sử trong tệp .css, mã lệnh được viết là h1 {color: red;}, còn trong tệp .html, thẻ
Lời giải:
Giả sử trong tệp .css, mã lệnh được viết là h1 {color: red;}, còn trong tệp .html, thẻ
Thực hành trang 137 Tin học 12: Bài thực hành này áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho các phần tử
Yêu cầu: Viết mã lệnh CSS để định kiểu cho các phần tử
Phòng chủ là Arial, kích thước 32 pt và in đậm.
Màu chữ là xanh dương, có độ bóng.
Độ giãn cách giữa các kí tự là 4 pixels.
Lời giải:
* Trong thẻ
của tập portfolio.html, em tạo cặp thẻ
@ Để định kiểu cho phông chữ, kích thước và in đậm cho th1>, em sử dụng lần lượt các thuộc tỉnh CSS là font-weight với các giá trị lần lượt là Arial, 32pt và bold.
Ô Dê tô màu xanh và đổ bóng cho để mục, em sử dụng thuộc tỉnh CSS là color và text-shadow như Ví dụ I với giá trị tuỳ ý.
© Để làm cho các kí tự giãn cách với nhau, em chỉ định giá trị 4px cho thuộc tỉnh letter-spacing.
Như vậy, đoạn mã CSS cho để mục /1 được viết trong cặp thẻ như sau:
h1 {
}
font-size: 32pt;
font-weight: bold;
color: #0088bd;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 4px;
Thực hành trang 138 Tin học 12: Bài thực hành này áp dụng cho trang web portfolio.html.
Nhiệm vụ 2. Định kiểu CSS cho bảng
Yêu cầu: Viết mã lệnh CSS để định kiểu bảng Lịch sinh hoạt hằng tuần thoả các yêu cầu: Bảng có chiều rộng chiếm 75% chiều rộng của trang web và có đường viên nét liền màu xanh dày 2 pixels.
Hàng tiêu để có chiều cao là 32 pixels, phần văn bản được căn giữa theo phương dọc, phương ngang và in hoa tất cả kí tự.
Các hàng còn lại có chiếu cao là 48 pixels, phần văn bản được căn trái theo phương ngang và căn giữa theo phương dọc. Các hàng được tổ màu xen kẽ theo thứ tự chẵn lẻ.
Lời giải:
Đ Trước hết ta chèn thêm hai hàng vào bảng bằng mã lệnh HTML để bảng có 5 hàng, gồm một hàng tiêu để và bốn hàng ứng với các buổi sáng, trưa, chiều và tối (Hình 2).
Em chèn trực tiếp thuộc tính CSS là style vào các thẻ HTML trong tệp portfolio.html, đồng thời chỉ định các thuộc tính và giá trị tương ứng theo yêu cầu. Cụ thể như sau:
Thẻ
đồng thời thay đổi màu chữ thành màu trắng.
