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 đường viền

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 148 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 đường viền, lề và vùng đệm

Yêu cầu: Viết mã lệnh CSS để định kiểu khung và viên cho riêng từng mục của phần Sở thích (Hình 8), trong đó mỗi khung đều thoả các yêu cầu sau:

Đường viễn dày 1 pixel, màu xám và nền màu trắng.

Chiều cao là 30 pixels và độ rộng bằng một nửa độ Sở thích

rộng của trang web.

Bo tròn 4 góc.

Lê là 20 pixels và vùng đệm cho phần văn bản bên trong là 20 pixels.

Lời giải:

Em đặt nội dung của mỗi mục Sở thích vào cặp thẻ <div></div>. Trong thuộc tỉnh style của mỗi thẻ hợp với các yêu cầu:

Dùng thuộc tính border để tạo đường viền và thuộc tỉnh background-color để tạo nền trắng.

Dùng thuộc tỉnh height và width để định kiều lần lượt chiều cao và độ rộng của khung, trong đó giá trị của width là 50%.

Dùng thuộc tính border-radius để bo tròn 4 góc của khung.

Dùng thuộc tính margin và padding để định kiểu lần lượt cho lề và vùng đệm, trong đó ứng với mỗi thuộc tính, em chỉ định giá trị là 20px cho cả bốn bên: trên, dưới, trái và phải. Đoạn mã CSS cho sở thích môn học được viết như sau:

<div style="border: 1px solid #e5e5e5; background-color: #ffffff; height: 30px; width: 50%; border-radius: 10px; margin: 20px; padding: 20px;">Môn học: Tin học, Toán, Ngoại ngữ</div>

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 144 Tin học 12: Em hãy định kiểu độ trong suốt của nền là 0.3 và quan sát kết quả ....

• 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? ....

• 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ụ 1 ....

• 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 ....

Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:

• Tin học 12 Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

• Tin học 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

• Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử <div>

• Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu

• Tin học 12 Bài F13: Dự án tạo trang web (tiếp theo)

Xem thêm các tài liệu học tốt lớp 12 hay khác:

• Giải sgk Tin học 12 Chân trời sáng tạo
• Giải Chuyên đề Tin học 12 Chân trời sáng tạo
• Giải SBT Tin học 12 Chân trời sáng tạo
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Cánh diều (các môn học)

---