Bài giảng Tin học 12 (Cánh diều) - Chủ đề F: Giải quết vấn đề với sự trợ giúp của máy tính. Tạo trang web - Bài 8: Làm quen với CSS

Nội dung tài liệu: Bài giảng Tin học 12 (Cánh diều) - Chủ đề F: Giải quết vấn đề với sự trợ giúp của máy tính. Tạo trang web - Bài 8: Làm quen với CSS

1. 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ữ?
2. Để trình bày các đoạn văn bản, tiêu đề và nhãn có cùng màu chữ trên trang web, bạn có thể sử dụng CSS để áp dụng các quy tắc kiểu cho các phần tử tương ứng. Đầu tiên, bạn cần tạo hoặc chỉnh sửa tệp CSS để định dạng màu chữ cho các phần tử. Sau đó, liên kết tệp CSS với tệp HTML và áp dụng các quy tắc CSS cho các phần tử HTML trong trang. Điều này giúp đảm bảo rằng các đoạn văn bản, tiêu đề và nhãn trên trang web của bạn sẽ có cùng màu chữ.
3. CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH TẠO TRANG WEB BÀI 8: LÀM QEN VỚI CSS
4. NỘI DUNG BÀI HỌC 02 Khai báo chọn phần tử và áp dụng CSS 01 Bảng định dạng CSS 03 Một số thuộc tính định dạng CSS
5. 01 Bảng định dạng CSS
6. Bảng định dạng CSS • 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. • CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định danh như minh họa ở Hình 1 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ử, ví dụ: màu sắc, phông chữ,kích cỡ chữ, đường viền, ..
7. 02 Khai báo bộ chọn phần tử và áp dụng CSS
8. Khai báo bộ chọn phần tử và áp dụng CSS Bộ chọn phần tử được khai báo như sau:
9. Khai báo bộ chọn phần tử và áp dụng CSS 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
10. Khai báo bộ chọn phần tử và áp dụng CSS Có hai cách khai báo để áp dụng CSS trong văn bản HTML được sử dụng phổ biến là:CSS(internal CSS) và 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 vi một văn bản HTML.Các quy tắc định dạng internal CSS được viết trong cặp thẻ và thường được đặt trong nội dung của phần tử head. • Để áp dụng external CSS, trong nội dung phần head của văn bản HTML, cần khai báo tham chiến đến tệp CSS có dạng Tên_tệp css, được viết dưới dạng .
11. Khai báo bộ chọn phần tử và áp dụng CSS 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ử. Khi mở văn bản bằng trình duyệt web, các tiêu đề mục h1 có chữ màu đỏ, các đoạn văn p có chữ màu xanh như ở Hình 3b.
12. Khai báo bộ chọn phần tử và áp dụng CSS Ví dụ 3. Văn bản HTML ở hình 4a áp dụng các quy tắc định đang được khai báo trong tệp extermal CSS có tên “default.css”(hình 4b),kết quả hiển thị trên màn hình máy tính duyệt web như ở hình 4c.
13. Khai báo bộ chọn phần tử và áp dụng CSS Trong trường hợp có một phần tử có các khai báo CSS giống nhau có thể góp nhiều bộ chọn để không phải khai báo lặp các thuộc css nhiều lần cho từng phần tử. khi đó bộ chọn gồm danh sách các phầ tử ngăn cách nhau bởi dấu “,” Ví dụ 4. Các booh chọn p, h1 và h2, h3 cũng có chung quy tắc định dạng nên đc viết gộp thành hình 5
14. 03 MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS
15. Dưới đây là một số thuộc tính định dạng văn bản phổ biến trong hệ soạn thảo văn bản Microsoft Word: - 1. Font: Cho phép bạn chọn kiểu chữ (ví dụ: Times New Roman, Arial, Calibri). - 2. Kích thước: Định dạng kích thước chữ (ví dụ: 12pt, 14pt). - 3. In đậm: Làm đậm chữ. - 4. Nghiêng: Làm nghiêng chữ. - 5. Gạch chân: Gạch chân dưới chữ. - 6. Gạch ngang: Gạch ngang qua chữ. - 7. Màu chữ: Thay đổi màu của chữ. - 8. Dòng nổi: Tạo dòng chữ nổi lên so với văn bản xung quanh. - 9. Dòng chìm: Tạo dòng chữ lõm xuống so với văn bản xung quanh. - 10. Canh lề: Điều chỉnh lề trái, phải, trên, dưới của văn bản. - 11. Thụt đầu dòng: Thiết lập thụt vào dòng đầu tiên của đoạn văn bản. - 12. Chèn hiện thị và ẩn: Chèn hoặc ẩn văn bản trong văn bản. - 13. Dòng chữ đồng đều: Canh đều cả hai lề của văn bản. - 14. Chèn liên kết: Chèn liên kết đến trang web hoặc tài liệu khác. - 15. Chèn chú thích: Chèn chú thích hoặc ghi chú vào văn bản.
16. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS a. Thuộc tính định dạng màu sắc - Cách khai báo: 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, .
17. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS Ví dụ 5. Văn bản HTML trong hình 6a sẽ trình bày bởi 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ị màn hình trình duyệt web (hình 6b)
18. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS Thuộc tính background-color đạnh dạng màu nền, áp dụng được cho tất cả phần tử, được khai báo như sau:
19. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS Ví dụ 6: Văn bản HTML trong hình 7a sẽ trình bày màu xanh lơ khi hiển thị màn hình trình duyệt web (hình 7b)