Lý thuyết Tin 12 Bài F7: Giới thiệu CSS - Chân trời sáng tạo
Haylamdo biên soạn tóm tắt 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.
Lý thuyết Tin 12 Bài F7: Giới thiệu CSS - Chân trời sáng tạo
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 í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.