1. Khái niệm mẫu định dạng CSS
Trong tệp HTML, mẫu định dạng (Cascading Style Sheet, gọi tắt là CSS) là một số đoạn mã được viết nằm giữa cặp thẻ <style></style>.
Mẫu định dạng được viết độc lập với mã nguồn của trang web và dùng để định dạng phần tử HTML tương ứng.
Nhờ có CSS mà hạn chế số lần thiết lập các nội dung có cùng định dạng.
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.Câu hỏi:
@202869084139@@202869085838@
2. Cấu trúc CSS
Một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declartion block).
Vùng mô tả gồm nhiều quy định, mỗi quy định (là một cặp thuộc tính: giá trị) ngăn cách nhau bởi dấu chấm phẩy ";".
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ụ. Viết bộ chọn cho một số tình huống.
- Thiết lập màu chữ đỏ cho các bộ chọn là tất cả các thẻ tiêu đề H1:
h1{color: red}
- Thiết lập thụt lề dòng đầu và chữ màu xanh áp dụng cho tất cả các thẻ văn bản:
p{text-indent: 15px; color: blue;}
- Thiết lập màu chữ đỏ cho các thẻ tiêu đề H1, H2, H3:
h1, h2, h3{color: red}
a) Thiết lập CSS trong (internal CSS)
Cách thiết lập đư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 chỉ được áp dụng cho tệp HTML hiện thời.
b) Thiết lập CSS ngoài (external CSS)
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.
❓Ví dụ. Chèn một tệp CSS có tên style.css vào trong tệp HTML cùng nằm trong một thư mục.
- Cách 1. Sử dụng thẻ <link> đặt trong vùng <head> của trang web:
<head><link href="style.css" rel="stylesheet" type="text/css"></head>
- Cách 2. Sử dụng lệnh @import trong phần tử style và nằm trong phần head của trang web:
<style> @import "style.css" </style>
Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tập định dạng css.
c) Thiết lập CSS nội tuyến (inline CSS)
Có thể định dạng CSS trực tiếp bên trong thẻ của các phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style. Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh.
Câu hỏi:
@202869108553@@202869110180@@202869111791@
3. Vai trò, ý nghĩa của CSS
CSS giúp định dạng nội dung trang web một cách nhanh chóng và đồng nhất. Định dạng trở nên khoa học, thuận tiện và chuyên nghiệp hơn.
Tách biệt nội dung HTML và định dạng làm giảm khối lượng công việc nhập nội dung.
CSS cho phép viết các mẫu định dạng trong phần head của trang HTML hoặc tệp CSS ngoài, áp dụng cho nhiều phần tử hoặc trang web. Điều này làm cho việc thay đổi định dạng trở nên dễ dàng và hiệu quả.
