![[CSS cơ bản][Tuts].. Bài 2: Chèn Mã2023-04-10 08:19:14](https://mt.net.vn/img/baihoc/800x500/-css-co-ban-tuts-bai-12-khoang-dem2023-04-10-08-19-14.jpg)
Chèn Mã CSS
Để chèn mã CSS vào trang HTML chúng ta có thể thực hiện theo ba cách khác nhau:
- Chèn mã CSS nội dòng hay inline CSS.
- Chèn mã CSS nội bộ hay internal CSS.
- Tham chiếu đến tập tin CSS bên ngoài hay external CSS.
Chèn Mã CSS Nội Dòng - Inline CSS
Chèn CSS nội dòng hay inline CSS là cách chèn mã CSS vào bên trong thẻ mở HTML thông qua thuộc tính style.
Ví dụ:
<p style="font-style: italic;">Mã CSS sẽ được chèn vào bên trong thẻ mở HTML.</p> <p style="text-decoration: underline; color: red;">Mã CSS nội dòng chỉ áp dụng cho phần tử tương ứng mà mã CSS được thêm vào.</p> Chèn Mã CSS Nội Dòng - Inline CSS
Với cách chèn nội dòng thì mã CSS được chèn vào chỉ áp dụng cho phần tử duy nhất ứng với thẻ mở chứa mã CSS.
Chèn Mã CSS Nội Bộ - Internal CSS
Chèn CSS nội bộ hay internal CSS là cách chèn mã CSS vào trang bằng cách đặt chúng vào bên trong cặp thẻ <style></style>.
Ví dụ:
<style type="text/css"> body { background-color: #fafafa; color: #333; } h1 { font-size: 25px; text-decoration: underline; } </style> Chèn Mã CSS Nội Bộ - Internal CSS
Với kiểu chèn mã CSS nội bộ thì cùng một đoạn mã CSS có thể được áp dụng cho nhiều phần tử trên trang:
<style type="text/css"> h1 { font-size: 25px; text-decoration: underline; } </style> So Sánh Nhúng CSS Nội Bộ và CSS Nội Dòng
Ở ví dụ trên, cùng một đoạn code CSS nhưng có thể được áp dụng cho tất cả các phần tử h1 trên trang.
Tham Chiếu Đến Tập Tin CSS Bên Ngoài - External CSS
Tham chiếu đến một tập tin CSS bên ngoài hay external CSS được thực hiện nhở sử dụng thẻ <link>. Cú pháp của kiểu chèn mã CSS tham chiếu như sau:
<link href="..." rel="stylesheet" type="text/css"> Trong đó giá trị của thuộc tính href là địa chỉ URL của tập tin CSS mà chúng ta muốn tham chiếu tới. Địa chỉ URL này có thể là địa chỉ tuyệt đối hoặc địa chỉ tương đối.
Ví dụ:
<head> <link href="./style.css" rel="stylesheet" type="text/css"> </head> Chèn CSS Theo Cách Tham Chiếu Đến Tập Tin Bên Ngoài - External CSS
Trong trường hợp chèn CSS theo cách này thì thông thường chúng ta sẽ đặt thẻ <link> bên trong cặp thẻ <head></head> để trình duyệt tải về tập tin CSS sớm hơn giúp cải thiện tốc độ tải trang so với đặt nó ở cuối trang.