HTML CSS

CSS Là Gì

CSS là viết tắt của cum từ Cascading Style Sheets dùng để tạo kiểu (trang trí) cho trang web.

HTML tạo ra cấu trúc, khung sườn cho trang web trong khi đó CSS dùng để quy định các phần tử của trang HTML sẽ được hiển thị như thế nào.

CSS có thể được thêm vào trang theo 3 cách khác nhau:

  • Nhung trong dòng (inline): Sử dụng thuộc tính style trong thẻ mở để thêm mã CSS cho phần tử.
  • Nhúng nội bộ (internal): Sử dụng thẻ <style> để thêm mã CSS cho trang HTML.
  • Nhúng ngoài (external): Sử dụng thẻ <link> để tham chiếu tới một file CSS bên ngoài.

Cách thông thường được sử dụng đó là nhúng external, lúc này mã CSS sẽ được tách biệt với mã HTML. Tuy nhiên để có thể dễ dàng minh hoạ cách sử dụng CSS thì trong các ví dụ ở bài học chúng ta sử dụng nhúng dòng (inline) hoặc nhúng nội bộ (internal).

Nhúng Inline

Nhúng inline là cách nhúng mã CSS thông qua sử dụng thuộc tính style và chỉ có thể áp dụng được với một phần tử duy nhất:

<p style="color: red;">Đây là đoạn văn bản được tô <span style="font-style: italic;">màu đỏ</span></p>

Chạy Thử

Ở ví dụ trên sử dụng thuộc tính style trên hai phần tử là pspan với các đặc tính CSS lần lượt là colorfont-style dùng để tạo màu chữ (với giá trị red ứng với màu đỏ) và tạo kiểu cho phông chữ (với giá trị italic ứng với in nghiêng).

Nhúng Internal

Nhúng inline là cách nhúng mã CSS vào trang thông qua sử dụng thẻ <style>. Mã CSS được áp dụng trong phạm vi toàn trang web.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nhúng CSS Theo Kiểu Internal</title>
    <style>
        body {background-color: powderblue;}
        h1 {color: blue;}
        p {color: red;}
    </style>
</head>
<body>
<h1>Đây là một đề mục</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>

Chạy Thử

Với cách nhúng trên, mỗi luật CSS có thể được áp dụng cho nhiều phần tử trên trang, ví dụ tất cả các phần tử h1 sẽ được áp dụng luật CSS color: blue. Tương tự tất cả các phần tử p trên trang sẽ được áp dụng luật CSS color: red.

Thẻ <style> thường được đặt trong thẻ <head> hoặc phía trước thẻ đóng </body>. Tuy nhiên bạn cũng có thể đặt nó ở bất cứ đâu bên trong thẻ <body>:

<body>
<h1>Đây là một đề mục</h1>
<style>
    body {background-color: powderblue;}
    h1 {color: blue;}
    p {color: red;}
</style>
<p>Đây là một đoạn văn bản.</p>
</body>

Chạy Thử

Nhúng External

Nhúng external là kiểu nhúng mã CSS sử dụng thẻ <link> để tham chiếu tới một file riêng biệt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nhúng CSS Theo Kiểu External</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Đây là một đề mục</h1>
    <p>Đây là một đoạn văn bản.</p>
</body>
</html>

Chạy Thử

Giá trị của thuộc tính href trong thẻ <link> dùng để tham chiếu tới tập tin CSS bên ngoài. Thuộc tính rel="stylesheet" báo cho trình duyệt biết rằng tập tin được tham chiếu tới là một file CSS.

Thẻ <link> thường được đặt bên trong thẻ <head> hoặc trong một số trường hợp có thể được trước thẻ đóng </body>.

Nhúng CSS theo kiểu external được sử dụng phổ biến vì nó không những giúp tách biệt mã CSS và mã HTML sang các file riêng biệt mà còn có thể áp dụng mã CSS trong file trên nhiều trang web khác nhau. Nếu muốn thay đổi mã CSS cho tất cả các trang này bạn chỉ cần sửa đổi tại một file duy nhất.

Kết Hợp Nhúng Internal và External

Trong trường hợp bạn áp dụng nhúng CSS theo kiểu external cho 5 trang web khác nhau là A, B, C, D và E. Nếu bạn muốn thay đổi lại một số luật CSS có trong file nhưng chỉ áp dụng với một số trang nhất định là D và E thì lúc này bạn sẽ sử dụng kết hợp với kiểu nhúng CSS inline cho các trang D và E. Cách làm này sẽ không ảnh hưởng tới các trang còn lại là A, B và C.

Content must not be empty

Related Tutorial