Giải Tin học 12 trang 120 Chân trời sáng tạo

Giảm giá 50% sách VietJack đánh giá năng lực các trường trên Shopee Mall

Với Giải Tin học 12 trang 120 trong Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS Tin học 12 Chân trời sáng tạo hay nhất, ngắn gọn sẽ giúp học sinh dễ dàng trả lời các câu hỏi & làm bài tập Tin 12 Khoa học máy tính trang 120.

Giải Tin học 12 trang 120 Chân trời sáng tạo

Quảng cáo

Hoạt động trang 120 Tin học 12: Theo em, điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo vùng chọn là tên lớp là gì?

Lời giải:

Điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo vùng chọn là tên lớp là:

Tên thẻ: dùng để định kiểu cho các phần tử cùng loại.

Tên lớp: dùng để định kiểu cho các phần tử cùng loại hoặc khác loại, sử dụng chung tên lớp trong thuộc tính class.

Luyện tập 1 trang 120 Tin học 12: Em hãy cho biết khái niệm vùng chọn CSS.

Lời giải:

Vùng chọn là khuôn mẫu dùng để chỉ ra phần tử HTML cụ thể được định kiểu.

Vùng chọn được dùng để áp dụng cùng một kiểu CSS cho một nhóm các phần tử xác định.

Quảng cáo

Luyện tập 2 trang 120 Tin học 12: Theo em, có những kĩ thuật nào để khai báo vùng chọn CSS cơ bản?

Lời giải:

Những kĩ thuật để khai báo vùng chọn CSS cơ bản:

- Định kiểu cho các phần tử cùng loại: khai báo vùng chọn là tên phần tử đó.

- Định kiểu cho các phần tử khác loại: khai báo phần tử là tên lớp.

Thực hành trang 120 Tin học 12: Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.

Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ

Yêu cầu: Sử dụng vùng chọn để định kiểu cho các đề mục h1 của tệp portfolio.html (Hình 4) theo các yêu cầu sau:

Phần văn bản có màu trắng, cỡ chữ 20, phông chữ Arial.

Phần nền của để mục h1 màu xanh, có độ rộng chiếm một nửa độ rộng của trang web, bo tròn góc trên và góc dưới ở bên phải.

Phần văn bản được căn phải đối với phần nền, có vùng đệm là 10 pixels.

Quảng cáo

Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS Nhiệm vụ 1 Định kiểu CSS

Lời giải:

1. Trong tệp portfolio.html, em chèn liên kết đến tệp style.css

<head>

2. Tạo tệp style.css nằm cùng thư mục với tệp portfolio.html. Tệp style.css sẽ chứa các khai bảo vùng chọn và mã lệnh CSS dùng để định kiểu theo yêu cầu.

Quảng cáo

3. Vì tất cả đề mục h1 sẽ được định kiểu giống nhau nên ta khai báo vùng chọn là tên phần tử <h1>. Để đáp ứng những yêu cầu trên, các thuộc tính được sử dụng trong vùng chọn h1 gồm: Thuộc tính color dành cho màu của văn bản, font-size dành cho cỡ chữ và font-family dành cho phông chữ.

Thuộc tính background-color dành cho màu nền của đề mục, width dành cho độ rộng của nền và border-radius dành cho góc bo tròn.

Thuộc tính text-align dành cho việc căn phải và padding dành cho vùng đệm.

Như vậy, đoạn mã CSS được viết như sau:

h1 {

color: #ffffff;

font-size: 20pt;

}

font-family: Arial; background-color: #0053a0; width: 50%;

border-radius: 0px 10px 10px 0px;

text-align: right;

padding: 10px;

Thực hành trang 120 Tin học 12: Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.

Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp

Yêu cầu: Sử dụng vùng chọn là tên lớp để định kiểu cho các hình ảnh sao cho các ảnh được căn giữa theo độ rộng của trang web, nằm trong nền màu tối bo tròn 4 góc và chỉnh sửa kích thước hiển thị phù hợp (Hình 5).

Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS Nhiệm vụ 2 Định kiểu CSS

Lời giải:

0 Trong lập portfolio,html, đặt các ảnh vào cặp thẻ <div></div> như sau:

<div>

</div>

Các định kiểu từ bước này được đặt trong tập style.css. Định kiểu cho thẻ <div> bằng cách khai báo vùng chọn là lớp image-style như sau:

.image-style {

}

background-color: rgb(51, 51, 51); text-align: center;

Trong đó, thuộc tính background-color dùng để tạo nên màu tối và thuộc tính text-align dùng để căn giữa cho ảnh.

Chỉ định tên lớp image-style cho thuộc tính class của thẻ <div);

</div>

Vì các ảnh có kích thước lớn, có thể che mất phân nến, em thu nhỏ ảnh với khai báo vùng chọn kết hợp giữa lớp và thủ như sau:

.image-style img {

padding: 20px;

max-height: 75%;

}

max-width: 75%; Chan trời sang tạo

40px;

Trong đó, vùng chọn .image-style img được dùng để định kiểu cho các thẻ <img) nằm trong thẻ <div> mà có thuộc tính class là .image-style. Nói cách khác, các thẻ <img) không thuộc thẻ <div> này sẽ không được định kiểu theo vùng chọn này.

5 Nháy đúp chuột vào tệp portfolio.html để kiểm tra kết quả.

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:

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

Tài liệu cho giáo viên: Giáo án, powerpoint, đề thi giữa kì cuối kì, đánh giá năng lực, thi thử THPT, HSG, chuyên đề, bài tập cuối tuần..... độc quyền VietJack, giá hợp lí

Sách VietJack thi THPT quốc gia 2025 cho học sinh 2k7:

ĐỀ THI, GIÁO ÁN, GÓI THI ONLINE DÀNH CHO GIÁO VIÊN VÀ PHỤ HUYNH LỚP 12

Bộ giáo án, đề thi, bài giảng powerpoint, khóa học dành cho các thầy cô và học sinh lớp 12, đẩy đủ các bộ sách cánh diều, kết nối tri thức, chân trời sáng tạo tại https://tailieugiaovien.com.vn/ . Hỗ trợ zalo VietJack Official