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.
TÓM TẮT NỘI DUNG
Phương pháp External CSS
Như đã đề 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ẻ <link/>.
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ẻ <head></head>, 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:
| Source code | Diễn giải |
Code của file home.html<html>... <head> .... <link rel="stylesheet" type="text/css" href="my-styles.css"/> ... </head>...</html>
Code của file my-styles.css
|
Ví dụ này mô phỏng phương pháp External CSS, cụ thể file chứa code CSS my-style.css được chèn vào home.html thông qua phần tử thẻ <link/>.
|
Một số lưu ý đối với phương pháp External CSS
| Nội dung lưu ý | Ví dụ |
| Một trang HTML có thể liên kết với nhiều file CSS cũng một lúc, hay nói một cách khác, code CSS của 1 trang HTML có thể phân ra để lưu trên nhiều file CSS khác nhau. | <head> .... <link rel="stylesheet" type="text/css" href="my-styles-1.css"/> <link rel="stylesheet" type="text/css" href="my-styles-2.css"/> <link rel="stylesheet" type="text/css" href="my-styles-3.css"/> ... </head> |
| Nếu file CSS không nằm chung thư mục với file HTML, mà nằm trong một thư mục con nào đó tính từ thư mục chứa file HTML thì đường dẫn đến file CSS đó phải bao gồm tên của những thư mục con đó. | Giả sử, ta có 1 file HTML và một file CSS được lưu trong 1 folder có cấu trúc như sau:
Như vậy, cách dẫn file styles.css về home.html sẽ là:
|
Ưu và nhược điểm của phương pháp External CSS
Dưới đây là những ưu và nhược điểm của phương pháp External CSS
| Ưu điểm | Nhược điểm |
| 1 Rule CSS có thể được dùng để định dạng cho phiều phần tử HTML
Có thể chứa được số lượng lớn các dòng code CSS (1 file css có thể chứa vài trăm đến vài chục ngàn dòng css) Việc lưu code CSS ở một file tách biệt với file HTML giúp rút ngắn số dòng code của file HTML, từ đó giúp code HTML trông gọn gàng hơn, dễ dàng chỉnh sửa hơn. Tận dụng cơ chế caching của trình duyệt để giúp trang HTML có tốc độ load và render nhanh hơn. Code CSS có thể xuất ra dạng nén (.min.css) để có dung lượng nhỏ nhất có thể, từ đó cải thiện tốc độ load trang ở hầu hết các website hiện nay. |
Tốn nhiều thao tác & bước thực hiện nhất
Trong trường hợp code CSS của 1 trang HTML được phân chia ra và lưu trữ trên nhiều file, khi muốn sửa một đoạn mã CSS, lập trình viên sẽ tốn nhiều thời gian hơn để xác định đoạn code đó nằm trên file CSS nào. |
Phương pháp Internal CSS
Trá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ẻ <style></style> 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:
| Source code | Diễn giải |
Code của file home.html<html>... <head> .... <style> ... </head>...</html> |
Các đoạn mã CSS được đặt bên trong nội dung của phần tử thẻ <style></style>.
Như đã đề cập trước đó, cú pháp để viết đoạn mã CSS trong Internal CSS không có gì khác biệt so với External CSS. |
Một số lưu ý đối với phương pháp Internal CSS
| Nội dung lưu ý | Ví dụ |
| Tương tự như phương pháp External CSS, bạn có thể tạo nhiều phần tử thẻ <style></style> chứa các đoạn code CSS khác nhau trên cùng một trang HTML. | <html>... <head> .... <style> ... </head>...</html> |
| Phần tử thẻ <style></style> không nhất thiết phải luôn nằm trong phần tử thẻ <head></head>, mà nó có thể nằm bên trong phần tử thẻ <body></body> | <html>... <head> .... </head>...</html> |
Ưu và nhược điểm của phương pháp Internal CSS
Dưới đây là những ưu và nhược điểm của phương pháp External CSS
| Ưu điểm | Nhược điểm |
| 1 Rule CSS có thể được dùng để định dạng cho nhiều phần tử HTML
Tiết kiệm được thao tác cần thực hiện hơn so với phương pháp External CSS, bởi code CSS được lưu chung với file HTML. |
Việc code CSS được lưu chung với file HTML khiến số dòng code của file HTML gia tăng đáng kể, từ đó gây khó khăn cho việc chỉnh sửa.
Cũng vì cơ chế lưu chung với file HTML nên không thể đặt quá nhiều dòng code CSS bên trong phần tử thẻ |
Phương pháp Inline CSS
Hã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:
| Source code | Diễn giải |
<html> <head> .... </head>...</html> |
Do CSS được chèn trực tiếp vào phần tử được định dạng, do đó không cần đến Selector (bộ chọn) như 2 phương pháp trên (External/Internal CSS).
Thuộc tính CSS và giá trị thuộc tính CSS thể hiện dưới dạng giá trị của thuộc tính HTML, cụ thể là Do bản chất là một thuộc tính HTML, do đó Inline CSS sẽ luôn đượt đặt trong thẻ mở (opening tag) đối với các phần tử Nested Element (phần tử tồn tại ở dạng cặp thẻ, có thẻ đóng và mở). |
Một số lưu ý đối với phương pháp Inline CSS
| Nội dung lưu ý | Ví dụ |
| Tương tự như cú pháp của thuộc tính HTML, một phần tử HTML không được phép chứa cùng một lúc 2 hay nhiều hơn thuộc tính style. | Cách viết sai
Cách viết đúng
|
Trong trường hợp Inline CSS được sử dụng cùng với External CSS và Internal CSS, nếu có 1 một Inline CSS định dạng cho một phần tử đã được định dạng trong External/Internal CSS và không chứa đánh dấu !important (hoccode.org sẽ giải thích sau), trình duyệt sẽ ưu tiên các thuộc tính của Inline CSS. |
<html> <head> <style> </head>...</html>
Trong đoạn code trên, ta thấy phần tử thẻ |
Ưu và nhược điểm của phương pháp Inline CSS
Dưới đây là những ưu và nhược điểm của phương pháp Internal CSS
| Ưu điểm | Nhược điểm |
| Là phương pháp tốn ít thao tác nhất, giúp coder có thể định dạng một phần tử HTML trong thời gian ngắn nhất
Cú pháp đơn giản, không cần phải khai báo Selector |
Một dòng Inline CSS chỉ có thể định dạng cho một phần tử HTML duy nhất.
Việc lạm dụng Inline CSS (sử dụng Inline CSS) với tần suất nhiều hơn mức cần thiết sẽ khiến việc chỉnh sửa file sau này trở nên khó khăn. Một số định dạng (hiệu ứng hover, CSS Generated Content (before, after)…) chỉ có thể sử dụng bằng phương pháp External CSS hoặc Internal CSS. |
Lời khuyên khi lựa chọn phương pháp chèn CSS
Sau 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:
| Trường hợp | Phương pháp khuyến nghị |
| Bạn muốn định dạng cho nhiều phần tử HTML ở nhiều trang HTML khác nhau | External CSS |
| Bạn muốn định dạng hiệu ứng hover, CSS Content (before, after)… cho bất kỳ phần tử HTML | External CSS hoặc Internal CSS |
| Bạn muốn code CSS của mình có dung lượng nhỏ nhất có thể | External CSS |
| Bạn muốn định dạng cho nhiều phần tử HTML ở duy nhất 1 trang HTML trong tập hợp các trang HTML | Internal CSS |
| Bạn muốn định dạng cho duy nhất 1 phần tử HTML của duy nhất 1 trang HTML trong tập hợp các trang HTML | Inline CSS |
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!
>> Xem Thêm : Xây dựng 1 trang HTML định dạng phong cách bằng CSS | Series HTML & CSS căn bản | Bài 9
