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 465 27/09/2024
    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à */.

    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 465 27/09/2024
    Trang trước
    Chia sẻ
    Trang sau  

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