Tìm hiểu cách sử dụng phần tử HTML <style>.
Phần tử <style> được dùng để nhúng các quy tắc CSS trực tiếp vào tài liệu HTML của bạn:
<style> h1 { color: red; } p { color: green; } </style>Phần tử <style> nằm bên trong phần tử <head> của tài liệu HTML:
<!DOCTYPE html> <html> <head> <style> h1 { color: red; } p { color: green; } </style> </head> <body> <h1>Đây là tiêu đề màu đỏ</h1> <p>Đây là đoạn văn màu xanh lá</p> </body> </html>Bạn cũng có thể nhập bảng định kiểu bên ngoài, việc này được thực hiện bằng phần tử <link>. Đây thường là phương pháp ưu tiên, ít nhất đối với các trang web lớn hơn.
Cần biết:
Nếu bạn sử dụng cả phần tử <style> và <link> để định kiểu trong cùng một tài liệu, rất dễ dàng vô tình ghi đè các kiểu.
Ví dụ, xem ví dụ sau sử dụng cả hai cách tiếp cận định kiểu:
<!DOCTYPE html> <html> <head> <!-- Kiểu nhúng (internal) --> <style> h1 { color: red; } p { color: green; } </style> <!-- Nhập bảng định kiểu bên ngoài --> <link href="/styles/main.css" rel="stylesheet" /> </head> <body> <h1>Đây là tiêu đề màu đỏ</h1> <p>Đây là đoạn văn màu xanh lá</p> </body> </html>Vì vậy, ví dụ nếu bảng định kiểu bên ngoài định nghĩa giá trị thuộc tính color cho bộ chọn h1 và p, ví dụ bằng cách gán giá trị màu blue, thì màu red và green sẽ bị ghi đè, vì phần tử <link> xuất hiện sau phần tử <style> trong mã đánh dấu ví dụ trên.
Rất dễ nhầm lẫn điều này, do đó tôi khuyên bạn nên thường xuyên sử dụng phần tử <link> để nhập kiểu — và chỉ sử dụng phần tử <style> cho các trường hợp sử dụng rất cụ thể.