Bài thực hành này áp dụng cho trang web portfolio.html. Nhiệm vụ I. Định kiểu CSS cho văn bản và nền
Bài thực hành này áp dụng cho trang web portfolio.html.
Giải Tin học 12 Bài F8: Một số thuộc tính cơ bản của CSS - Chân trời sáng tạo
Thực hành trang 147 Tin học 12: Bài thực hành này áp dụng cho trang web portfolio.html.
Nhiệm vụ I. Định kiểu CSS cho văn bản và nền
Yêu cầu: Viết mã lệnh CSS để định kiểu cho phần Giới thiệu chung (Hình 7) theo các yêu cầu sau:
Các thông tin cá nhân được căn phải so với trang web.
Dùng một hình ảnh để làm nền cho phần thông tin cá nhân này. Hình ảnh đó phải phủ hết chiều ngang của trang web.
Lời giải:
1. Em đặt các thông tin cá nhân vào cặp thẻ <div>/div>.
Để căn phải cho phần thông tin cá nhân, trong thuộc tính style của thẻ <div>, em chỉ định giá trị cho thuộc tính text-align là right.
2. Giả sử tệp ảnh làm nền có tên là hinhnen.jpg.
Để tạo nền là ảnh, em viết thêm một cặp thẻ <div></div> bên ngoài phần mã lệnh trên và chỉ định giá trị cho thuộc tính background-image là tệp ảnh đặt trong hàm url().
Đoạn mã CSS được viết như sau:
<h1>Giới thiệu chung</h1>
<div style="background-image: url('hinh_nen.jpg'); background-size: cover;">
<div style="color: #ffffff; text-align: right; height: 540px; padding: 50px 100px;"> <p>...</p>
</div>
</div>
Trong đó:
background-size: cover, có thể kéo giãn ảnh để phủ hết độ rộng của trang web.
color: #ffffff, giúp văn bản có màu trắng, tăng độ tương phản cho ảnh nến.
padding: 58px 199px, giúp tạo vùng đệm để văn bản không nằm sát cạnh phải của trang web và cạnh trên của ảnh nền, cụ thể là 50 pixels cho vùng đệm trên và dưới, 100 pixels cho vùng đệm trái và phải.
Lời giải bài tập Tin học 12 Bài F8: Một số thuộc tính cơ bản của CSS hay khác:
Khởi động trang 141 Tin học 12: Đối với mỗi nội dung là văn bản trong trang web ....
Hoạt động trang 142 Tin học 12: Viết mã lệnh CSS để định kiểu cho những thành tích ....
Hoạt động trang 143 Tin học 12: Viết mã lệnh CSS để định kiểu cho các hoạt động ....
Hoạt động trang 146 Tin học 12: Theo em, thay đổi các giá trị nào của vùng đệm thì phần văn bản ....
Luyện tập 1 trang 146 Tin học 12: Em hãy kể tên một số thuộc tính dùng để định kiểu phông chữ ....
Luyện tập 2 trang 146 Tin học 12: Thảo luận với bạn và nêu một số đơn vị có thể được dùng ....
Luyện tập 3 trang 146 Tin học 12: Theo em có những cách mô tả màu sắc nào trong mã lệnh CSS? ....
Vận dụng 1 trang 148 Tin học 12: Em hãy định kiểu cho các thông tin cá nhân bằng phông chữ ....
Vận dụng 2 trang 148 Tin học 12: Thực hiện tăng hoặc giảm tuỳ ý độ trong suốt của ảnh nền ở mục ....
Vận dụng 3 trang 149 Tin học 12: Đối với mỗi ảnh trong mục Nội dung yêu thích, hãy định kiểu ....
Vận dụng 4 trang 149 Tin học 12: Em hãy tìm hiểu thêm những thuộc tính và giá trị khác ....