Nhúng CSS

Để nhúng mã CSS vào trang web chúng ta có 3 thực hiện thông qua cách khác nhau:

  • Nhúng trong thẻ HTML (hay inline embed)
  • Nhúng trong thẻ <style> (hay internal embed)
  • Nhúng sử dụng tập CSS riêng (hay external embed)

Ở phần này tạm thời chúng ta sẽ bỏ qua việc tìm hiểu mã lệnh CSS có ý nghĩa gì để tập trung vào cách nhúng mã CSS vào HTML như thế nào. Trong các bài học tiếp chúng ta sẽ tìm hiểu cụ thể các đoạn mã CSS này.

Nhúng trong thẻ HTML

Nhúng trong thẻ HTML hay còn gọi là nhúng inline. Với cách nhúng này mã CSS sẽ được đưa vào bên trong thẻ mở HTML. Ví dụ:

<body style="background-color: #232f3e; color: #fff;">
    <h1 style="color: #f08804;">Giới Thiệu Về CSS</h1>
    <p>CSS là viết tắt của từ Cascading Style Sheet</p>
</body>

Chạy

Nhúng Trong Thẻ Style

Nhúng trong thẻ <style> hay còn gọi là nhúng nội bộ (internal). Với cách nhúng này mã CSS sẽ được đưa vào trong thẻ <style>. Sử dụng cách nhúng này thì mã CSS trong ví dụ trên sẽ được viết như sau:

<style type="text/css">
    body {
        background-color: #232f3e;
        color: #fff;
    }
    h1 {
        color: #f08804;
    }
</style>

Chạy

Tham Chiếu Tới Tệp CSS

Với cách nhúng này chúng ta sẽ tạo riêng một tệp chứa mã lệnh CSS các tệp này có phần mở rộng là .css và sau đó trong mã lệnh HTML chúng ta tham chiếu tới tệp này sử dụng thẻ <link>. Cách nhúng CSS này còn được gọi là nhúng ngoài (external). Sử dụng ví dụ nhúng CSS sử dụng thẻ <style> ở trên, bây giờ chúng ta sẽ tạo một tệp mới style.css với nội dung như sau:

p {
    color: red;
    text-align: center;
}

Sau đó file này sẽ được đưa vào trong mã HTML thông qua thẻ <link>:

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

Thẻ <link> có 3 thuộc tính rel, typesrc. Trong đó reltype giúp trình duyệt xác định được loại file được nhúng là tệp CSSsrc dùng để xác định vị trí của file được nhúng vào.

Thêm Bình Luận: