Hướng dẫn nhanh 3 cách nhúng CSS vào HTML

Hướng dẫn nhanh 3 cách nhúng CSS vào HTML

20/05/2024

1060

0

Chia sẻ lên Facebook
Hướng dẫn nhanh 3 cách nhúng CSS vào HTML

Bạn đang gặp khó khăn khi muốn tìm cách nhúng CSS vào HTML? Đừng lo, Topchuyengia sẽ giúp bạn giải quyết vấn đề này một cách dễ dàng. Dưới đây là ba phương pháp khác nhau để nhúng CSS vào HTML. Hãy cùng tìm hiểu trong bài viết này để có thể nhúng CSS vào HTML mà không bị gặp lỗi nhé.

Vì sao phải dùng CSS?

cách nhúng css vào html

CSS là một công cụ quan trọng trong việc định dạng và trình bày các phần tử HTML trên trang web. Sử dụng CSS giúp phân tách rõ ràng giữa nội dung và kiểu hiển thị của trang. Điều này rất cần thiết vì nếu chỉ sử dụng HTML, các định dạng và kiểu phải được xác định ngay trong văn bản HTML, gây khó khăn trong việc bảo trì, đặc biệt là đối với các trang web phức tạp. Nhưng khi áp dụng CSS, các định dạng được loại bỏ khỏi văn bản HTML và thay thế bằng việc lưu trữ trong một tệp tin CSS riêng biệt hoặc một phần khác của trang web. Điều này giúp quản lý và chỉnh sửa kiểu hiển thị trở nên dễ dàng hơn, đồng thời tăng tính linh hoạt và tái sử dụng trong thiết kế web.

XEM THÊM:

Hướng dẫn chi tiết nhúng CSS vào HTML

Để minh họa, dưới đây là một đoạn mã CSS ví dụ có nội dung như sau (tạm thời bạn chưa cần hiểu về cú pháp):

cách nhúng css vào html

Đoạn mã này sẽ định dạng chữ màu trắng và nền màu đỏ. Để áp dụng mã CSS này cho các phần tử HTML, có ba cách nhúng CSS vào HTML là Inline, Internal và External.

  • Cách nhúng Inline: bạn có thể viết mã CSS trực tiếp trong thuộc tính style của phần tử HTML.
  • Cách nhúng Internal: mã CSS được đặt trong cùng văn bản HTML, bên trong thẻ style.
  • Cách nhúng External: mã CSS được lưu trong một file riêng biệt (thường có phần mở rộng là .css), sau đó được nạp vào tài liệu HTML bằng phần tử link.

Điều này cho phép bạn chèn CSS vào HTML trực tiếp trong văn bản HTML sử dụng kiểu nhúng Inline và Internal.

Inline CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng inline là bằng cách đặt mã CSS trực tiếp vào thuộc tính style của phần tử. Điều này chỉ ảnh hưởng đến phần tử đó. Ví dụ, dưới đây là một ví dụ về việc áp dụng mã CSS dạng inline cho phần tử p trong HTML:

cách nhúng css vào html
Kết quả là phần tử p sẽ có màu chữ trắng và nền màu đỏ.

Kết quả là phần tử p sẽ có màu chữ trắng và nền màu đỏ. Bạn có thể thử thay đổi các giá trị màu khác như blue, green, navy, orange để kiểm tra.

Internal CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng Internal là sử dụng thẻ style để tạo ra một khu vực để viết mã CSS trong tài liệu HTML. Thường thì style được đặt trong thẻ head. Dưới đây là một ví dụ, trong khối style, nó định nghĩa kiểu cho tất cả các phần tử p trong tài liệu, sẽ có màu chữ trắng và nền màu đỏ.

các
Kết quả là các phần tử p sẽ có màu chữ trắng và nền màu đỏ

Kết quả là các phần tử p sẽ có màu chữ trắng và nền màu đỏ. Bạn có thể thử thay đổi các giá trị màu khác như blue, green, navy, orange để kiểm tra.

External CSS - nhúng CSS vào HTML

Một cách để nhúng CSS dạng External là sử dụng thẻ link để nạp file CSS vào tài liệu HTML. Bạn có thể viết mã CSS trong các file độc lập (thường có phần mở rộng .css) và sử dụng thẻ link trong phần head để liên kết nó với HTML. Ví dụ, để liên kết với một file ngoài có tên là demo.css, bạn có thể sử dụng cú pháp sau:

cách nhúng css vào html
Một cách để nhúng CSS dạng External là sử dụng thẻ link để nạp file CSS vào tài liệu HTML

Trong file demo.css, bạn có thể viết mã CSS (không cần thẻ style), ví dụ:

cách nhúng css vào html

Kết quả sẽ tương tự như ví dụ trên, chỉ khác là mã CSS đã được tách riêng khỏi văn bản HTML và được viết trong một file độc lập. Thuộc tính href trong thẻ link chỉ định địa chỉ URL của file CSS. Trong ví dụ trên, địa chỉ được sử dụng là địa chỉ tương đối vì file CSS và HTML nằm trong cùng thư mục (xem thêm về cách chỉ định đường dẫn tới file, URL).

 

Ngoài ra, bạn cũng có thể tích hợp các định nghĩa CSS đã được cung cấp bởi Framework Bootstrap. Ví dụ, để tích hợp các định nghĩa CSS của Bootstrap từ đường dẫn: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css, bạn có thể sử dụng thẻ link như sau:

 

Sau khi tích hợp, bạn có thể sử dụng các lớp CSS như display-1, text-success ngay trong tài liệu HTML.

Xem thêm các bài viết hướng dẫn khác:

Như vậy bài viết trên của Topchuyengia đã hướng dẫn cho bạn cách nhúng CSS vào HTML mà bạn có thể áp dụng. Nếu tham khảo nhưng vẫn chưa thực hiện được, hãy liên hệ để được các chuyên gia CNTT tư vấn nhanh chóng nhất. 

Tôi là Tô Lãm với hơn 4 năm kinh nghiệm trong lĩnh vực IT, Business Analyst, Data Analyst, Tracking,... cho rất nhiều doanh nghiệp SME. Tôi tốt nghiệp trường Công nghệ Thông tin cùng với kỹ năng và kiến thức trau dồi của mình, tôi mong muốn được chia sẻ các thông tin hữu ích dến với người đọc thông qua các bài viết trên Topchuyengia, mọi người hãy follow mình nhé.

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng