Chèn CSS vào Trang HTML

Có ba cách khác nhau để chèn mã CSS vào trang HTML.

Tham Chiếu Tới Tập Tin CSS

Mã CSS có thể được thêm vào trang HTML bằng cách tham chiếu tới tập tin CSS bên ngoài sử dụng thẻ <link>:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Trong thẻ <link> trên có ba thuộc tính:

  • Thuộc tính rel: Dùng để xác định mối quan hệ giữa tập tin được tham chiếu với trang HTML. Trong trường hợp này chúng ta muốn tham chiếu tới một tập tin định kiểu theo tầng hay một stylesheet.
  • Thuộc tính type: Dùng để xác định loại tập tin được tham chiếu.
  • Thuộc tính href: Dùng để xác định địa chỉ URL của tập tin CSS.

Thẻ <link> trên cần được đặt bên trong thẻ <head>:

<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

Kiểu thêm mã CSS bằng cách tham chiếu tới tập tin CSS này còn được gọi là kiểu external.

Đây cũng cũng là kiểu chèn CSS được khuyên dùng vì nó giúp tách biệt mã CSS với mã HTML giúp lập trình viên có thể dễ dàng hơn trong việc quản lý mã lệnh.

Chèn CSS Vào Thẻ HTML

Mã CSS có thể được thêm trực tiếp vào thẻ (mở) HTML sử dụng thuộc tính style:

<p style="color: red">Đoạn văn sẽ có màu đỏ.</p>

Với cách thêm mã CSS này thì luật CSS được thêm vào chỉ áp dụng được cho phần tử với thẻ HTML tương ứng.

Kiểu thêm mã CSS sử dụng thuộc tính style như trên còn được gọ là kiểu inline.

Đây là kiểu chèn nên hạn chế sử dụng vì mã CSS sẽ rải rác cùng với mã HTML gây khó khăn trong việc quản lý mã lệnh sau này.

Nhúng CSS Sử Dụng Thẻ <style>

Mã CSS có thể được thêm vào trang sử dụng thẻ <style>:

<style>
body {
    font-size: 12px;
}
</style>

Thẻ <style> ở trên thường được đặt ở bên trong thẻ <head> hoặc trước thẻ <body>. Tất nhiên bạn cũng có thể đặt ở giữa các phần tử khác trong trang như sau:

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>Thẻ p thứ nhất</p>
    <style>
    body {
        font-size: 12px;
    }
    </style>
    <p>Thẻ p thứ hai</p>
</body>
</html>

Tuy nhiên cần hạn chế việc đặt thẻ <style> như trên vì sẽ khiến mã CSS rải rác trên trang HTML và dẫn tới khó quản lý.

Cách chèn mã CSS như trên còn được gọi là nhúng mã CSS nội bộ (hay internal).

10 bình luận


Đăng bình luận