Dịch vụ

Cách nhúng css vào một website

Bài này thuộc phần 3 của 4 phần trong serie Học CSS cơ bản

08/01/2017

Trước khi viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website.

Chúng ta có 2 cách nhúng CSS vào tài liệu hoặc website như sau:

Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>. Gọi là Inline Styles
Tạo một tập tin có đuôi mở rộng .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>. Gọi là External Styles

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.

Inline Styles

Thích hợp với việc chèn một vài đoạn CSS ngắn.
Trình duyệt không mất thời gian tải tập tin CSS, tăng tốc độ load trang.

External Styles

Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong loại bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Tuy nhiên, bạn có thể sử dụng kiểu bạn thích.

Cách nhúng CSS với Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ <style> vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ <head>) như sau.

<style type="text/css">
 ...
</style>

Và trong cặp thẻ <style> đó bạn có thể viết các thẻ CSS vào. Chúng ta cùng viết một ví dụ đơn giản như thế này nha

Cách nhúng CSS với External Styles

Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ (nên là tiếng việt không dấu, và không có khoảng trắng, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này:

p {
color: red;
font-family: Arial;
}

Sau đó trên tập tin HTML bạn chèn một thẻ như sau:

<link rel="stylesheet" href="name.css" />

Trong đó, thuộc tính rel là khai báo loại tập tin nhúng và href là đường dẫn khai báo tên tập tin .css cần nhúng vào.

Thật đơn giản phải không các bạn?

Còn một cách cũng thường được dùng đó là: Nhúng tập tin CSS vào bên trong một tập tin CSS

Ví như bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả chúng vào website mà chỉ muốn thêm một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa @import, và các từ khóa @import này phải được đặt ở đầu tập tin .css (không bao gồm các đoạn ghi chú).

Ví dụ bạn có thể nhúng một tập tin test.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css: