Chèn Mã CSS

Để chèn mã CSS vào trang HTML chúng ta có thể thực hiện theo ba cách khác nhau:

  • Chèn mã CSS nội dòng hay inline CSS.
  • Chèn mã CSS nội bộ hay internal CSS.
  • Tham chiếu đến tập tin CSS bên ngoài hay external CSS.

Chèn Mã CSS Nội Dòng - Inline CSS

Chèn CSS nội dòng hay inline CSS là cách chèn mã CSS vào bên trong thẻ mở HTML thông qua thuộc tính style.

Ví dụ:

<p style="font-style: italic;">Mã CSS sẽ được chèn vào bên trong thẻ mở HTML.</p>
<p style="text-decoration: underline; color: red;">Mã CSS nội dòng chỉ áp dụng cho phần tử tương ứng mà mã CSS được thêm vào.</p>

Chạy Code

Với cách chèn nội dòng thì mã CSS được chèn vào chỉ áp dụng cho phần tử duy nhất ứng với thẻ mở chứa mã CSS.

Chèn Mã CSS Nội Bộ - Internal CSS

Chèn CSS nội bộ hay internal CSS là cách chèn mã CSS vào trang bằng cách đặt chúng vào bên trong cặp thẻ <style></style>.

Ví dụ:

<style type="text/css">
body {
    background-color: #fafafa;
    color: #333;
}
h1 {
    font-size: 25px;
    text-decoration: underline;
}
</style>

Chạy Code

Với kiểu chèn mã CSS nội bộ thì cùng một đoạn mã CSS có thể được áp dụng cho nhiều phần tử trên trang:

<style type="text/css">
h1 {
    font-size: 25px;
    text-decoration: underline;
}
</style>

Chạy Code

Ở ví dụ trên, cùng một đoạn code CSS nhưng có thể được áp dụng cho tất cả các phần tử h1 trên trang.

Tham Chiếu Đến Tập Tin CSS Bên Ngoài - External CSS

Tham chiếu đến một tập tin CSS bên ngoài hay external CSS được thực hiện nhở sử dụng thẻ <link>. Cú pháp của kiểu chèn mã CSS tham chiếu như sau:

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

Trong đó giá trị của thuộc tính href là địa chỉ URL của tập tin CSS mà chúng ta muốn tham chiếu tới. Địa chỉ URL này có thể là địa chỉ tuyệt đối hoặc địa chỉ tương đối.

Ví dụ:

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

Chạy Code

Trong trường hợp chèn CSS theo cách này thì thông thường chúng ta sẽ đặt thẻ <link> bên trong cặp thẻ <head></head> để trình duyệt tải về tập tin CSS sớm hơn giúp cải thiện tốc độ tải trang so với đặt nó ở cuối trang.

2 Phản Hồi

Dust Sand

Xin hỏi Ad , khi nhúng css trong thẻ <style> (hay internal embed) vào trang HTML, cách xác định vị trí đặt thẻ <Style>....</style> trên trang HTML như thế nào ạ? Cám ơn Ad.

Dust Sand 25 October 2018

Xin được hỏi Ad, file css sẽ được đưa vào trong mã HTML thông qua thẻ <link>, vậy em phải viết thẻ <link> nầy trên trang HTML hay trên trang đang viết lệnh CSS ạ. Cám ơn Ad

Dust Sand 25 October 2018

Và nếu viết <link>trên trang HTML thì viết ở đâu ạ.

Thêm bình luận
Huỷ
Dust Sand

Xin hỏi Ad , khi nhúng css trong thẻ <style> (hay internal embed) vào trang HTML, cách xác định vị trí đặt thẻ <Style>....</style> trên trang HTML như thế nào ạ? Cám ơn Ad.

Thêm bình luận
Huỷ

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan