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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Bảng định dạng CSS là gì?

+ Bảng định dạng CSS được khai báo như thế nào?

+ CSS có vai trò như thế nào trong việc định dạng trang web?

+ Trình duyệt web áp dụng CSS như thế nào?

- GV cung cấp cho HS một số thông tin về lịch sử phát triển của CSS.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.68 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

1. Bảng định dạng CSS

- Khái niệm: Bảng định dạng (Cascading Style Sheets - CSS) là ngôn ngữ được sử dụng để khai báo kiểu trình bày các phần tử HTML trong trang web. 

- Cấu trúc: CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (css properties) để xác định kiểu trình bày cho phần tử như màu sắc, phông chữ, kích cỡ, đường viền,...

Hình 1. Một ví dụ CSS có hai quy tắc 
định dạng

- Vai trò: 

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

Khai báo CSS dễ dàng được chỉnh sửa, tái sử dụng. 

+ CSS cho phép nhiều trang web hay toàn bộ website cùng dùng chung quy tắc định dạng nhằm tạo sự thống nhất trong trình bày.

- Trình duyệt web áp dụng CSS bằng cách chọn các phần tử trong văn bản HTML khớp với bộ chọn trong CSS và sử dụng các quy tắc định dạng tương ứng để trình bày phần tử.

- Lịch sử phát triển: 

+ Phiên bản đầu tiên CSS1 được công bố vào năm 1996. 

+ Cho đến nay, CSS đã cập nhật và hoàn thiện thêm một số phiên bản. 

+ Trong quyển sách này, phiên bản CSS3 được sử dụng để minh hoạ khai báo CSS.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Bộ chọn phần tử được dùng để làm gì?

+ CSS định nghĩa bộ chọn với mỗi phần tử HTML như thế nào?

+ Bộ chọn phần tử được khai báo như thế nào?

+ Có mấy cách khai báo để áp dụng CSS trong văn bản HTML?

+ Internal CSS được sử dụng và khai báo như thế nào? 

+ External CSS được sử dụng và khai báo như thế nào?

- GV lưu ý HS cách khai báo gộp các bộ chọn phần tử.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.68 – 70 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

2. Khai báo bộ chọn phần tử và áp dụng CSS

- Bộ chọn phần tử thường được dùng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML nhằm tạo sự thống nhất trong trình bày.

Ví dụ: Trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. 

- Với mỗi phần tử HTML, CSS định nghĩa một bộ chọn tương ứng và đặt tên theo tên phần tử đó.

- Cú pháp khai báo bộ chọn phần tử:

Ví dụ 1: Quy tắc định dạng ở Hình 2 xác định kiểu trình bày nội dung của phần tử p trong văn bản HTML có chữ màu đỏ và in đậm.

Hình 2. Một quy tắc định dạng CSS

- Có hai cách khai báo được sử dụng phổ biến để áp dụng CSS trong văn bản HTML: 

+ CSS trong (internal CSS).

+ CSS ngoài (external CSS).

- Khai báo internal CSS: 

+ Thường được sử dụng khi muốn áp dụng CSS trong phạm vì một văn bản HTML. 

+ Các quy tắc định dạng được viết trong cặp thẻ <style></style> và thường được đặt trong nội dung của phần tử head.

Ví dụ 2: Trong văn bản HTML ở Hình 3a, dòng 5 và dòng 6 có khai báo CSS sử dụng bộ chọn phần tử. Kết quả hiển thị như Hình 3b.

Hình 3a. Ví dụ khai báo internal CSS 
và áp dụng bộ chọn phần tử

Hình 3b. Kết quả khi mở văn bản HTML 
ở Hình 3a bằng trình duyệt web

- Khai báo external CSS: 

+ Thường được sử dụng khi cần áp dụng chung bảng định dạng CSS cho nhiều văn bản HTML. 

+ Các quy tắc định dạng được ghi lưu dưới dạng tệp có phần mở rộng *.css.  

+ Để áp dụng external CSS, thêm khai báo <link rel=“stylesheet” href=“Tên_tệp.css”> vào trong nội dung phần head của văn bản HTML.

Ví dụ 3: Văn bản HTML ở Hình 4a áp dụng các quy tắc định dạng được khai báo trong tệp external CSS có tên “default.css” (Hình 4b). Kết quả hiển thị như Hình 4c.

- Trong trường hợp một số phần tử có các khai báo CSS giống nhau, có thể viết gộp nhiều bộ chọn. Khi đó, bộ chọn gồm danh sách các phần tử, ngăn cách nhau bởi dấu “,”.

Ví dụ 4: Các bộ chọn p, h1 và h2, h3 cùng có chung quy tắc định dạng nên được viết gộp như ở Hình 5.

Hình 5. Ví dụ khai báo gộp các bộ chọn phần tử

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

a) Thuộc tính định dạng màu sắc 

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS vận dụng kiến thức thực tiễn, trả lời câu hỏi Hoạt động SGK tr.70:

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

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Trong CSS, thuộc tính định dạng màu chữ và màu nền được khai báo như thế nào?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 3a SGK tr.71 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

………………………

3. Một số thuộc tính định dạng CSS

a) Thuộc tính định dạng màu sắc

- Thuộc tính color định dạng màu chữ, được khai báo như sau:

Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,…

Ví dụ 5: Văn bản HTML trong Hình 6a  trình bày các phần tử h1, h2 có màu xanh nước biển, phần tử p có màu đỏ khi hiển thị trên màn hình trình duyệt web (Hình 6b).

…………………………..