Giáo án điện tử Khoa học máy tính 12 cánh diều Bài 8: Làm quen với CSS

BÀI 8. LÀM QUEN VỚI CSS

KHỞI ĐỘNG

Theo em, làm thế nào để trình bày các đoạn văn bản, tiêu đề, nhãn trong trang web có cùng màu chữ?

1. BẢNG ĐỊNH DẠNG CSS

2. KHAI BÁO BỘ CHỌN PHẦN TỬ VÀ ÁP DỤNG CSS

3. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS

Hoạt động: Em hãy nêu một số thuộc tính định dạng văn bản mà em đã dùng trong hệ soạn thảo văn bản Microsoft Word.

• Em đã sử dụng thuộc tính nào để thay đổi kiểu chữ (font) trong văn bản trên Microsoft Word?

• Làm thế nào để thay đổi kích thước của văn bản trong Microsoft Word?

• Thuộc tính nào được sử dụng để làm nổi bật văn bản bằng việc làm đậm (bold)?

• Làm thế nào để nghiêng (italicize) văn bản trong Microsoft Word?

• Em đã sử dụng thuộc tính nào để gạch chân (underline) văn bản trong tài liệu trên Microsoft Word?

Luyện tập: Em hãy soạn văn bản HTML có hai đoạn văn bản được tạo bởi phần tử p. Khai báo và áp dụng internal CSS để trình bày trang web có nền màu xanh lơ (cyan); đoạn văn bản có chữ màu đỏ, phông chữ Arial, cỡ chữ 15 pixel.

• Trong HTML, để tạo một đoạn văn bản, em sử dụng phần tử gì?

• Làm thế nào để khai báo CSS nội bộ trong một tài liệu HTML?

• Để thiết lập màu nền của trang web thành màu xanh lơ (cyan), em sử dụng thuộc tính CSS nào?

• Làm thế nào để đặt màu chữ của đoạn văn bản trong CSS?

• Trong CSS, để chọn tất cả các phần tử <p> trong tài liệu HTML, em sử dụng cú pháp như thế nào?

• Thuộc tính font-family trong CSS được sử dụng để làm gì?

• Làm thế nào để đặt cỡ chữ của đoạn văn bản thành 15 pixel bằng CSS?

• Nếu em muốn áp dụng CSS chỉ cho một phần tử <p> cụ thể, thì em sẽ làm như thế nào?

• Ngoài color, thuộc tính CSS nào còn được sử dụng để điều chỉnh hình dạng và kích thước của văn bản?

• Làm thế nào để thêm một tiêu đề (heading) <h1> có màu chữ xanh nước biển vào trang web của em?

Vận dụng: 

• Em hãy chuyển các khai báo internal CSS trong mục Luyện tập thành khai báo external CSS ghi lưu với tên tệp “styles.css”, tạo mới văn bản HTML để áp dụng bảng định dạng styles.css này.

TỰ KIỂM TRA

Mỗi phát biểu sau đây về CSS là đúng hay sai?

• Sử dụng CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web.

• (b) Để áp dụng CSS, trong văn bản HTML phải khai báo tham chiếu đến tệp CSS.

• Sử dụng external CSS giúp cho nhiều trang web trong một website có thể

• dùng chung kiểu định dạng và trang trí.

• Khai báo CSS sử dụng bộ chọn phần tử: p{color=red; font-size:20px;} là đúng cú pháp.