Siêu nhanh giải bài 10 chủ đề F Tin học 12 Khoa học máy tính Cánh diều
Giải siêu nhanh bài 10 chủ đề F Tin học 12 Khoa học máy tính Cánh diều. Giải siêu nhanh Tin học 12 Khoa học máy tính Cánh diều. Những phần nào có thể rút gọn, lược bỏ và tóm gọn. Đều được áp dụng vào bài giải này. Thêm cách giải mới để học sinh lựa chọn. Để tìm ra phong cách học Tin học 12 Khoa học máy tính Cánh diều phù hợp với mình.
Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây
BÀI 10. BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH
KHỞI ĐỘNG
Trong một trang web có 5 đoạn văn bản, em có biết khai báo CSS như thế nào để trình bày đoạn văn bản đầu tiên và cuối cùng chữ màu đỏ, còn các đoạn văn bản còn lại chữ màu xanh không?
Giải rút gọn:
Để trình bày đoạn văn bản đầu tiên và cuối cùng với chữ màu đỏ, còn các đoạn văn bản còn lại với chữ màu xanh, bạn có thể sử dụng các bộ chọn CSS như :first-of-type và :last-of-type. Dưới đây là cách khai báo CSS để đạt được điều này:
/* CSS */
p:first-of-type {
color: red;
}
p:last-of-type {
color: red;
}
p:not(:first-of-type):not(:last-of-type) {
color: blue;
}
1. BỘ CHỌN LỚP
2. BỘ CHỌN ĐỊNH DANH
HOẠT ĐỘNG
Em có biết cách khai báo định dạng CSS để chỉ áp dụng cho một phần tử cụ thể trên trang web không?
Giải rút gọn:
Sử dụng lớp (class): Đặt một lớp đặc biệt cho phần tử đó và sau đó áp dụng CSS cho lớp đó. Ví dụ: <div class="special-element">Nội dung phần tử đặc biệt</div>
3. THỰC HÀNH SỬ DỤNG BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH
VẬN DỤNG
Khai báo bộ chọn lớp, bộ chọn định danh, giá trị thuộc tính class cho phần tử body, id để hoàn thiện website cá nhân đã có ở các bài học trước. Gợi ý thực hiện:
- Mở tệp “style.css”: Khai báo bộ chọn lớp có tên bg để thiết lập màu nền (ví dụ: lightgrey). Khai báo bộ chọn định danh có tên submit để trình bày màu của nút lệnh (ví dụ: blue).
- Bổ sung khai báo giá trị thuộc tính class cho phần tử body của các tệp "hobbies.html" và "album.html" là bg.
- Bổ sung khai báo giá trị thuộc tính id cho nút lệnh submit trong tệp "index.html" là submit.
Giải rút gọn:
Tạo hoặc mở tệp "style.css" và thêm các khai báo CSS:
/* style.css */
/* Bộ chọn lớp */
.bg {
background-color: lightgrey;
}
/* Bộ chọn định danh */
#submit {
color: blue;
}
Bổ sung khai báo giá trị thuộc tính class cho phần tử body của các tệp "hobbies.html" và "album.html":
<body class="bg">
<!-- Nội dung của trang -->
</body>
Bổ sung khai báo giá trị thuộc tính id cho nút lệnh submit trong tệp "index.html":
<input type="submit" value="Gửi" id="submit">
Câu 2: Em hãy mở tệp “index.html” để xem website cá nhân và tự đánh giá có hài lòng với thành quả của bản thân không.
Giải rút gọn:
- Website vẫn chưa được tối ưu hoá để sử dụng cho các thiết bị di động => Tính linh hoạt chưa cao
- Website chưa thực hiện các biện pháp an ninh để bảo vệ dữ liệu cá nhân người dùng
- Nội dung của website vẫn còn sơ sài
TỰ KIỂM TRA
Câu 1: Cho khai báo định dạng CSS sau: a.xanh {color: blue; font-size: 15px;}. Trong các khai báo HTML sau, khai báo nào sẽ áp dụng định dạng CSS trên?
A. <p class="xanh">Học CSS </p>
B. <p id= "xanh">Học CSS </p>
C. <a href="https://www.w3schools.com" id = "xanh">Học CSS </a>
D. <a href="https://www.w3schools.com" class = "xanh">Học CSS </a>
Giải rút gọn:
A. <p class="xanh">Học CSS </p> - Đúng, vì nó có class="xanh".
D. <a href="https://www.w3schools.com" class = "xanh">Học CSS </a> - Đúng, vì nó có class="xanh".
Vậy đáp án là A và D.
Câu 2: Cô giáo yêu câu khai báo và áp dụng CSS để định dạng văn bản HTML có nội dung như ở Hình ba để có kết quả hiển thị trên trình duyệt web như ở Hình 6b. Sau khi tìm hiểu, các bạn học sinh đã đưa ra các giải pháp sau đây. Em hãy cho biết mỗi phát biểu sau là đúng hay sai:
a) Khai báo CSS sử dụng bộ chọn phần tử cho phần tử hỉ vì nội dung văn bản HTML chỉ gồm các phần tử tiêu đề mục hl.
b) Thực hiện các bước sau:
Bước 1. Khai báo CSS sử dụng bộ chọn lớp để định dạng màu chữ khác với màu mặc định.
<style>
tieudel {color: red;}
tieude2 {color: blue;}
</style>
Bước 2. Khai báo thuộc tỉnh class="tieudel" cho các tiêu đề mục chữ có màu đỏ, khai báo thuộc tính class= "tieude2" cho các tiêu đề mục chữ có màu xanh.
c) Thực hiện các bước sau:
Bước 1. Khai báo CSS sử dụng bộ chọn định danh để định dạng tiêu đề mục chữ có màu xanh, các tiêu đề khác sử dụng bộ chọn phần tử hl.
<style>
#tieude1 {color: blue;} h1 {color: red;}
</style>
Bước 2. Khai bảo thuộc tính class = "tieudel" cho tiêu đề mục chữ có màu xanh.
d) Thực hiện các bước sau:
Bước 1. Kết hợp khai báo CSS sử dụng bộ chọn lớp, bộ chọn định danh:
<style>
tieudel {color: red;}
#tieude2 {color: blue;}
</style>
Bước 2. Khai báo thuộc tỉnh class="tieudel" cho các tiêu đề mục chữ màu đỏ, khai báo thuộc tính id= "tieude2" cho các tiêu đề mục chữ có màu xanh.
Giải rút gọn:
a) Đúng: Khai báo CSS sử dụng bộ chọn phần tử h1 vì nội dung HTML chỉ gồm các tiêu đề h1. Sử dụng bộ chọn h1 trong CSS sẽ áp dụng định dạng cho tất cả các thẻ h1 trong trang.
b) Sai: Để định dạng màu chữ khác nhau, cần khai báo các lớp CSS và áp dụng chúng trong HTML. Ví dụ:
<style>
.tieudel {color: red;}
.tieude2 {color: blue;}
</style>
và trong HTML:
<h1 class="tieudel">Tiêu đề đỏ</h1>
<h1 class="tieude2">Tiêu đề xanh</h1>
c) Sai: Để định dạng tiêu đề màu xanh bằng bộ chọn định danh, cần khai báo id trong HTML. Ví dụ:
<style>
#tieude1 {color: blue;}
h1 {color: red;}
</style>
và trong HTML:
<h1 id="tieude1">Tiêu đề xanh</h1>
<h1>Tiêu đề đỏ</h1>
d) Đúng: Kết hợp sử dụng bộ chọn lớp và định danh để định dạng các thẻ h1:
<style>
.tieudel {color: red;}
#tieude2 {color: blue;}
</style>
và trong HTML:
<h1 class="tieudel">Tiêu đề đỏ</h1>
<h1 id="tieude2">Tiêu đề xanh</h1>
Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây
Nội dung quan tâm khác
Thêm kiến thức môn học
Giải Tin học 12 Khoa học máy tính Cánh diều bài 10 chủ đề F, Giải bài 10 chủ đề F Tin học 12 Khoa học máy tính Cánh diều, Siêu nhanh giải bài 10 chủ đề F Tin học 12 Khoa học máy tính Cánh diều
Giải bài tập những môn khác
Môn học lớp 12 KNTT
5 phút giải toán 12 KNTT
5 phút soạn bài văn 12 KNTT
Văn mẫu 12 KNTT
5 phút giải vật lí 12 KNTT
5 phút giải hoá học 12 KNTT
5 phút giải sinh học 12 KNTT
5 phút giải KTPL 12 KNTT
5 phút giải lịch sử 12 KNTT
5 phút giải địa lí 12 KNTT
5 phút giải CN lâm nghiệp 12 KNTT
5 phút giải CN điện - điện tử 12 KNTT
5 phút giải THUD12 KNTT
5 phút giải KHMT12 KNTT
5 phút giải HĐTN 12 KNTT
5 phút giải ANQP 12 KNTT
Môn học lớp 12 CTST
5 phút giải toán 12 CTST
5 phút soạn bài văn 12 CTST
Văn mẫu 12 CTST
5 phút giải vật lí 12 CTST
5 phút giải hoá học 12 CTST
5 phút giải sinh học 12 CTST
5 phút giải KTPL 12 CTST
5 phút giải lịch sử 12 CTST
5 phút giải địa lí 12 CTST
5 phút giải THUD 12 CTST
5 phút giải KHMT 12 CTST
5 phút giải HĐTN 12 bản 1 CTST
5 phút giải HĐTN 12 bản 2 CTST
Môn học lớp 12 cánh diều
5 phút giải toán 12 CD
5 phút soạn bài văn 12 CD
Văn mẫu 12 CD
5 phút giải vật lí 12 CD
5 phút giải hoá học 12 CD
5 phút giải sinh học 12 CD
5 phút giải KTPL 12 CD
5 phút giải lịch sử 12 CD
5 phút giải địa lí 12 CD
5 phút giải CN lâm nghiệp 12 CD
5 phút giải CN điện - điện tử 12 CD
5 phút giải THUD 12 CD
5 phút giải KHMT 12 CD
5 phút giải HĐTN 12 CD
5 phút giải ANQP 12 CD
Giải chuyên đề học tập lớp 12 kết nối tri thức
Giải chuyên đề Ngữ văn 12 Kết nối tri thức
Giải chuyên đề Toán 12 Kết nối tri thức
Giải chuyên đề Vật lí 12 Kết nối tri thức
Giải chuyên đề Hóa học 12 Kết nối tri thức
Giải chuyên đề Sinh học 12 Kết nối tri thức
Giải chuyên đề Kinh tế pháp luật 12 Kết nối tri thức
Giải chuyên đề Lịch sử 12 Kết nối tri thức
Giải chuyên đề Địa lí 12 Kết nối tri thức
Giải chuyên đề Tin học ứng dụng 12 Kết nối tri thức
Giải chuyên đề Khoa học máy tính 12 Kết nối tri thức
Giải chuyên đề Công nghệ 12 Điện - điện tử Kết nối tri thức
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Kết nối tri thức
Giải chuyên đề học tập lớp 12 chân trời sáng tạo
Giải chuyên đề Ngữ văn 12 Chân trời sáng tạo
Giải chuyên đề Toán 12 Chân trời sáng tạo
Giải chuyên đề Vật lí 12 Chân trời sáng tạo
Giải chuyên đề Hóa học 12 Chân trời sáng tạo
Giải chuyên đề Sinh học 12 Chân trời sáng tạo
Giải chuyên đề Kinh tế pháp luật 12 Chân trời sáng tạo
Giải chuyên đề Lịch sử 12 Chân trời sáng tạo
Giải chuyên đề Địa lí 12 Chân trời sáng tạo
Giải chuyên đề Tin học ứng dụng 12 Chân trời sáng tạo
Giải chuyên đề Khoa học máy tính 12 Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Điện - điện tử Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Chân trời sáng tạo
Giải chuyên đề học tập lớp 12 cánh diều
Giải chuyên đề Ngữ văn 12 Cánh diều
Giải chuyên đề Toán 12 Cánh diều
Giải chuyên đề Vật lí 12 Cánh diều
Giải chuyên đề Hóa học 12 Cánh diều
Giải chuyên đề Sinh học 12 Cánh diều
Giải chuyên đề Kinh tế pháp luật 12 Cánh diều
Giải chuyên đề Lịch sử 12 Cánh diều
Giải chuyên đề Địa lí 12 Cánh diều
Giải chuyên đề Tin học ứng dụng 12 Cánh diều
Giải chuyên đề Khoa học máy tính 12 Cánh diều
Giải chuyên đề Công nghệ 12 Điện - điện tử Cánh diều
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Cánh diều
Trắc nghiệm 12 Kết nối tri thức
Trắc nghiệm 12 Chân trời sáng tạo
Trắc nghiệm 12 Cánh diều
Chuyên đề lớp 12
Bình luận