Nhập vào tên thẻ chính xác mà thẻ được đặt bên trong để tham chiếu tới external stylesheet
Chào mừng các bạn đã trở lại với series HTML & CSS căn bản! Show Trong bài giảng trước đó, ta đã tìm hiểu về cú pháp của CSS, ý nghĩa và cách dùng của từng thành phần cơ bản trong cú pháp CSS. Hôm nay, chúng ta sẽ tiếp tục tìm hiểu các phương pháp để chèn CSS vào 1 trang (văn bản HTML). Trong Bài 6: CSS là gì? Vai trò & vị trí của CSS trong HTML, hoccode.org có đề cập đến vị trí xuất hiện của CSS trong 1 trang (văn bản) HTML. Những vị trí đó bao gồm External CSS, Internal CSS và Inline CSS. Đó cũng chính là những phương pháp để một coder có thể chèn CSS vào HTML. Trong bài giảng này, mình sẽ phân tích kỹ về mặt hình thức, ý nghĩa, ưu và nhược điểm của từng phương pháp để bạn có thể lựa chọn phương pháp phù hợp nhất cho từng tình huống cụ thể.
Tip: Trước khi bắt đầu đi vào chi tiết của từng phương pháp, mình muốn nêu một lưu ý rằng, lập trình viên có thể sử dụng cả 3 phương pháp chèn CSS cùng một lúc trong một trang HTML, chứ không nhất thiết rằng 1 trang HTML chỉ được áp dụng 1 trong 3 phương pháp. Phương pháp External CSSNhư đã đề cập ở bài 6, bản chất của External CSS là các đoạn mã CSS nằm ở một file riêng biệt có phần mở rộng (extension) là .css (hoặc .min.css) liên kết với HTML thông qua phần tử thẻ . Kết hợp với nội dung bố cục phần tử HTML ở bài 4 → Quy tắc 3, ta biết rằng các phần tử HTML dùng để kết nối với các tập tin bên ngoài chứa các đoạn mã thuộc ngôn ngữ CSS, Javascript luôn được đặt trong phần tử thẻ , như vậy ta có thể suy ra cách thức chèn CSS theo phương pháp External CSS như sau:Giả sử, các đoạn mã CSS được lưu trong tập tin my-styles.css nằm chung folder với file home.html, ta có đoạn mã HTML được dùng để kết nối với 1 file CSS:
Một số lưu ý đối với phương pháp External CSS
Ưu và nhược điểm của phương pháp External CSSDưới đây là những ưu và nhược điểm của phương pháp External CSS
Phương pháp Internal CSSTrái ngược với phương pháp External CSS, lập trình viên sử dụng phương pháp Internal CSS sẽ chứa các đoạn mã CSS trong phần tử thẻ ngay trên file HTML đó. Để hiểu rõ hơn, chúng ta hãy cùng xem qua một ví dụ dưới đây:
Một số lưu ý đối với phương pháp Internal CSS
Ưu và nhược điểm của phương pháp Internal CSSDưới đây là những ưu và nhược điểm của phương pháp External CSS
Phương pháp Inline CSSHãy cùng tìm hiểu phương pháp chèn CSS cuối cùng: Inline CSS. Đây được xem là phương pháp "lợi bất cập hại", nghĩa là nó mang lại nhiều lợi ích ban đầu cho người lập trình nhưng nếu sử dụng nhiều sẽ mang đến nhiều tác hại về sau. Cơ chế của phương pháp Inline CSS chính là code CSS sẽ được gắn trực tiếp trên phần tử HTML, thông qua thuộc tính style. Và như đã tìm hiểu ở Bài 7: Cú pháp của CSS, Inline CSS sẽ không có thành phần selector. Để hiểu rõ hơn về phương pháp này, ta cùng xem qua ví dụ dưới đây:
Một số lưu ý đối với phương pháp Inline CSS
Ưu và nhược điểm của phương pháp Inline CSSDưới đây là những ưu và nhược điểm của phương pháp Internal CSS
Lời khuyên khi lựa chọn phương pháp chèn CSSSau khi tìm hiểu qua 3 phương pháp, ta thấy được mỗi phương pháp đều có ưu và nhược điểm, không có phương pháp nào là hoàn hảo. Nhược điểm của phương pháp này thì lại được khắc phục bằng ưu điểm của phương pháp kia và ngược lại. Chính vì thế, dựa vào kinh nghiệm khi đã trải qua rất nhiều dự án thực tế, mình sẽ chia sẻ cho các bạn cách lựa chọn phương pháp chèn CSS cho những tình huống cụ thể như sau:
Như vậy, chúng ta đã tìm hiểu qua cả 3 phương pháp chèn CSS vào HTML, ưu và nhược điểm của từng phương pháp, cũng như một số gợi ý về các tình huống mà người lập trình nên lựa chọn phương pháp nào. Nếu có điểm nào trong nội dung mà bạn chưa rõ, hãy để lại thông qua bình luận (comment). Nếu bạn thấy bài giảng này hay và hữu ích, hãy cho chúng tớ 1 like, share hay đánh giá để chúng tớ có thêm động lực cho ra những bài giảng tốt hơn nhé. Bài giảng kế tiếp sẽ là một bài thực hành để bạn có thể áp dụng các kiến thức của bài hôm nay. Chào và hẹn gặp lại các bạn! |