Cách chèn Inline, Internal và External CSS vào HTML

Ngôn ngữ HTML dùng để tạo dựng cấu trúc và nội dung các phần tử có trong trang web. Bạn có thể thêm tiêu đề, văn bản, hình ảnh, biểu mẫu, danh sách…. Tuy nhiên, bạn không thể kiểm soát chúng được trình bày trên các trang web như nào. Để giải quyết vấn đề này, CSS đã ra đời. Một số vấn đề được đặt ra là:

• CSS có tác dụng gì?
• Cách chèn Inline, Internal & External CSS vào HTML?

Hãy cùng BKHOST theo dõi bài viết dưới đây để có cái nhìn tổng quan.

CSS có tác dụng gì?

CSS dùng để trình bày mô tả giao diện của các phần từ HTML đối với một trang trình duyệt. Từ đó hiển thị trang tương ứng. CSS được sử dụng cho nhiều mục đích khác nhau. Nó bao gồm hầu hết các định dạng như cỡ chữ, font chữ và màu nền trên trang. Ngoài ra, CSS còn có thể xóa gạch chân khỏi liên kết, tạo hiệu ứng cho hình ảnh, văn bản và các phần tử HTML khác.

Để thiết kế giao diện trang web của mình bạn cần phải biết đó chính là các cách thêm Inline, Internal & External CSS vào HTML.

Những cách thêm Inline, Internal & External CSS vào HTML

Để thêm CSS vào HTML ta có 3 cách: Inline, Internal và External. Bạn có thể thêm Inline để tạo kiểu (style) cho một phần tử HTML trên trang. Bạn có thể nhúng Internal bằng cách thêm vào phần đầu trong chính văn bản HTML. Hoặc bạn có thể liên kết tới một biểu định kiểu External sẽ chứa tất cả file riêng biệt sau đó sẽ đưa vào HTML của bạn.

Tóm lại, có ba cách bạn có thể thêm CSS vào HTML:

• Inline: yêu cầu mã CSS viết tại thuộc tính style. Nó phải được đặt bên trong phần tử HTML.
• Internal: Yêu cầu mã CSS nằm trong khối thẻ <style>. Nó được đặt bên trong phần đầu của tệp HTML.
• External: Yêu cầu mã CSS được tập hợp ở 1 tệp riêng (.css). Sau đó thông qua phần tử liên kết CSS với HTML là <link>. Sẽ đưa vào bên trong phần đầu của tệp HTML.

Thêm Inline CSS vào HTML

Inline, Internal & External CSS khác nhau khá nhiều. Inline CSS là cách chèn đơn giản nhất. Nó cho phép bạn đặt mã CSS trực tiếp vào các phần tử HTML. Để thêm Inline, bạn sử dụng thuộc tính style và đưa nó bên trong thẻ mở của phần tử HTML.

Cú pháp để chèn CSS nội tuyến là :

{{EJS0}}

Cách thức của CSS Inline và HTML gần như tương đồng nhau. Do đó, các trình duyệt xác định các khai báo CSS này có liên quan nhất đến phần tử HTML. Inline CSS có tác dụng hướng tới mục đích thay đổi một phần tử có thuộc tính style duy nhất. Ngoài ra, bạn cũng nên cân nhắc chúng khi có thể sử dụng CSS bên trong hoặc bên ngoài.

Một ví dụ minh họa về cách chèn Inline CSS vào HTML đối với phần tử <p>như sau:

Để thay đổi màu văn bản thành màu trắng và nền văn bản thành màu đen. Hãy thực hiện cú pháp sau:

{{EJS1}}

Như vậy, giao diện sẽ được đổi như bạn mong muốn:

Xem thêm: Những nguyên tắc cơ bản về code convention và tại sao chúng quan trọng

Thêm Internal CSS vào HTML

