Vị trí đặt CSS.
CSS có thể đặt ở bất cứ đâu trong 1 file HTML, nhưng mình khuyên mọi người nên đặt ở giữa 2 cặp thẻ <head></head>
Cách khai báo CSS.
CSS có những cách khai báo sau:• Inline Styles – Viết trực tiếp vào tài liệu HTML thông qua thuộc tính <style>.
• Internal Styles – Nhúng trực tiếp vào tài liệu HTML và nằm trong thẻ style <style> </style>.
• External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <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ó.
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 <style> (style="code css") như sau:<div style="background:red; color: blue">Hello! Wixlog.xyz</div>
Demo:
Hello! Wixlog.xyzCách nhúng CSS với Internal Styles.
Chúng ta sẽ code bên trong thẻ <style type="text/css"> code css </style>.
<style type="text/css">
div{
background:red;
color: blue;
}
</style>
<div>Hello! Wixlog.xyz</div>
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ỳ, 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. Và sau đó import vào file HTML thông qua thẻ link. Sau đây là một ví dụ cho cách này.Bước 1: Tạo một file "*.css":
Ví dụ:
div{
background:red;
color: blue;
}
Các bạn sử dụng cấu trúc link như này để khai báo
<link href="style.css" rel="stylesheet"/>
<div>Hello! Wixlog.xyz</div>
• Trong thẻ link có một thẻ "href", đây là chỗ bạn sẽ điền đường dẫn đến file CSS của bạn.
• rel="stylesheet" báo cho trình duyệt đây là file CSS
Lưu ý
Tới đây mình mới nói một số lưu ý dành cho các bạn khi viết CSS như sau:• Không nên viết dạng inline bởi vì nó khó quản lý và không tốt cho SEO
• Dạng internal có thể chấp nhận được nhưng bạn nên đặt CSS ở trên thẻ head, dạng này cũng không tốt cho SEO
• dạng external khuyến khích sử dụng vì nó mang tích tách biệt HTML và CSS, rất tốt cho SEO lẫn coder vì dễ quản lý. Tương tự như dạng internal khi import vào bằng thẻ link thì bạn nên đặt nó ở thẻ head.