Lý thuyết Tin 12 Bài 13: Khái niệm, vai trò của CSS - Kết nối tri thức
Haylamdo biên soạn tóm tắt lý thuyết Tin học 12 Bài 13: Khái niệm, vai trò của CSS sách Kết nối tri thức 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 13: Khái niệm, vai trò của CSS - Kết nối tri thức
1. Khái niệm mẫu định dạng:
Trong đoạn mã nguồn ở Hình 13.2, các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheet và viết tắt là CSS.
CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web.
CSS (Cascading Style Sheets) là định dạng độc lập với chuẩn HTML, dùng để thiết lập các mẫu định dạng cho trang web.
Mẫu định dạng CSS là một công cụ hỗ trợ giúp định dạng nội dung trang web nhanh hơn, thuận tiện hơn bằng cách định nghĩa một lần và sử dụng nhiều lần. CSS sử dụng ngôn ngữ mô tả riêng, độc lập với HTML.
2. Cấu trúc CSS:
Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declaration block). Vùng mô tả bao gồm một hay nhiều quy định có dạng {thuộc tính : giá trị ; }, các quy định được viết cách nhau bởi dấu “;”. Bộ chọn sẽ quy định những thẻ HTML nào được chọn để áp dụng định dạng này.
Cấu trúc CSS có thể ở dạng đơn giản, trong đó vùng mô tả chỉ có một quy định:
bộ chọn {thuộc tính: giá trị;}
hoặc nhiều quy định ở vùng mô tả như sau: bộ chọn {
thuộc tỉnh 1: giá trị 1;
thuộc tỉnh 2: giá trị 2;
thuộc tính n: giá trị n;
Ví dụ 1: Mẫu CSS thiết lập màu chữ đỏ cho bộ chọn là tất cả các thẻ h1.
h1 {color: red;}
Ví dụ 2: Mẫu CSS gồm hai quy định, thụt lề dòng đầu và chữ màu xanh áp dụng cho bộ chọn là tất cả các thẻ p.
p {text-indent: 15px; color: blue;}
Bộ chọn có thể là một thẻ để áp dụng như hai ví dụ trên hoặc đồng thời nhiều thẻ. Cách viết này giúp cho CSS dễ thiết lập và áp dụng.
Ví dụ 3: Mẫu CSS sau thiết lập định dạng chữ đỏ cho đồng thời các thẻ h1, h2, h3, Các thẻ này được viết cách nhau bởi dấu phẩy.
h1, h2, h3 {color: red;}
Có ba cách thiết lập CSS là CSS trong (internal CSS), CSS ngoài (external CSS) và CSS nội tuyến (inline CSS).
a)Cách thiết lập CSS trong:
Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ <style> và đặt trong phần tử <head> của tệp HTML. Các định dạng sẽ áp dụng cho tất cả các phần tử HTML trên trang web phù hợp với mô tả của bộ chọn CSS. Với cách thiết lập CSS trong, các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện tại. Cách thiết lập CSS trong ví dụ ở Hoạt động 1 là thiết lập CSS trong.
b) Cách thiết lập CSS ngoài
Các mẫu định dạng CSS được viết trong một tập css, bên ngoài tập HTML. Tệp
css này sẽ bao gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS. Sau đó, cần thực hiện thao tác kết nối, liên kết tập HTML với tệp định dạng css.
Cách kết nối tập HTML với CSS như sau:
Cách 1: Sử dụng thẻ link đặt trong vùng head của trang web
Cách 2: Sử dụng lệnh @import đặt trong phần tử style và nằm trong phần head của trang web
Một tệp CSS có thể được thiết lập để áp dụng cho nhiều trang web, giúp đồng bộ hóa định dạng và tiết kiệm thời gian chỉnh sửa chỉ bằng cách sửa một lần trong tệp CSS.
c)Cách thiết lập CSS nội tuyến:
- Có thể định dạng CSS trực tiếp trong thẻ của các phần tử HTML bằng cách sử dụng thuộc tính `style`.
- Cách này mất thời gian hơn khi viết mã nhưng có thể thực hiện nhanh chóng và có lợi ích riêng, sẽ được trình bày trong phần sau.
->Cấu trúc tổng quát của CSS bao gồm các mẫu định dạng dùng để tạo khuôn cho các phần tử HTML của trang web. Mỗi mẫu này bao gồm hai phần: bộ chọn và vùng mô tả. Có thể thiết lập CSS trong, ngoài thông qua tệp CSS hoặc đặt nội tuyến trực tiếp bên trong các phần tử HTML thông qua thuộc tính style.
3. Vai trò, ý nghĩa của CSS:
Nếu không sử dụng CSS, việc định dạng nội dung trang web phải thực hiện bằng cách thiết lập các thuộc tính cho từng phần tử HTML, điều này tốn thời gian và có thể không đồng nhất nếu có nhiều trang web và phần tử HTML. CSS được thiết kế để định dạng trang web một cách thống nhất, nhanh chóng và thuận tiện.
CSS giúp tách việc nhập nội dung HTML và định dạng thành hai công việc độc lập, giảm bớt công việc nhập nội dung và tăng tính chuyên nghiệp trong việc định dạng.
- Các mẫu định dạng CSS có thể viết trong phần `<head>` của trang HTML, áp dụng cho tất cả các phần tử trong bộ chọn, và được sử dụng nhiều lần.
- Các mẫu định dạng cũng có thể viết trong tệp CSS ngoài và kết nối vào bất kỳ trang web nào, cho phép áp dụng một lần cho nhiều trang web hoặc toàn bộ website. Thay đổi định dạng chỉ cần chỉnh sửa một lần.
->CSS được thiết lập với mục đích làm cho công việc định dạng nội dung trang web trở nên khoa học hơn, nhanh hơn, thuận tiện hơn. Với CSS, các mẫu định dạng được thiết kế độc lập, có thể viết ra một lần nhưng được áp dụng nhiều lần.