Internal CSS là loại mã CSS có một số điểm khác biệt so với Inline. Cũng giống như Inline giá trị và thuộc tính CSS vẫn được đặt. Nhưng thay vì được đặt bên trong thuộc tính kiểu, nó được đặt trực tiếp vào bên trong dấu ngoặc. Ngay sau đó, bộ quy tắc này được gói trong các thẻ <style></style> và được tìm thấy trong phần đầu của tệp HTML.

Cú pháp để chèn Internal CSS là:

{{EJS2}}

So với việc sử dụng Inline CSS thì việc dùng Internal CSS được đánh là cách thực hành hiệu quả hơn và nhiều người áp dụng.

Nó cho phép bạn tạo style cho các nhóm phần tử như màu sắc, cỡ chữ… tại cùng một thời điểm. Thay vì phải thực hiện nhiều lần các thao tác thêm các thuộc tính style giống nhau cho các phần tử.

Lý do đặc biệt thứ hai đó là vì nó tách biệt CSS và HTML thành các phần khác nhau. Nhưng vẫn giữ chúng trong cùng một tài liệu. Vì vậy, Internal CSS được xem là sự lựa chọn tối ưu cho các trang web một trang. Với các trang web có nhiều trang và muốn thực hiện các thay đổi trên trang web. Trước hết cần phải mở từng tệp HTML đại diện cho các trang đó. Sau đó mới có thể thực hiện thao tác thêm hoặc thay đổi Internal CSS trong mỗi phần đầu. Ngoài ra, bạn cũng có thể sử dụng External CSS sẽ được giới thiệu phía bên dưới.

Để hiểu rõ hơn về thao tác này, ta cùng đi đến ví dụ sau: thay đổi màu với màu chữ trắng và nền đen ở các thẻ <p> trong trang web.

{{EJS3}}

Kết quả được hiển thị như sau:

Thêm External CSS vào HTML

Cách cuối cùng khi muốn chèn CSS vào HTML đó chính là External. Đây là cách thêm CSS được định dạng giống như Internal. Tuy nhiên, nó không được chứa trong các thẻ <style> hay đặt ở phần đầu. Thay vào đó, nó được đặt trong một tệp bên ngoài tách biệt với phần mở rộng là .css. Để thực hiện cách này bạn chỉ cần thêm một link liên kết vào phần đầu như sau:

{{EJS4}}

Khi bạn thêm External CSS vào HTML, kết quả tương tự như 2 cách trên. Tuy nhiên, mã CSS được viết tại một file riêng và tách biệt hoàn toàn với văn bản HTML. Trong ba cách chèn là Inline, Internal & External CSS, nó được đánh giá là phương pháp hay nhất. Để thực hiện các thay đổi trên trang web vạn chỉ cần thay đổi chúng tại tệp .css. Vì thế người dùng không cần mất quá nhiều thời gian. Việc tách biệt giữa file HTML với file chứa mã CSS giúp bạn dễ dàng thao tác hơn với các công cụ tìm kiếm. Ngoài ra, nó còn có tác dụng làm cho truy cập trang web nhanh hơn. Do thời gian phải dịch mã trở nên ngắn hơn.

Thêm tất cả Inline, Internal & External CSS vào HTML

Bạn cũng có thể thêm Inline, Internal & External CSS cùng một lúc. Các bit CSS được xếp tầng lên nhau. Nó đồng nghĩa với việc các kiểu có thể kế thừa và ghi đè các kiểu khác đã được khai báo trước đó.

Vì vậy, các kiểu inline được thêm vào một phần tử luôn thay thế kiểu được xác định trong phần <head> của tài liệu. Và việc ghi đè này được xác định trong biểu định của kiểu External. Nó một cách dễ hiểu khác, các kiểu thêm CSS vào HTML nào được thực hiện mới nhất thì được coi là phù hợp nhất . Do đó, nó sẽ được áp dụng thay thế cho cách chèn trước đó. Chính hệ thống phân tầng này được coi là tính đặc hiệu của CSS .

Tổng kết