<style> </style>
.<link>
.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
External Styles
Và trong các 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. Anyway, bạn có thể sử dụng kiểu bạn thích.
Cách nhúng CSS với Inline Styles
Cách nhúng CSS với External 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 CSS vào, ví dụ đơn giản:
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ỳ, 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: blue; font-family: Arial; }
Và cuối cùng là chèn vào tập tin HTML bằng thẻ <link>
và thẻ này phải đặt bên trong cặp thẻ <head>
. Ví dụ:
<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.
Đơn giản phải không nào?
Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó 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 comment).
Ví dụ bạn có thể nhúng một tập tin demo.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:
@import "demo.css";
Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá
đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi.