Lý thuyết - Bài F7 Giới thiệu CSS

Bài F7. Giới thiệu CSS

Nội dung lý thuyết

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu các phần tử HTML trong trang web.
CSS hỗ trợ định kiểu như bố cục, màu sắc, phông chữ, kích thước, khoảng trống… giúp nâng cao khả năng thiết kế và trải nghiệm trang web mà HTML không làm được.
Khác với HTML (chỉ định hình nội dung và cấu trúc như tiêu đề, hình ảnh…), CSS tập trung vào việc trình bày bố cục và hình thức các thành phần.

a) Linh hoạt về bố cục
CSS cho phép nhiều kiểu bố cục phức tạp và dễ thay đổi, thích ứng với các thiết bị khác nhau.

b) Nhất quán về hình thức
Dễ quản lý và đồng bộ kiểu dáng toàn bộ website, ví dụ như định kiểu cho tiêu đề <h1> đồng nhất.

c) Dễ bảo trì và nâng cấp
CSS tách biệt nội dung và hình thức → dễ chỉnh sửa giao diện mà không ảnh hưởng đến nội dung.

d) Có thể tái sử dụng
CSS cho phép tái sử dụng định dạng ở nhiều trang, giúp tiết kiệm công sức.

Có 3 cách bổ sung phổ biến:

Cách 1: Chèn trực tiếp vào thẻ HTML

<tên_thẻ_HTML style="thuộc_tính_CSS: giá_trị; thuộc_tính_CSS: giá_trị;">

<h1 style="color: #0066bb; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">Giới thiệu chung</h1>

→ Màu xanh chữ (#0066bb), đổ bóng (text-shadow) theo 3 chiều.

Đề mục sau khi chèn mã lệnh CSS

Cách 2: Chèn mã CSS giữa cặp thẻ <style> trong thẻ <head>

<head>
  <style>
    tên_kieu { thuộc_tính_CSS: giá_trị; ... }
  </style>
</head>

<head>
  <style>
    h1 {
      color: #0066bb;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>

Cách 3: Dùng tệp CSS riêng biệt và liên kết bằng thẻ <link>

<link rel="stylesheet" type="text/css" href="đường_dẫn_tệp_CSS">

- Bước 1. Tạo file style.css trong cùng thư mục với portfolio.html, chứa đoạn mã:

h1 {

  color: #0066bb;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

- Bước 2. Trong file portfolio.html, chèn dòng sau vào phần <head>:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Ưu điểm: Tách riêng mã CSS hoàn toàn khỏi HTML. Dễ tái sử dụng, dễ cộng tác và quản lý

Bài F7. Giới thiệu CSS