Khóa học Frontend NextJS + React

Bài 2.1: Cú pháp và cách áp dụng CSS

Chào mừng bạn quay trở lại với hành trình xây dựng Frontend cùng FullhouseDev! Ở bài trước, chúng ta đã cùng nhau đặt những viên gạch đầu tiên với HTML - ngôn ngữ tạo nên cấu trúc và nội dung cho trang web. Tuy nhiên, một trang web chỉ có HTML sẽ trông khá đơn điệu và "khô khan". Đó chính là lúc CSS (Cascading Style Sheets) xuất hiện như một "phép màu" để biến những viên gạch ấy trở nên đẹp đẽ, sinh động và hấp dẫn hơn rất nhiều!

CSS là ngôn ngữ dùng để mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, trên giấy, hay các phương tiện khác. Nó giúp bạn kiểm soát màu sắc, font chữ, bố cục, khoảng cách và vô vàn các khía cạnh hình ảnh khác của trang web. Nắm vững CSS là điều bắt buộc nếu bạn muốn trở thành một Frontend Developer thực thụ.

Trong bài này, chúng ta sẽ cùng nhau giải mã cú pháp cơ bản của CSS và tìm hiểu ba phương pháp chính để "phù phép" CSS vào các tệp HTML của mình. Bắt đầu thôi nào!

1. Giải mã Cú pháp cơ bản của CSS

Cú pháp CSS rất đơn giản và dễ hiểu. Mỗi quy tắc CSS (CSS Rule) bao gồm hai phần chính: Bộ chọn (Selector) và Phần khai báo (Declaration Block).

Một quy tắc CSS có dạng như sau:

selector {
  property: value;
}

Hãy cùng phân tích từng phần:

