Slide bài giảng Tin học ứng dụng 12 kết nối bài 13: Khái niệm, vai trò của CSS
Slide điện tử bài 13: Khái niệm, vai trò của CSS. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Tin học ứng dụng 12 Kết nối tri thức sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI 13. KHÁI NIỆM, VAI TRÒ CỦA CSS
KHỞI ĐỘNG
Quan sát trang web trong Hình 13.1 và trả lời các câu hỏi sau:
- Mã nguồn chan web có những phần tử HTML nào?
- Định dạng các phần tử HTML này có những đặc điểm chung nào?
- Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML được không?
Trả lời rút gọn:
- Chúng ta đã sử dụng lớp CSS "red-bold" để định dạng chữ màu đỏ và in đậm cho các phần tử <p>. Bằng cách áp dụng lớp CSS này cho nhiều phần tử <p> khác nhau, chúng ta có thể áp dụng cùng một mẫu định dạng cho nhiều phần tử HTML.
- Mã nguồn trang web có thể bao gồm nhiều phần tử HTML khác nhau như <html>, <head>, và <body>.
- Các phần tử HTML có thể được định dạng chung bằng cách sử dụng CSS để áp dụng các quy tắc định dạng cho một lớp hoặc mẫu và áp dụng nó cho nhiều phần tử.
1. Khái niệm mẫu định dạng css
Hoạt động 1: Tìm hiểu khái niệm và ý nghĩa của CSS
1. Hình 13.2 là mã nguồn của trang web trong hình 13.1. Em có nhận xét gì về cách thiết lập định dạng của trang này.
2. Em thấy gì từ đoạn mã nguồn trên?
Trả lời rút gọn:
Ta thấy định dạng của trang web được thiết lập bằng CSS (Cascading Style Sheets). CSS là một ngôn ngữ độc lập với HTML, được sử dụng để định dạng và thiết kế trang web.
Trong Hình 13.3, chúng ta thấy ba mẫu định dạng CSS được ghi trong thẻ <style>...</style> trong phần tử <head>. Các mẫu định dạng này được áp dụng cho các phần tử HTML tương ứng trong trang web:
Mẫu định dạng đầu tiên (h1 {color: red;}) thiết lập màu chữ đỏ cho các phần tử <h1>.
Mẫu định dạng thứ hai (h1 {border: 2px solid blue;}) thiết lập một khung viền màu xanh có độ dày 2 pixel cho các phần tử <h1>.
Mẫu định dạng thứ ba (p {text-indent: 15px;}) thiết lập thụt đầu dòng vào 15 pixel cho tất cả các phần tử <p>.
Câu hỏi 1: Ngôn ngữ CSS có phải là HTML không?
Trả lời rút gọn:
Ngôn ngữ CSS không phải là HTML mà CSS (Cascading Style Sheets) là một ngôn ngữ độc lập với HTML được sử dụng để định dạng và thiết kế trang web.
Câu hỏi 2: Các mẫu định dạng CSS thường được mô tả như thế nào?
A. Trong một bảng.
B. Phải viết trên một hàng.
C. Có thể viết trên nhiều hàng.
Trả lời rút gọn:
Chọn đáp án đúng là C.
2. CẤU TRÚC CSS
Hoạt động 2: Tìm hiểu cấu trúc tổng quát của CSS
Quan sát, tìm hiểu và thảo luận về cấu trúc tổng quát của các mẫu định dạng CSS
Trả lời rút gọn:
- Vùng mô tả (declaration block): gồm một hay nhiều quy định có dạng
- Bộ chọn (selector): quy định những thẻ HTML nào được chọn để áp dụng định dạng này.
Câu hỏi 1: Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì làm cách nào?
Trả lời rút gọn:
Ta thiết lập CSS trong (internal CSS) hoặc cách thiết lập CSS ngoài (external CSS).
Câu hỏi 2: Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì làm cách nào?
Trả lời rút gọn:
Ta sử dụng cách thiết lập CSS ngoài. Em có thể tạo một tệp CSS riêng, chứa các mẫu định dạng CSS, và sau đó liên kết tệp CSS này với các trang web khác nhau bằng cách sử dụng thẻ link hoặc lệnh @import trong phần tử <head> của trang web. Điều này giúp áp dụng đồng thời các mẫu định dạng CSS cho nhiều trang web một cách dễ dàng và thống nhất.
3. VAI TRÒ, Ý NGHĨA CỦA CSS
Hoạt động 3: Tìm hiểu ý nghĩa, vai trò của CSS
Tìm hiểu, thảo luận và trả lời các câu hỏi sau:
1. Nếu không dùng CSS thì các định dạng của trang web phải thực hiện theo cách nào?
2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web.
Trả lời rút gọn:
1. Các trang web phải được thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML. Điều này đòi hỏi thời gian và công sức để định dạng từng phần tử một và có thể dẫn đến việc không thống nhất trong cách định dạng.
2.
- Tách biệt giữa nội dung (HTML) và mẫu định dạng (CSS), giúp quản lý và bảo trì trang web dễ dàng hơn.
- Mã CSS có thể viết một lần và áp dụng cho nhiều phần tử HTML, giúp tiết kiệm thời gian và công sức.
- CSS cho phép tạo ra các mẫu định dạng độc lập, mà có thể áp dụng cho nhiều trang web hoặc toàn bộ website một cách dễ dàng.
- CSS cung cấp các tính năng đa dạng như chọn lọc phần tử, kết hợp và kế thừa định dạng, giúp định dạng trang web linh hoạt và mạnh mẽ hơn.
- Sử dụng CSS, bạn có thể áp dụng hiệu ứng, tạo layout phức tạp, điều chỉnh kích thước và vị trí phần tử một cách linh hoạt.
CSS cung cấp khả năng tùy chỉnh định dạng cho các thiết bị khác nhau, như màn hình máy tính, điện thoại di động và máy in, để tối ưu trải nghiệm người dùng trên các nền tảng khác nhau.
Câu hỏi 1: Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như thế nào?
Trả lời rút gọn:
- CSS nội tuyến (Inline CSS).
- CSS trong (Internal CSS).
- CSS ngoài (External CSS).
Câu hỏi 2: Giả sử có một mẫu định dạng CSS như sau:
Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.
Trả lời rút gọn:
- h1, h2, h3 là bộ chọn (selector) trong CSS. Trong trường hợp này, nó áp dụng định dạng cho tất cả các phần tử <h1>, <h2>, và <h3> trong tài liệu HTML.
- border: 2px solid red; là một khai báo CSS được áp dụng cho các phần tử đã được chọn. Trong trường hợp này, nó định dạng đường viền (border) của các phần tử này. Cụ thể, đường viền có độ dày 2 pixel, màu sắc đỏ, và kiểu đường viền là "solid" (đường viền liền).
LUYỆN TẬP
Câu 1: Khẳng định "Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML" là đúng hay sai?
Trả lời rút gọn:
Sai. Ngôn ngữ định dạng CSS (Cascading Style Sheets) và ngôn ngữ HTML (Hypertext Markup Language) là hai ngôn ngữ khác nhau và có mục đích sử dụng khác nhau trong việc xây dựng trang web. HTML định nghĩa cấu trúc và nội dung, trong khi CSS định dạng và trình bày các phần tử HTML.
Câu 2: Khẳng định "Có thể chỉ cần thay đổi thông tin của một tệp CSS sẽ làm thay đổi định dạng của nhiều trang web, thậm chí cả một website" là đúng hay sai?
Trả lời rút gọn:
Đúng. Khi thay đổi thông tin trong một tệp CSS, bạn có thể làm thay đổi định dạng của nhiều trang web hoặc cả một website.
VẬN DỤNG
Câu 1: Trong các phần mềm soạn thảo văn bản thường có chức năng tạo các mẫu định dạng Style Sheet dùng để tạo khuôn cho các đoạn (paragraph) của văn bản.
Em hãy trình bày sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web.
Trả lời rút gọn:
Chúng có sự giống nhau và tương thích với nhau trong việc định dạng và trình bày các phần tử văn bản. Sự tương đồng này cho phép bạn áp dụng kiến thức và kỹ năng CSS của bạn từ trang web sang các phần mềm soạn thảo văn bản và ngược lại.
Câu 2: Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.
Trả lời rút gọn:
Em thực hiện sử dụng mã HTML để dùng kiểu chữ đậm, rồi thực hiện toàn bài như sau:
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
