Lý thuyết Tin học 12 Chân trời sáng tạo bài F7
Lý thuyết Tin học 12 bài F7: Giới thiệu CSS sách Chân trời sáng tạo hay nhất, ngắn gọn sẽ giúp học sinh lớp 12 nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin 12 Tin học ứng dụng.
Bài: Giới thiệu CSS
A. Lý thuyết Tin học 12 bài F7
1. Khái niệm CSS
- CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu các phần tử HTML trên trang web.
- CSS hỗ trợ định kiểu cho nhiều phần tử HTML trên một hoặc nhiều trang web cùng lúc, bao gồm việc mô tả bố cục, màu sắc, phông chữ, và các khía cạnh trực quan khác.
- CSS kiểm soát vị trí, kích thước, khoảng trống của các thành phần, giúp đáp ứng các yêu cầu phức tạp về bố cục mà HTML không thể thực hiện.
- CSS có thể tạo các hiệu ứng như đổ bóng, màu chuyển sắc, hiệu ứng hoạt hình và chuyển cảnh sinh động.
- HTML tập trung vào việc định hình nội dung và cấu trúc (tiêu đề, đề mục, đoạn văn, hình ảnh, video), trong khi CSS tập trung vào việc trình bày bố cục và hình thức của các phần tử trong trang web.
Lợi ích của CSS trong việc xây dựng trang web:
- Tạo ra thiết kế đẹp mắt và dễ sử dụng.
- Cải thiện khả năng tùy chỉnh và quản lý bố cục trang web.
- Giúp trang web đáp ứng và tương thích với nhiều thiết bị và kích thước màn hình khác nhau.
- Tăng hiệu suất tải trang web và giảm độ phức tạp của mã HTML.
a) Linh hoạt về bố cục:
- CSS có khả năng đáp ứng các yêu cầu phức tạp về bố cục, hình thức và hiệu ứng của trang web.
- Giúp thay đổi bố cục để phù hợp với các kích thước màn hình khác nhau của máy tính, điện thoại thông minh, v.v.
b) Nhất quán về hình thức:
- Đảm bảo sự nhất quán về hình thức cho toàn bộ các trang web trong cùng một website.
- Ví dụ: Định kiểu chung cho phần tử <h1> sẽ áp dụng cho tất cả các phần tử <h1> trên các trang, tạo sự đồng nhất và chuyên nghiệp.
c) Dễ bảo trì và nâng cấp:
- CSS giúp tách biệt nội dung (thẻ HTML) và hình thức (CSS), làm cho việc bảo trì và nâng cấp dễ dàng hơn
- Khi cần thay đổi hình thức của trang web, chỉ cần điều chỉnh mã CSS mà không ảnh hưởng đến nội dung.
d) Có thể tái sử dụng:
- Định kiểu bằng CSS cho phép tái sử dụng các thành phần trên cùng một trang web hoặc các trang web khác nhau.
2. Các cách bổ sung mã lệnh CSS trong trang web
Có ba cách thường được sử dụng để bổ sung mã lệnh CSS vào trang web.
Cách 1. Chèn trực tiếp mã lệnh CSS vào các thẻ mở của phần tử HTML thông qua thuộc tính style theo cú pháp:
tên_thẻ_HTML style="thuộc_tính CSS: giá trị; thuộc tỉnh CSS: giá trị; "
Cách này giúp định kiểu nhanh và trực tiếp cho một phần tử HTML cụ thể. Tuy nhiên, cách này có nhiều hạn chế, chẳng hạn như khó khăn bảo trì hoặc không thể tái sử dụng mã lệnh CSS.
Cách 2. Chèn cặp thẻ <style></style> kèm mã lệnh CSS vào giữa cặp thẻ <head></head> của tệp portfolio.html. Phần mã lệnh CSS trong thẻ <style> được viết theo cú pháp:
Cách 3. Tạo tệp mã lệnh CSS riêng biệt và chèn vào trang web một liên kết đến tệp CSS bằng thẻ <link> đặt vào giữa cặp thẻ <head></head). Thẻ <link> được viết theo cú pháp:
<link rel="stylesheet" type="text/css" href="đường dẫn tập CSS",
Cách này cũng đem lại kết quả tương tự như cách 2. Một số ưu điểm của cách này là tách rời các thành phần của một trang web, hỗ trợ khả năng làm việc cộng tác, khả năng bảo trì và tái sử dụng mã lệnh.
B. Trắc nghiệm Tin học 12 bài F7
1. Câu trắc nghiệm nhiều phương án lựa chọn
Câu 1: CSS là viết tắt của gì?
A. Cascading Style Sheets
B. Computer Style Sheets
C. Creative Style Sheets
D. Colorful Style Sheets
Đáp án: A
Giải thích: CSS là viết tắt của "Cascading Style Sheets," là ngôn ngữ dùng để định kiểu các phần tử HTML trên trang web.
Câu 2: Mục tiêu chính của CSS trong xây dựng trang web là gì?
A. Định hình nội dung và cấu trúc trang web
B. Tạo hiệu ứng hoạt hình và chuyển cảnh
C. Trình bày bố cục và hình thức của các phần tử HTML
D. Tăng tốc độ tải trang
Đáp án: C
Giải thích: CSS tập trung vào việc trình bày bố cục và hình thức của các phần tử trên trang web, trong khi HTML định hình nội dung và cấu trúc.
Câu 3: Lợi ích của CSS trong việc xây dựng trang web là gì?
A. Giảm tốc độ tải trang
B. Tăng cường khả năng tương thích và phản hồi với nhiều thiết bị
C. Chỉ áp dụng cho một trang web duy nhất
D. Làm cho mã HTML phức tạp hơn
Đáp án: B
Giải thích: CSS giúp trang web tương thích và đáp ứng trên nhiều thiết bị và kích thước màn hình khác nhau, cải thiện trải nghiệm người dùng.
Câu 4: Cách nào trong số các cách dưới đây không phải là cách bổ sung mã lệnh CSS vào trang web?
A. Chèn trực tiếp vào thuộc tính style của thẻ HTML
B. Sử dụng thẻ <style> trong phần <head>
C. Tạo tệp CSS riêng biệt và liên kết bằng thẻ <link>
D. Viết mã CSS trong thẻ <script>
Đáp án: D
Giải thích: Thẻ <script> được sử dụng để nhúng mã JavaScript, không phải CSS.
Câu 5: CSS có thể tạo ra những hiệu ứng nào sau đây?
A. Đổ bóng, màu chuyển sắc
B. Tạo bảng và định dạng văn bản
C. Thêm các thẻ HTML mới
D. Tăng dung lượng tệp trang web
Đáp án: A
Giải thích: CSS có thể tạo các hiệu ứng như đổ bóng, màu chuyển sắc, cùng với các hiệu ứng khác như hoạt hình và chuyển cảnh.
Câu 6: Tại sao CSS giúp dễ bảo trì và nâng cấp trang web?
A. Vì CSS làm tăng độ phức tạp của mã HTML
B. Vì CSS cho phép tách biệt nội dung và hình thức
C. Vì CSS tự động hóa tất cả các công việc
D. Vì CSS không thay đổi khi nội dung thay đổi
Đáp án: B
Giải thích: CSS tách biệt nội dung HTML và hình thức trình bày, giúp dễ dàng bảo trì và thay đổi phong cách mà không ảnh hưởng đến nội dung.
Câu 7: CSS giúp đảm bảo tính nhất quán về hình thức của các trang web như thế nào?
A. Bằng cách sử dụng cùng một tập lệnh cho tất cả các trang
B. Bằng cách áp dụng cùng một kiểu cho các phần tử tương tự trên nhiều trang
C. Bằng cách yêu cầu mọi người dùng cùng một trình duyệt
D. Bằng cách tự động cập nhật nội dung
Đáp án: B
Giải thích: CSS cho phép định kiểu chung cho các phần tử HTML, giúp duy trì sự nhất quán và chuyên nghiệp trên toàn bộ trang web.
Câu 8: CSS hỗ trợ định kiểu cho các phần tử nào?
A. Chỉ hình ảnh và video
B. Chỉ văn bản
C. Tất cả các phần tử HTML
D. Chỉ các liên kết
Đáp án: C
Giải thích: CSS có thể định kiểu cho tất cả các phần tử HTML, bao gồm văn bản, hình ảnh, video, và các thành phần khác.
Câu 9: Cách nào là cách tốt nhất để tái sử dụng mã CSS trên nhiều trang web?
A. Chèn trực tiếp mã CSS vào mỗi thẻ HTML
B. Sử dụng thẻ <style> trong phần <head> của từng trang
C. Tạo tệp CSS riêng biệt và liên kết bằng thẻ <link>
D. Viết mã CSS trực tiếp vào nội dung trang
Đáp án: C
Giải thích: Tạo tệp CSS riêng biệt và liên kết bằng thẻ <link> giúp tái sử dụng mã CSS dễ dàng trên nhiều trang web và hỗ trợ bảo trì.
Câu 10: Chức năng nào sau đây không thuộc về CSS?
A. Định dạng phông chữ và màu sắc
B. Xác định vị trí và kích thước của các phần tử
C. Tạo nội dung cho trang web
D. Thiết lập khoảng cách giữa các phần tử
Đáp án: C
Giải thích: CSS chỉ quản lý việc trình bày và bố cục của các phần tử, còn việc tạo nội dung là nhiệm vụ của HTML.
2. Câu trắc nghiệm đúng sai
Câu 1: Xác định đúng hoặc sai cho các phát biểu sau về CSS:
a) CSS giúp định hình nội dung và cấu trúc của trang web.
b) CSS có thể tạo các hiệu ứng như đổ bóng và chuyển cảnh.
c) CSS chỉ áp dụng cho một phần tử HTML cụ thể.
d) CSS giúp tăng hiệu suất tải trang web.
a) Sai, vì việc định hình nội dung và cấu trúc là nhiệm vụ của HTML, trong khi CSS tập trung vào việc trình bày và bố cục.
b) Đúng, CSS có thể tạo ra các hiệu ứng như đổ bóng và chuyển cảnh.
c) Sai, CSS có thể được áp dụng cho nhiều phần tử HTML, không chỉ một phần tử cụ thể.
d) Đúng, CSS giúp cải thiện hiệu suất tải trang web bằng cách tách rời phần tử hình thức và nội dung.
Câu 2: Đánh giá đúng hoặc sai cho các phát biểu sau về các phương pháp bổ sung mã lệnh CSS?
a) Chèn trực tiếp mã CSS vào thuộc tính style của thẻ HTML là cách tốt nhất để tái sử dụng mã lệnh CSS.
b) CSS cho phép tách rời nội dung và hình thức, làm cho việc bảo trì trang web dễ dàng hơn.
c) CSS có thể được viết trong một tệp riêng biệt và liên kết vào trang web qua thẻ <link>.
d) Việc sử dụng CSS giúp duy trì sự nhất quán về hình thức trên toàn bộ trang web.
a) Sai, vì việc chèn trực tiếp mã CSS vào thuộc tính style của thẻ HTML không phải là cách tốt nhất để tái sử dụng mã lệnh CSS; sử dụng tệp CSS riêng biệt là cách tốt hơn.
b) Đúng, CSS tách rời nội dung (HTML) và hình thức (CSS), giúp dễ dàng bảo trì và thay đổi giao diện trang web mà không ảnh hưởng đến nội dung.
c) Đúng, CSS có thể được viết trong tệp riêng biệt và liên kết vào trang web qua thẻ <link>.
d) Đúng, CSS giúp duy trì sự nhất quán về hình thức trên toàn bộ trang web bằng cách áp dụng cùng một kiểu cho các phần tử tương tự.
3. Câu trả lời ngắn
Câu 1: CSS là gì và vai trò của nó trong thiết kế trang web?
Đáp án: CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu các phần tử HTML trên trang web. CSS giúp trình bày và bố cục các phần tử trong trang web, bao gồm màu sắc, phông chữ, kích thước, và các hiệu ứng trực quan khác.
Giải thích: CSS giúp trang web có giao diện đẹp mắt và dễ sử dụng bằng cách tách biệt phần nội dung và hình thức. Điều này giúp quản lý và tùy chỉnh giao diện trang web dễ dàng hơn.
Câu 2: Các lợi ích chính của CSS khi xây dựng trang web là gì?
Đáp án: Các lợi ích chính của CSS bao gồm: tạo ra thiết kế đẹp mắt và dễ sử dụng, cải thiện khả năng tùy chỉnh và quản lý bố cục, giúp trang web tương thích với nhiều thiết bị và kích thước màn hình khác nhau, và tăng hiệu suất tải trang web.
Giải thích: CSS giúp tối ưu hóa giao diện và hiệu suất của trang web, làm cho trải nghiệm người dùng tốt hơn và dễ dàng duy trì, nâng cấp trang web.
Câu 3: Có bao nhiêu cách để bổ sung mã lệnh CSS vào trang web và cách nào là tốt nhất để tái sử dụng mã lệnh CSS?
Đáp án: Có ba cách để bổ sung mã lệnh CSS vào trang web: chèn trực tiếp vào các thẻ HTML, sử dụng thẻ <style> trong <head>, và sử dụng tệp CSS riêng biệt thông qua thẻ <link>. Cách sử dụng tệp CSS riêng biệt là tốt nhất để tái sử dụng mã lệnh CSS.
Giải thích: Sử dụng tệp CSS riêng biệt giúp tách rời các thành phần của trang web, làm cho việc bảo trì và cập nhật dễ dàng hơn, và cho phép tái sử dụng mã lệnh trên nhiều trang khác nhau.
>>>> Bài tiếp theo: Lý thuyết Tin học 12 Chân trời sáng tạo bài F8
- Bài F8: Một số thuộc tính cơ bản của CSS
- Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS
- Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS
- Bài F10: Định kiểu CSS cho siêu liên kết và danh sách
- Bài F11: Định kiểu CSS cho bảng và phần tử <div>
- Bài F12: Định kiểu CSS cho biểu mẫu
- Bài F13: Dự án tạo trang web (tiếp theo)
