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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

<link> phổ biến nhất thuộc tính phần tử 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 của bạn, trong trường hợp này là biểu định kiểu có tên main.css
rel là viết tắt của mối quan hệ và nó chỉ định mối quan hệ giữa tài liệu mà nó nằm bên trong và tệp CSS được liên kết.

Một cách khác để tạo kiểu cho trang web của bạn là sử dụng <style> , cho phép bạn nhúng các kiểu CSS trực tiếp vào bên trong tài liệu của mình (còn được gọi là CSS nội tuyến ).

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

Điều cần biết:

Nếu bạn sử dụng cả <style> và <link> để tạo kiểu trong cùng một tài liệu, rất dễ ghi đè kiểu do nhầm lẫn.

Ví dụ:hãy xem ví dụ sau, sử dụng cả hai phương pháp tạo kiểu:

<!DOCTYPE html>
<html>
  <head>
    <!-- Embedded (internal) styles -->
    <style>
      h1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
    <!-- Import external style sheet -->
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <h1>This is a red heading</h1>
    <p>This is a green paragraph</p>
  </body>
</html>

Vì vậy, ví dụ:nếu bên ngoài biểu định kiểu xác định một giá trị thuộc tính màu trên h1 và p bộ chọn, ví dụ:bằng cách đặt cho nó một blue giá trị màu, sau đó là red và green sẽ bị ghi đè vì <link> phần tử đứng sau <style> trong ví dụ đánh dấu ở trên.

Thật dễ dàng để kết hợp điều này, do đó, tôi khuyên rằng bạn thường nên sử dụng <link> phần tử để nhập kiểu - và chỉ sử dụng <style> phần tử cho các trường hợp sử dụng cụ thể cao.

Cách sử dụng Phần tử HTML

Điều cần biết: