TRANG CHỦ

Tin học 12 - Bài 13: Khái niệm, vai trò của CSS

Tóm tắt khái niệm mẫu định dạng CSS, cấu trúc selector + declaration block, 3 cách thiết lập (internal, external, inline) và ý nghĩa của CSS trong việc tách nội dung khỏi trình bày, chuẩn bị cho phần luyện tập.

1. Khái niệm mẫu định dạng CSS

  • CSS (Cascading Style Sheets): ngôn ngữ mô tả kiểu trình bày cho HTML, viết riêng và độc lập với nội dung HTML.
  • Viết một lần - dùng nhiều nơi: áp dụng đồng thời cho nhiều phần tử hoặc nhiều trang.
  • Ví dụ trong thẻ <style> (trang 71–72): đặt màu, viền cho h1, thụt dòng cho p.
Ví dụ nhanh:

<style>
  h1 { color: #0ea5e9; border-bottom: 2px solid #0ea5e9; }
  p { text-indent: 24px; line-height: 1.6; }
</style>

CSS style cascading trình bày

2. Cấu trúc một mẫu CSS

Dạng tổng quát: bộ chọn (selector) + khối mô tả (declaration block).

Mẫu chung:

selector { thuộc_tính: giá_trị; ... }

  • Có thể có nhiều quy định trong một khối.
  • Gộp nhiều bộ chọn bằng dấu phẩy: h1, h2, h3 { ... } (trang 72–73).
Giải thích mẫu: h1, h2, h3 { border: 2px solid red; } áp dụng cùng đường viền đỏ cho cả 3 tiêu đề.

3. Ba cách thiết lập CSS

a) CSS trong (internal)

  • Đặt trong <style> ở <head> của chính trang HTML.
  • Thuận tiện khi chỉ áp dụng cho một trang.

b) CSS ngoài (external)

  • Viết vào file .css (ví dụ: styles.css), liên kết bằng:
Liên kết file ngoài:

<link rel="stylesheet" href="styles.css">
hoặc
@import "styles.css";

Lợi ích: Dùng chung cho nhiều trang/website, chỉnh sửa một nơi, toàn bộ trang cập nhật theo.

c) CSS nội tuyến (inline)

  • Đặt trực tiếp trong thuộc tính style của thẻ HTML.
  • Viết nhanh nhưng khó tái sử dụng/quản lý (trang 73–74).

4. Vai trò, ý nghĩa của CSS

  • Tách nội dung & trình bày: nhập nội dung bằng HTML, định dạng bằng CSS.
  • Tiết kiệm thời gian, thống nhất giao diện, dễ bảo trì (đổi một file .css, nhiều trang đổi theo).
  • Tăng tính chuyên nghiệp, khoa học, nâng khả năng tái sử dụng kiểu dáng (trang 74–75).

5. Luyện tập - Vận dụng

Luyện tập

  • Nhận diện đúng ngôn ngữ CSS ≠ HTML.
  • Giải thích mẫu h1,h2,h3 {border: 2px solid red;}.

Vận dụng

  • Thực hành tạo trang và định dạng bằng các mẫu CSS (liên kết file ngoài) (trang 75).
Kiểm tra: Đặt đúng selector, thuộc tính, giá trị; ưu tiên CSS ngoài để dễ quản lý, đảm bảo đường dẫn file .css chính xác.