Cách sử dụng phần tử HTML <link>

Tìm hiểu cách sử dụng phần tử HTML <link>.

Phần tử HTML <link> chủ yếu được dùng để nhập các tệp CSS bên ngoài thêm kiểu dáng cho trang web của bạn.

Phần tử <link> nằm bên trong phần tử <head> và chấp nhận một số loại thuộc tính:

<!DOCTYPE html> <html> <head> <title>Tiêu đề tài liệu</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>

Hai thuộc tính phổ biến nhất của phần tử <link> là hai thuộc tính bạn thấy ở trên, href và rel:

• href chỉ định vị trí của tệp được liên kết, trong trường hợp này là một bảng định kiểu tên main.css
• rel là viết tắt của relationship (mối quan hệ), nó chỉ định mối quan hệ giữa tài liệu chứa nó và tệp CSS được liên kết.

Một cách thay thế để định kiểu cho trang web là sử dụng phần tử <style>, cho phép bạn nhúng các kiểu CSS trực tiếp vào tài liệu (còn gọi là CSS nội tuyến).

Tuy nhiên, cách hiện đại để định kiểu cho trang web là sử dụng <link> để nhập kiểu, từ thư mục dự án của bạn your-project/styles/main.css hoặc từ nhà cung cấp bên ngoài (trên miền khác).

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ể.