• Selector (Bộ chọn): Đây là phần chỉ định (chọn) các phần tử HTML mà bạn muốn áp dụng quy tắc CSS này cho chúng. Bộ chọn có thể là tên một thẻ HTML (ví dụ: p, h1, div), một lớp (class - bắt đầu bằng dấu chấm .), một ID (bắt đầu bằng dấu thăng #), hoặc nhiều loại phức tạp hơn mà chúng ta sẽ tìm hiểu sau.
• Declaration Block (Phần khai báo): Phần này nằm trong cặp dấu ngoặc nhọn {} và chứa một hoặc nhiều khai báo (declaration). Mỗi khai báo chỉ định một thuộc tính CSS bạn muốn thay đổi và giá trị tương ứng của nó.
• Declaration (Khai báo): Mỗi khai báo bao gồm một Property (Thuộc tính) và một Value (Giá trị), phân cách bởi dấu hai chấm :. Mỗi khai báo kết thúc bằng dấu chấm phẩy ;.
• Property (Thuộc tính): Đây là loại thuộc tính kiểu dáng mà bạn muốn thay đổi, ví dụ như màu chữ (color), kích thước font (font-size), lề (margin), đệm (padding), màu nền (background-color),...
• Value (Giá trị): Đây là giá trị bạn muốn gán cho thuộc tính đó, ví dụ như blue (màu xanh), 16px (16 pixel), auto (tự động), #333 (mã màu hex),...

Ví dụ minh họa cú pháp:

p {
  color: blue; /* Đoạn văn bản có màu xanh */
}

Giải thích: Quy tắc này chọn tất cả các thẻ <p> trên trang (selector là p). Đối với mỗi thẻ <p> được chọn, nó sẽ áp dụng một khai báo: đặt thuộc tính color (màu chữ) thành giá trị blue.

Bạn có thể thêm nhiều khai báo trong một bộ chọn:

h1 {
  color: red; /* Tiêu đề h1 có màu đỏ */
  font-size: 32px; /* Tiêu đề h1 có kích thước font 32px */
  text-align: center; /* Tiêu đề h1 căn giữa */
}

Giải thích: Quy tắc này chọn tất cả các thẻ <h1>. Nó áp dụng ba khai báo: màu đỏ, kích thước font 32px và căn giữa. Lưu ý mỗi khai báo kết thúc bằng dấu ;.

Bạn cũng có thể áp dụng cùng một kiểu dáng cho nhiều bộ chọn bằng cách nhóm chúng lại và phân cách bằng dấu phẩy ,:

h2, h3 {
  color: green; /* Cả h2 và h3 đều có màu xanh lá */
}

Giải thích: Quy tắc này chọn cả thẻ <h2> và thẻ <h3>. Cả hai loại tiêu đề này sẽ có màu xanh lá cây.

Chú thích (Comments) trong CSS:

Giống như HTML hay các ngôn ngữ lập trình khác, CSS cũng cho phép bạn viết chú thích để giải thích code của mình. Chú thích trong CSS bắt đầu bằng /* và kết thúc bằng */.

/* Đây là một chú thích đơn giản */
p {
  color: blue; /* Chú thích cho từng khai báo */
}

Chú thích là rất hữu ích để làm cho mã CSS của bạn dễ đọc và dễ bảo trì hơn, đặc biệt khi làm việc trong các dự án lớn hoặc làm việc nhóm.

2. Các phương pháp Áp dụng CSS vào trang HTML

Sau khi đã biết cách viết các quy tắc CSS, câu hỏi tiếp theo là làm thế nào để trình duyệt "biết" và áp dụng những quy tắc này vào tệp HTML của bạn? Có ba phương pháp chính:

2.1. Inline CSS (CSS Nội tuyến)

Đây là phương pháp đơn giản nhất nhưng không được khuyến khích sử dụng rộng rãi, đặc biệt là trong các dự án lớn. Bạn viết trực tiếp CSS vào thuộc tính style của từng thẻ HTML.

Cách thực hiện: Thêm thuộc tính style="" vào thẻ HTML cần định kiểu, và viết các khai báo CSS bên trong thuộc tính này. Các khai báo được phân cách bằng dấu chấm phẩy ;.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ Inline CSS</title>
</head>
<body>

    <h1 style="color: blue; text-align: center;">Xin chào với Inline CSS!</h1>

    <p style="color: green; font-size: 18px;">Đoạn văn bản này được định kiểu ngay trong thẻ p.</p>

</body>
</html>

Giải thích:

• Thẻ <h1> được áp dụng màu xanh (color: blue;) và căn giữa (text-align: center;) thông qua thuộc tính style của chính nó.
• Thẻ <p> được áp dụng màu xanh lá (color: green;) và kích thước font 18px (font-size: 18px;) cũng thông qua thuộc tính style.

Ưu điểm:

• Nhanh chóng và dễ dàng để áp dụng kiểu dáng cho một phần tử duy nhất.
• Có độ ưu tiên (specificity) cao nhất, thường sẽ ghi đè các kiểu dáng khác.

Nhược điểm:

• Không hiệu quả: Nếu bạn muốn áp dụng cùng một kiểu dáng cho nhiều phần tử, bạn phải lặp lại mã CSS ở khắp mọi nơi, rất tốn công và dễ sai sót.
• Khó bảo trì: Việc thay đổi kiểu dáng trở nên cực kỳ khó khăn vì bạn phải tìm và sửa ở từng thẻ HTML.
• Tách biệt nội dung và kiểu dáng: Phương pháp này trộn lẫn code HTML (nội dung) và CSS (kiểu dáng) vào cùng một chỗ, vi phạm nguyên tắc cơ bản của việc phát triển web tốt, làm cho code khó đọc và quản lý.

Kết luận: Chỉ nên sử dụng Inline CSS trong những trường hợp rất đặc biệt và hạn chế tối đa, ví dụ như trong email HTML hoặc các đoạn thử nghiệm nhanh.

2.2. Internal CSS (CSS Nội bộ/Nhúng)

Phương pháp này cho phép bạn định nghĩa các quy tắc CSS cho toàn bộ một trang HTML cụ thể. CSS được đặt trong thẻ <style> nằm bên trong phần <head> của tài liệu HTML.

Cách thực hiện: Tạo cặp thẻ <style> và </style> trong phần <head>, sau đó viết các quy tắc CSS thông thường của bạn vào giữa hai thẻ này.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ Internal CSS</title>
    <style>
        /* Các quy tắc CSS được viết tại đây */
        body {
            font-family: sans-serif; /* Đặt font cho toàn bộ trang */
            margin: 20px;
        }

        h1 {
            color: navy; /* Tiêu đề h1 có màu xanh navy */
            text-align: center;
        }

        p {
            font-size: 16px; /* Đoạn văn bản có kích thước font 16px */
            line-height: 1.5; /* Chiều cao dòng 1.5 lần kích thước font */
            color: #333; /* Màu chữ xám đậm */
        }
    </style>
</head>
<body>

    <h1>Chào mừng bạn đến với Internal CSS!</h1>

    <p>Đây là một đoạn văn bản được định kiểu bằng các quy tắc CSS nằm trong thẻ &lt;style&gt; ở phần head.</p>

    <p>Tất cả các thẻ p trên trang này đều sẽ tuân theo quy tắc đã định.</p>

</body>
</html>

Giải thích:

• Tất cả các quy tắc CSS (body, h1, p) được định nghĩa tập trung trong thẻ <style> ở <head>.
• Các quy tắc này sẽ được áp dụng cho tất cả các phần tử tương ứng (<body>, <h1>, <p>) trong phần <body> của cùng tệp HTML này.

Ưu điểm:

• Kiểu dáng cho toàn bộ trang được tập trung tại một chỗ (trong thẻ <style>), dễ quản lý hơn so với Inline CSS.
• Tách biệt code CSS khỏi nội dung HTML trong phần <body>.

Nhược điểm:

• Không tái sử dụng: Các quy tắc CSS này chỉ áp dụng cho một trang HTML duy nhất. Nếu bạn có nhiều trang và muốn chúng có cùng kiểu dáng, bạn sẽ phải sao chép và dán mã CSS vào thẻ <style> của từng trang, điều này lại dẫn đến vấn đề bảo trì tương tự Inline CSS.
• Tệp HTML có thể trở nên rất dài và khó đọc nếu mã CSS quá nhiều.

Kết luận: Internal CSS phù hợp cho các trang web đơn lẻ (single page) hoặc khi bạn cần áp dụng các kiểu dáng rất đặc thù chỉ cho một trang cụ thể nào đó.

2.3. External CSS (CSS Ngoài)

Đây là phương pháp phổ biến nhất và được khuyến khích sử dụng rộng rãi trong phát triển web thực tế. Bạn viết toàn bộ mã CSS vào một (hoặc nhiều) tệp riêng biệt với phần mở rộng .css (ví dụ: styles.css, main.css, layout.css). Sau đó, bạn "liên kết" tệp CSS này với tệp HTML bằng cách sử dụng thẻ <link> trong phần <head>.

Cách thực hiện:

1. Tạo một tệp mới với phần mở rộng .css (ví dụ: styles.css).
2. Viết tất cả các quy tắc CSS của bạn vào tệp .css này. Lưu ý không có thẻ <style> trong tệp .css.
3. Trong phần <head> của tệp HTML, thêm thẻ <link> với các thuộc tính sau:
   • rel="stylesheet": Chỉ định mối quan hệ của tệp được liên kết là một bảng định kiểu.
   • href="đường_dẫn_đến_tệp_css.css": Chỉ định đường dẫn đến tệp CSS của bạn.

Ví dụ (File: styles.css):

/* File: styles.css */

body {
  font-family: 'Arial', sans-serif; /* Font chữ */
  background-color: #f4f4f4; /* Màu nền nhạt */
  color: #333; /* Màu chữ chính */
  margin: 0; /* Bỏ lề mặc định */
  padding: 0;
}

header {
  background-color: #50b3a2; /* Màu nền header */
  color: white; /* Màu chữ header */
  padding: 10px 0;
  text-align: center;
}

h1 {
  margin: 0; /* Bỏ lề mặc định của h1 */
}

.container { /* Định kiểu cho các phần tử có class="container" */
  width: 80%; /* Chiều rộng 80% */
  margin: 20px auto; /* Căn giữa và thêm lề trên dưới */
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ */
}

p {
  line-height: 1.6; /* Tăng chiều cao dòng */
}

Ví dụ (File: index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ External CSS</title>
    <!-- Liên kết đến tệp CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>Trang Web với External CSS</h1>
    </header>

    <div class="container">
        <p>Đây là nội dung chính của trang.</p>
        <p>Kiểu dáng được định nghĩa hoàn toàn trong tệp styles.css.</p>
        <p>Bất kỳ trang HTML nào liên kết đến styles.css đều sẽ có kiểu dáng tương tự.</p>
    </div>

</body>
</html>

Giải thích:

• Chúng ta có một tệp CSS riêng (styles.css) chứa tất cả các quy tắc kiểu dáng.
• Trong tệp HTML (index.html), thẻ <link rel="stylesheet" href="styles.css"> trong phần <head> "nói" cho trình duyệt biết rằng hãy tải và áp dụng các quy tắc từ tệp styles.css.
• Bây giờ, các quy tắc trong styles.css sẽ được áp dụng cho các phần tử tương ứng trong index.html (và bất kỳ tệp HTML nào khác cùng liên kết đến nó).

Ưu điểm:

• Tái sử dụng: Cùng một tệp CSS có thể được liên kết và sử dụng lại cho tất cả các trang trên website của bạn, giúp tạo ra giao diện nhất quán.
• Dễ bảo trì: Khi muốn thay đổi kiểu dáng của toàn bộ website, bạn chỉ cần sửa một tệp CSS duy nhất. Điều này tiết kiệm rất nhiều thời gian và công sức.
• Tách biệt rõ ràng: Code HTML (nội dung) và code CSS (kiểu dáng) được tách biệt hoàn toàn trong các tệp khác nhau, làm cho mã nguồn gọn gàng, dễ đọc, dễ hiểu và dễ quản lý hơn rất nhiều.
• Tốc độ tải trang: Trình duyệt có thể lưu trữ (cache) tệp CSS bên ngoài sau lần tải đầu tiên, giúp các trang khác sử dụng cùng tệp CSS tải nhanh hơn.

Nhược điểm:

• Cần thêm một tệp và một yêu cầu HTTP bổ sung để tải tệp CSS (nhưng lợi ích lâu dài vượt xa nhược điểm nhỏ này).

Kết luận: External CSS là phương pháp tiêu chuẩn vàng trong phát triển web chuyên nghiệp. Nó mang lại hiệu quả cao nhất về khả năng tái sử dụng, bảo trì và tổ chức mã nguồn.

Tổng kết các phương pháp áp dụng CSS

Để dễ hình dung, hãy xem bảng so sánh tóm tắt ba phương pháp:

Hiểu rõ cú pháp và đặc biệt là ba cách áp dụng CSS này là bước đệm cực kỳ quan trọng để bạn bắt đầu tạo ra những giao diện web đẹp mắt. Trong các bài tiếp theo, chúng ta sẽ đi sâu hơn vào các bộ chọn CSS mạnh mẽ hơn, các thuộc tính phổ biến và cách xây dựng bố cục trang web bằng CSS.

Hãy thực hành ngay bằng cách thử nghiệm cả ba phương pháp trên với các tệp HTML và CSS đơn giản của riêng bạn nhé! Chúc bạn học tốt!