Trong bài viết này chúng tôi sẽ giới thiệu đến cho bạn cách nhúng css vào trong website là 1 trong những công việc rất cần thiết khi bạn thiết kế web với các hiệu ứng và style theo ý muốn. Nhưng trước đó thì bạn cần phải viết css làm sao để css có thể thực hành được trên website hay trên tài liệu HTML. Để làm được những điều đó thì nhất định phải nhúng css vào website.
Về css thì cho dù là nhúng vào HTML hay viết css trực tiếp thì đều viết trong file riêng biệt. Nhằm mục đích điều khiển nội dung hiển thị trên trang website.
Hướng dẫn nhúng CSS vào website
Trước khi chúng tôi hướng dẫn bạn 3 cách nhúng CSS vào website thì bạn hãy cùng tìm hiểu ngay sau đây nhé. Khi bạn nhúng CSS vào trong website thì bạn có thể thực hiện theo các cách như sau:
- Inline Styles: Đây chính là cách nhúng trực tiếp tài liệu HTML. Để nhúng được trực tiếp thì bạn cần phải thông qua các cặp thẻ như
<style> </style>. - External Styles: Chính là tạo một tập tin css riêng. Từ đó nhúng chúng vào tài liệu HTML qua cặp thẻ
<link>.
Tuy nhiên, Inline Styles và External Styles có những ưu điểm và nhược điểm khác nhau. Thế cho nên, trước khi chọn lựa thì bạn cần phải cân nhắc thật kỹ xem nên sử dụng cái nào và tùy vào từng trường hợp cụ thể.
Inline Styles
- Phù hợp để chèn một vài đoạn CSS ngắn
- Sử dụng trình duyệt sẽ không mất nhiều thời gian để tải tập tin CSS
External Styles
- Phù hợp chèn thêm nhiều đoạn CSS để dễ quản lý
- Mất thời gian để tải tập tin CSS
Ngay sau đây chúng tôi sẽ hướng dẫn đến 3 cách nhúng css vào website chi tiết nhất. Hãy cùng tham khảo ngay các cách nhúng css với các Styles dưới đây nhé bạn.
Cách nhúng CSS với Inline Styles
Nếu bạn sử dụng Inline Styles để nhúng CSS thì. Khi đó bạn cần phải khai báo cặp thẻ <style> vào bất cứ vị trí nào trong website. Và cách tốt nhất là bạn nên để vào trong cặp thẻ <head>, cụ thể như sau:
|
01
02
|
<style type=”text/css”>
</style>
|
Chúng tôi sẽ đưa ra ví dụ đơn giản để bạn hiểu hơn.
Cách nhúng CSS với External Styles
Còn khi bạn sử dụng cách nhúng css với External Styles thì lại khác hoàn toàn. Khi đó bạn cần phải tạo ra một tập tin .css riêng biệt và đặt tên bất kỳ nào đó mà bạn muốn đặt. Đồng thời bạn có thể sử dụng bất cứ chương trình soạn thảo văn bản nào để có thể tạo ra tập tin CSS.
Sau khi bạn đã tạo được tập tin css thì hãy dán một đoạn css đơn giản như sau:
|
01
02
03
04
|
p {
color: blue;
font-family: Arial;
}
|
Tiếp đó bạn hãy chèn tập tin HTML vào trong thẻ <link>. Khi đó bạn đặt thẻ này vào trong cặp thẻ <head>. Chúng tôi sẽ đưa ra ví dụ đơn giản để bạn hiểu hơn.
|
01
|
<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.
Nhúng tập tin CSS vào bên trong một tập tin CSS
Trường hợp, nếu như bạn đang có 3 tập tin css. Nhưng bạn lại không muốn thêm tất cả 3 tập tin đó vào trong website, mà bạn chỉ muốn thêm 1 trong 3 tập tin css mà thôi.
Thì khi đó bạn có thể nhúng các tập tin CSS vào trong một tập tin css khác kèm từ khóa @import. Khi đó, các từ khóa này bắt buộc phải đặt ở đầu tập tin CSS.
Lưu ý: Không gồm một số đoạn comment.
Khi bạn nhúng một tập tin demo.css vào trong một tập tin bất kỳ chẳng hạn như chèn vào style.css. Nhưng để chèn vào đoạn style.css thì bạn cần phải làm như sau:
|
01
|
@import “demo.css”;
|
Trong bài viết này chúng tôi cũng đã hướng dẫn cho bạn các cách nhúng CSS vào trong website rồi. Như vậy cũng đã hoàn tất xong quá trình nhúng css, chắc hẳn bạn thấy rất đơn giản đúng không?
Kết luận
Qua bài viết vừa rồi Onlycssmenu đã tổng hợp và chia sẽ, chắc hẳn bạn cũng sẽ có thêm nhiều kiến thức cũng như biết cách nhúng CSS vào trong website một cách đơn giản và dễ hiểu nhất. Mong rằng với những gì mà chúng tôi đã mang đến cho bạn sẽ là những thông tin, kiến thức bổ ích cho bạn. Chúc bạn thành công nhé !