Video giảng Tin học ứng dụng 12 cánh diều Bài 8: Làm quen với CSS

Tóm lược nội dung

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

Chào mừng các em đến với bài học ngày hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:

• Bảng định dạng CSS
• Khai báo bộ chọn phần tử và áp dụng CSS
• Một số thuộc tính định dạng CSS

KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời các câu hỏi.

HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1: Bảng định dạng CSS

+ 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?

Video trình bày nội dung:

- 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

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

+ 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?..

Video trình bày nội dung:

- 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ử đó…

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

+ 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?

Video trình bày nội dung:

- 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)…

Nội dung video Bài 8: “Làm quen với CSS” còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.