Giáo án điện tử Tin học ứng dụng 12 chân trời Bài F8: Một số thuộc tính cơ bản của CSS

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

BÀI F8: MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS

1. Những thuộc tính định kiểu cho màu sắc và phông chữ

- Đối với nội dung là văn bản trong trang web, em có thể thực hiện những định kiểu như thế nào? Hãy nêu những đặc điểm có thể định kiểu của văn bản.

- Viết mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính.

- Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về thiết lập này?

- Cách thiết lập định dạng màu chữ trong CSS như thế nào?

2. Những thuộc tính định kiểu cho văn bản

- Giải thích các mẫu định dạng sau:

- Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần từ HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?

- Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

- Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

- Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

3. Những thuộc tính định kiểu cho nền

- Em hãy định kiểu độ trong suốt của nền là 0.3 và quan sát kết quả.

- Cách thiết lập màu nền cho các phần tử CSS như thế nào?

4. Những thuộc tính định kiểu cho đường viền, lề và vùng đệm

- Theo em, thay đổi các giá trị nào của vùng đệm thì phần văn bản nằm sát cạnh dưới của đường viền?

- Làm thế nào để sử dụng các thuộc tính border-width, border-color và border-style để tạo đường viền tùy chỉnh cho một phần tử?

- Nêu ví dụ về cách sử dụng các thuộc tính định kiểu lề để tạo bố cục trang web hợp lý và khoa học.

5. Vận dụng

Câu 1: Em hãy kể tên một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lễ và vùng đệm.

Câu 2: Thảo luận với bạn và nêu một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web.

Câu 3: Theo em, có những cách mô tả màu sắc nào trong mã lệnh CSS?

Câu 4: Em hãy định kiểu cho các thông tin cá nhân bằng phông chữ Georgia, họ tên có kích thước 24 pt, các thông tin còn lại có kích thước 20 pt.

Câu 5: Đối với mỗi ảnh trong mục Nội dung yêu thích, hãy định kiểu bo tròn 4 góc của ảnh để được kết quả như Hình 10.