Hướng dẫn Chèn CSS vào Tài liệu HTML

Với cách nhúng, chèn CSS vào tài liệu HTML, bạn có thể sử dụng các file stylesheet để định rõ bố cục của tài liệu HTML. Tham khảo bài viết dưới đây của Mytour để hiểu cách thực hiện chèn CSS vào tài liệu HTML như thế nào.

Chèn CSS vào Tài liệu HTML: Hướng Dẫn Chi Tiết

1. Hướng dẫn cách nhúng, chèn CSS vào tài liệu HTML

Có nhiều phương thức để nhúng, chèn CSS vào tài liệu HTML, bao gồm:

Chèn trực tiếp CSS vào tài liệu HTML (Inline CSS)

Để xác định các quy tắc Inline CSS, sử dụng thuộc tính 'style' của phần tử HTML. Quy tắc Inline style chỉ áp dụng cho phần tử HTML cụ thể được xác định.

Để đặt nhiều quy tắc CSS, chúng ta sử dụng dấu chấm phẩy để phân tách giữa chúng. Quy tắc được xác định bằng thuộc tính 'style' và bao gồm tên thuộc tính cùng giá trị.

- Mô phỏng Inline CSS:

Trong ví dụ này, Mytour áp dụng Inline CSS cho phần tử p (phần tử chứa đoạn văn bản) với 2 quy tắc: màu văn bản được thiết lập là màu đỏ và căn chỉnh văn bản ra giữa.

CSS Nội tuyến (Internal CSS)

CSS Nội tuyến được đặt trong thẻ HEAD và khai báo trong thẻ 'style'. Các quy tắc này chỉ áp dụng cho tài liệu HTML mà nó được nhúng.

- Mô phỏng Internal CSS:

Trong ví dụ này, Internal CSS đặt trong thẻ head sẽ ảnh hưởng đến phần body và tất cả các thẻ p (đoạn văn bản) trên trang web.

CSS Ngoại tuyến (External CSS)

Trong External CSS, sử dụng phần tử 'link' để kết nối các file style sheet bên ngoài vào tài liệu HTML.

Đầu tiên, tạo quy tắc (rules) trong một file riêng có phần mở rộng .css, sau đó thêm file CSS này vào phần tử head trong tài liệu HTML.

Đây là phương pháp phổ biến nhất để nhúng, chèn CSS vào tài liệu HTML. Bằng cách này, chúng ta có thể viết CSS cho nhiều trang web khác nhau và thêm cùng một file CSS cho tất cả các trang.

- Mô phỏng External CSS:

Trong ví dụ trên, External CSS đặt trong thẻ head. Quy tắc CSS ngoại tuyến (External CSS) sẽ áp dụng cho các phần tử HTML trên trang Mytour và các trang web khác chèn External CSS.

Nhập CSS

Ngoài những phương pháp chèn CSS vào tài liệu HTML ở trên, chúng ta có thể nhập (import) một file stylesheet vào một file stylesheet khác bằng quy tắc @import.

Có 2 cách để nhập file stylesheet: thứ nhất là sử dụng thẻ head trong tài liệu HTML, còn thứ hai là nhập trực tiếp trong file CSS.

CSS Được Nhập Trong Thẻ Head

Chúng ta có thể nhập file CSS vào thẻ style sử dụng quy tắc @import. Tuy nhiên, cách này không hữu ích lắm.

Mô phỏng:

Nhập stylesheet vào một stylesheet khác

Sử dụng quy tắc @import để nhập stylesheet vào một stylesheet khác giúp chúng ta quản lý mã CSS lớn, đồng thời tối ưu hóa quá trình tải trang thông qua bộ nhớ cache trình duyệt.

Lưu ý: @import cần được đặt trước tất cả các nội dung khác trong file CSS của bạn.

Mô phỏng:

@import url('/css/stylesheet-1.css');

@import url('/css/stylesheet-2.css');

@import url('/css/colors.css');

p { color: blue; font-size: 14px; }

h1 { font-weight: bold; color: black; }

Trong ví dụ này, file CSS chính kết hợp nhiều tài liệu CSS phụ khác nhau.

2. Làm thế nào để tích hợp CSS vào tài liệu HTML?

Các trang web sử dụng các phương thức tích hợp, nhúng CSS khác nhau tùy thuộc vào yêu cầu cụ thể.

- Đối với việc tích hợp, nhúng CSS cho nhiều trang web, External CSS là lựa chọn phù hợp.

- Bạn cũng có thể sử dụng Internal CSS nếu muốn áp dụng CSS cho nhiều yếu tố HTML khác nhau trên cùng một trang.

- Nếu muốn thêm hoặc ghi đè CSS vào phần tử HTML bất kỳ, lựa chọn Inline CSS là phù hợp.

Bài học CSS trên đây của Mytour đã hướng dẫn cách nhúng, chèn CSS vào tài liệu HTML. Trong các bài học tiếp theo, Mytour sẽ giới thiệu về màu sắc trong CSS.