Nội dung bài viết

    Xem thêm

    Lý thuyết Tin học 12 Bài 9 (Cánh diều): Thực hành định dạng một số thuộc tính CSS

    Tóm tắt lý thuyết Tin học lớp 12 Bài 9: Thực hành định dạng một số thuộc tính CSS hay, chi tiết sách Cánh diều sẽ giúp học sinh nắm vững kiến thức trọng tâm, ôn luyện để học tốt Tin học 12.

    1 4,060 08/08/2025
    Trang trước
    Chia sẻ
    Trang sau  

    Lý thuyết Tin học 12 Bài 9: Thực hành định dạng một số thuộc tính CSS

    Nhiệm vụ 1. Khai báo và áp dụng quy tắc định dạng internal CSS

    Yêu cầu:

    Khai báo định dạng internal CSS cho văn bản HTML “Bai7-NV1.html” mà em đã hoàn thành ở Bài 7 để được trang web như Hình 1.

    Lý thuyết Tin 12 Cánh diều Bài 9: Thực hành định dạng một số thuộc tính CSS

    Hướng dẫn thực hiện:

    Bước 1. Mở tệp HTML “Bai7-NV1.html”, ghi lưu với tên mới “Bai9-NV1.html”. Bước 2. Khai báo CSS.

    – Trong nội dung phần tử head, khai báo cặp thẻ <style></style>.

    – Trong nội dung phần tử style, khai báo các quy tắc định dạng sau:

    h2 {color: firebrick; }

    h3 {color: indianred;}

    label {font-size: 15px; font-weight: bold;}

    input {background-color: yellow;}

    textarea {background-color: ivory;}

    Bước 3. Ghi lưu văn bản, mở tệp bằng trình duyệt web và quan sát kết quả.

    Nhiệm vụ 2. Khai báo và áp dụng quy tắc định dạng external CSS

    Yêu cầu 1:

    Soạn tệp quy tắc định dạng “Bai9-NV2.css” gồm các quy tắc sau:

    – Phần tử h2 sử dụng phông chữ Verdana, chữ được tô màu firebrick. – Phần tử h3 chữ được tô màu indianred.

    − Phần tử label có cỡ chữ 20px.

    – Nền của phần tử input được tô màu yellow.

    Nền của phần tử textarea được tô màu ivory. Hướng dẫn thực hiện:

    Bước 1. Tạo tệp “Bai9-NV2.css”.

    Mở phần mềm Sublime Text.

    – Tạo tệp mới và ghi lưu với tên “Bai9-NV2.css”. Bước 2. Khai báo định dạng CSS.

    h2 {color: firebrick; }

    h3 {color: indianred;}

    label {font-size: 20px;}

    input {background-color: yellow;}

    textarea {background-color: ivory;}

    Bước 3. Ghi lưu tệp định dạng CSS.

    Yêu cầu 2:

    Em hãy áp dụng bảng định dạng “Bai9-NV2.css” đã soạn ở Yêu cầu 1 để trình bày văn bản HTML “Bai7-NV2.html” sao cho khi mở trên màn hình trình duyệt web, kết quả hiển thị như H2.

    Lý thuyết Tin 12 Cánh diều Bài 9: Thực hành định dạng một số thuộc tính CSS

    Hướng dẫn thực hiện:

    Bước 1. Mở tệp HTML“Bai7-NV2.html”, ghi lưu với tên tệp mới “Bai9-NV2.html”. Bước 2. Áp dụng định dạng extermal CSS. - Mo têp "Bai9-NV2.html".

    -Trong nội dung phần tử head, thêm khai báo <link rel="stylesheet" href="Bai9- NV2.css">

    Bước 3. Ghi lưu, mở tệp “Bai9-NV2.html bằng trình duyệt web và quan sát kết quả.

    Nhiệm vụ 3. Áp dụng bảng định dạng external CSS đã có cho văn bản HTML

    Yêu cầu:

    Áp dụng bảng định dạng “Bai9-NV2.css” đã hoàn thành ở Nhiệm vụ 2 để trình bày văn bản HTML “Bai7-NV3.html” sao cho khi mở trên trình duyệt web kết quả hiển thị như ở Hình 3.

    Lý thuyết Tin 12 Cánh diều Bài 9: Thực hành định dạng một số thuộc tính CSS

    Hướng dẫn thực hiện:

    Bước 1. Mở tệp “Bai7-NV3.html”, ghi lưu với tên tệp mới là “Bai9-NV3.html”. Bước 2. Áp dụng định dạng external Css.

    - Mo têp "Bai9-NV3.html".

    – Khai báo áp dụng định dạng Bai9-NV2.css trong nội dung phần tử head. Bước 3. Ghi lưu, mở tệp “Bai9-NV3.html” trên trình duyệt web và quan sát kết quả. Lưu ý: Để thêm chú thích cho các quy tắc định dạng CSS, em viết chú thích trong cặp dấu /* và */.

    Trắc nghiệm: Thực hành định dạng một số thuộc tính CSS

    PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

    Câu 1: Khi khai báo quy tắc định dạng internal CSS, thẻ HTML nào được sử dụng để chứa các quy tắc CSS?

    A. <style>

    B. <script>

    C. <link>

    D. <meta>

    Đáp án: A

    Giải thích: Thẻ <style> trong phần tử <head> của tài liệu HTML được sử dụng để khai báo các quy tắc CSS nội bộ (internal CSS). Các thẻ <script>, <link>, và <meta> không liên quan đến việc khai báo CSS.

    Câu 2: Để áp dụng định dạng màu sắc cho phần tử h2 bằng cách sử dụng CSS, thuộc tính nào sẽ được sử dụng?

    A. font-size

    B. background-color

    C. color

    D. border-color

    Đáp án: C

    Giải thích: Thuộc tính color được sử dụng để định dạng màu chữ của phần tử HTML, ví dụ như phần tử h2. Các thuộc tính khác như font-size, background-color, và border-color không thay đổi màu chữ.

    Câu 3: Trong định dạng CSS, thuộc tính nào xác định cỡ chữ cho phần tử label?

    A. font-family

    B. font-size

    C. font-weight

    D. color

    Đáp án: B

    Giải thích: Thuộc tính font-size xác định kích cỡ chữ cho phần tử. Các thuộc tính như color không điều chỉnh kích cỡ chữ.

    Câu 4: Để áp dụng định dạng external CSS cho một trang HTML, thuộc tính nào cần phải được thêm vào phần tử <head> của tệp HTML?

    A. <style>

    B. <script>

    C. <link>

    D. <meta>

    Đáp án: C

    Giải thích: Thẻ <link> được sử dụng để liên kết tệp CSS bên ngoài với tài liệu HTML. Thẻ <style>, <script>, và <meta> không được sử dụng cho việc liên kết tệp CSS.

    Câu 5: Trong tệp CSS, thuộc tính nào xác định màu nền của phần tử input?

    A. border-color

    B. color

    C. background-color

    D. font-family

    Đáp án: C

    Giải thích: Thuộc tính background-color được sử dụng để xác định màu nền cho phần tử HTML. Các thuộc tính như border-color, color, và ng thay đổi màu nền.

    Câu 6: Khi định dạng CSS, nếu muốn phần tử h3 có màu chữ là indianred, thuộc tính nào cần khai báo?

    A. color

    B. font-size

    C. background-color

    D. border-style

    Đáp án: A

    Giải thích: Để định dạng màu chữ của phần tử h3, thuộc tính color được sử dụng. Các thuộc tính khác như font-size, background-color, và border-style không áp dụng cho màu chữ.

    Câu 7: Tệp CSS với các quy tắc định dạng như h2 {color: firebrick; } nên được lưu với phần mở rộng nào?

    A. .html

    B. .css

    C. .js

    D. .xml

    Đáp án: B

    Giải thích: Các tệp chứa quy tắc định dạng CSS nên được lưu với phần mở rộng .css. Các phần mở rộng khác như .html, .js, và .xml không dùng cho định dạng CSS.

    Câu 8: Thuộc tính nào trong CSS được sử dụng để định dạng màu chữ của phần tử h2?

    A. font-size

    B. background-color

    C. color

    D. border-style

    Đáp án: C

    Giải thích: Thuộc tính color dùng để định dạng màu chữ của phần tử. Các thuộc tính khác như font-size, background-color, và border-style không liên quan đến màu chữ.

    Câu 9: Để sử dụng phông chữ Verdana cho phần tử h2, thuộc tính nào cần phải được khai báo trong CSS?

    A. font-size

    B. font-family

    C. color

    D. background-color

    Đáp án: B

    Giải thích: Thuộc tính c định tên phông chữ cho phần tử. Các thuộc tính như font-size, color, và background-color không liên quan đến việc đặt phông chữ.

    Câu 10: Để áp dụng bảng định dạng CSS từ một tệp CSS bên ngoài cho một trang HTML, thẻ nào phải được thêm vào phần tử <head> của trang HTML?

    A. <style>

    B. <script>

    C. <link>

    D. <meta>

    Đáp án: C

    Giải thích: Thẻ <link> được sử dụng để liên kết tệp CSS bên ngoài với tài liệu HTML, giúp áp dụng các quy tắc định dạng. Các thẻ khác như <style>, <script>, và <meta> không dùng để liên kết tệp CSS.

    PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

    Câu 1: Để khai báo định dạng internal CSS cho một tài liệu HTML, bạn cần sử dụng thẻ trong phần tử <head> sau đúng hay sai?

    a. <script>

    b) <link>

    c) <style>

    d) <meta>

    a) Sai. Thẻ <script> được sử dụng để nhúng hoặc liên kết các tệp JavaScript, không phải CSS.

    b) Đúng: Thẻ <link> dùng để liên kết các tệp CSS bên ngoài, không phải để khai báo CSS nội bộ.

    c) Đúng. Thẻ <style> trong phần tử <head> được sử dụng để khai báo các quy tắc CSS nội bộ (internal CSS).

    d) Sai. Thẻ <meta> dùng để cung cấp thông tin về tài liệu HTML như từ khóa và mô tả, không liên quan đến CSS.

    Câu 2: Khi khai báo định dạng external CSS cho một tệp HTML, thuộc tính sau cần phải được khai báo trong phần tử <head> của tệp HTML đúng hay sai?

    a) <style>

    b) <script>

    c) <link>

    d) <meta>

    a) Sai. Thẻ <style> dùng cho CSS nội bộ (internal CSS), không phải CSS bên ngoài.

    b) Sai. Thẻ <script> dùng để nhúng JavaScript, không phải CSS.

    c) Đúng. Thẻ <link> được sử dụng để liên kết tệp CSS bên ngoài với tài liệu HTML, cho phép áp dụng các quy tắc định dạng từ tệp CSS.

    d) Sai. Thẻ <meta> cung cấp thông tin về tài liệu HTML nhưng không dùng để liên kết tệp CSS.

    PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

    Câu 1: Khi khai báo quy tắc định dạng internal CSS trong tài liệu HTML, bạn cần đặt các quy tắc CSS vào đâu?

    Đáp án: Các quy tắc CSS cần được đặt trong thẻ <style> nằm trong phần tử <head> của tài liệu HTML.

    Giải thích: Để khai báo internal CSS, bạn cần sử dụng thẻ <style> trong phần tử <head> của tài liệu HTML. Thẻ này chứa các quy tắc CSS mà bạn muốn áp dụng cho nội dung của trang web.

    Câu 2: Để liên kết một tệp CSS bên ngoài với tài liệu HTML, bạn sử dụng thẻ HTML nào?

    Đáp án: Bạn sử dụng thẻ <link> trong phần tử <head> của tài liệu HTML.

    Giải thích: Thẻ <link> được sử dụng để liên kết tệp CSS bên ngoài với tài liệu HTML. Cú pháp chung là <link rel="stylesheet" href="ten-tap.css">, trong đó href chứa đường dẫn đến tệp CSS. Điều này cho phép các quy tắc CSS trong tệp bên ngoài áp dụng cho tài liệu HTML.

    Câu 3: Trong tệp CSS, thuộc tính nào xác định màu nền của phần tử HTML?

    Đáp án: Thuộc tính background-color.

    Giải thích: Thuộc tính background-color trong CSS được sử dụng để xác định màu nền của phần tử HTML. Ví dụ, để đặt màu nền của phần tử input thành màu vàng, bạn sử dụng quy tắc input {background-color: yellow;}.

    Tham khảo các loạt bài Tin học 12 khác:

    Bài viết cùng lớp mới nhất

    Xem thêm
    1 4,060 08/08/2025
    Trang trước
    Chia sẻ
    Trang sau  

    Xem thêm các chương trình khác: