CSS Inline áp dụng kiểu CSS bên trong thẻ HTML của một phần tử. Thuộc tính style HTML thiết lập kiểu dáng cho phần tử. Các quy tắc CSS Inline ghi đè các kiểu từ các tài liệu CSS khác vì chúng áp dụng trực tiếp vào phần tử.
Các Kiểu CSS
Năm 1996, CSS được giới thiệu. CSS cho phép tách biệt trình bày và nội dung của một trang web. Sử dụng CSS, bạn có thể dễ dàng thêm kiểu dáng cho trang web và áp dụng các kiểu đó cho các phần tử cụ thể trên trang.
Có ba phương pháp để áp dụng kiểu dáng cho trang web:
- CSS Inline: Phương pháp này áp dụng kiểu duy nhất cho một phần tử đơn lẻ.
- CSS External (Ngoại bộ): Tạo một tệp CSS riêng biệt chứa các kiểu cho trang web.
- CSS Internal (Nội bộ): Sử dụng thẻ
<style>để định nghĩa kiểu cho tệp HTML.
Trong hướng dẫn này, chúng ta sẽ tập trung chi tiết vào CSS Inline.
CSS Inline: Hướng Dẫn Chi Tiết
CSS Inline áp dụng kiểu dáng cho một phần tử HTML. Bạn phải chỉ định CSS Inline cho từng phần tử muốn định kiểu. Đây là phương án thay thế cho việc sử dụng bộ chọn (selector) để làm việc với một phần tử cụ thể.
Giả sử bạn muốn thay đổi màu chữ hoặc cỡ chữ của một đoạn văn bản trên trang web. Thay vì viết quy tắc trong một tệp kiểu riêng biệt, bạn có thể thêm kiểu trực tiếp vào thẻ đoạn văn đó.
Các quy tắc áp dụng inline sẽ ghi đè bất kỳ kiểu nào được áp dụng trong bảng kiểu nội bộ hoặc ngoại bộ.
Để sử dụng CSS Inline, bạn chỉ định kiểu CSS trực tiếp trong thuộc tính style của phần tử. Hãy xem ví dụ sau:
Giả sử chúng ta muốn thay đổi màu chữ của một tiêu đề đơn lẻ thành màu xanh lá. Chúng ta có thể làm như sau:
<h1 style="color: green;">Đây là một Tiêu đề</h1>
Mã trên đặt màu font của tiêu đề thành xanh lá. Vì chúng ta chỉ muốn kiểu này áp dụng cho tiêu đề này, nên chúng ta thêm trực tiếp bằng CSS Inline.
Khi Nào Nên Sử Dụng CSS Inline
CSS Inline thường được dùng để xem trước thay đổi trên trang web hoặc thêm kiểu cho một phần tử duy nhất.
Bạn có thể làm việc với một phần tử cụ thể thay vì tất cả các phần tử khớp với bộ chọn CSS. Bạn không cần lo lắng về việc thay đổi bảng kiểu để xem trước thay đổi.
Tuy nhiên, nếu bạn muốn đặt chiều rộng cho nhiều đoạn văn bản thành 500px, bạn nên sử dụng phương pháp định kiểu khác (Internal hoặc External CSS).
Khi sử dụng thận trọng, CSS Inline là cách tốt để áp dụng kiểu cho các phần tử. Tuy nhiên, lạm dụng CSS Inline dễ dàng dẫn đến code rối rắm, khó bảo trì.
Các kiểu Inline khó cập nhật vì bạn phải thủ công thay đổi từng kiểu. Ngược lại, các kiểu trong bảng kiểu có thể sử dụng bộ chọn rộng ảnh hưởng đến nhiều phần tử trong tài liệu HTML.
Thường thì tốt hơn là sử dụng Internal hoặc External CSS khi bạn muốn áp dụng danh sách lớn các quy tắc cho một phần tử (ví dụ: 6-7 thuộc tính CSS). Việc nhồi nhét quá nhiều quy tắc vào thuộc tính style của thẻ HTML làm code khó đọc, khó thấy cấu trúc phần tử.
Kết Luận
CSS Inline áp dụng kiểu cho một phần tử cụ thể trên trang web. Nói chung, dùng CSS Inline phù hợp khi bạn muốn xem trước thay đổi hoặc chỉ định kiểu cho vài phần tử. Nếu cần áp dụng nhiều kiểu, Internal hoặc External Stylesheet thường được ưu tiên.
Hướng dẫn này đã trình bày cơ bản về định kiểu trong CSS và cách sử dụng CSS Inline với ví dụ minh họa. Bây giờ bạn đã sẵn sàng sử dụng CSS Inline như một lập trình viên web chuyên nghiệp.
Để tìm hiểu thêm về lập trình CSS, hãy đọc hướng dẫn hoàn chỉnh của chúng tôi về Cách Học CSS.