Giáo án điện tử Khoa học máy tính 12 chân trời Bài F7: Giới thiệu CSS

BÀI F7: GIỚI THIỆU CSS

KHỞI ĐỘNG

1. Trong trang web porfolio.html đã tạo ở bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ <h1> được tô màu xanh.
2. Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nôi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?

KHÁM PHÁ

1. Khái niệm CSS

  1. Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.

             2. CSS là gì? 

          2. Các cách bổ sung mã lệnh CSS trong trang web

              1. Có mấy cách để bổ xung mã lệnh CSS và trang web

              2. Thuộc tính color dùng để làm gì?

              3. Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixel. Gợi ý: Sử dụng thuộc tính font-size với giá trị là 60px.

              4. Em hãy thay đổi màu cho riêng đề mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.

           LUYỆN TẬP

1. Theo em HTML và CSS khác nhau ở điểm gì?
2. Em hãy mô tả các cách chèn mã lệnh CSS vào trang web?
3. Chèn mã lệnh CSS để định kiểu cho các mục <li> của các danh sách <ul> sao cho: Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.

      THỰC HÀNH

1. Bài thực hành này áp dụng cho trang web portfolio.html.

Nhiệm vụ 1. Định kiểu CSS cho các phần tử <h1>

Yêu cầu: Viết mã lệnh CSS để định kiểu cho các phần tử <h1> thoả các yêu cầu:

Phòng chủ là Arial, kích thước 32 pt và in đậm.

Màu chữ là xanh dương, có độ bóng.

Độ giãn cách giữa các kí tự là 4 pixels.

1. 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 bảng

Yêu cầu: Viết mã lệnh CSS để định kiểu bảng Lịch sinh hoạt hằng tuần thoả các yêu cầu: Bảng có chiều rộng chiếm 75% chiều rộng của trang web và có đường viên nét liền màu xanh dày 2 pixels.

Hàng tiêu để có chiều cao là 32 pixels, phần văn bản được căn giữa theo phương dọc, phương ngang và in hoa tất cả kí tự.

Các hàng còn lại có chiếu cao là 48 pixels, phần văn bản được căn trái theo phương ngang và căn giữa theo phương dọc. Các hàng được tổ màu xen kẽ theo thứ tự chẵn lẻ.