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!

Nội dung chính

Phương pháp External CSS
Phương pháp Internal CSS
Phương pháp Inline CSS
Lời khuyên khi lựa chọn phương pháp chèn CSS
Video liên quan

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 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

...h1 { font-size: 15px; margin-bottom: 5px}.c1 { background-color: red; color: white}#zx { border-radius: 5px; border: 1px solid red}

...

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/>.

rel="stylesheet" là thuộc tính HTML quy định thẻ link sẽ kết nối đến một tập tin chứa code dùng để định dạng phong cách (style) cho HTML.

type="text/css" là thuộc tính HTML cho biết tập tin dùng để định dạng được viết ở ngôn ngữ css

href="..." là thuộc tính HTML chứa giá trị đường dẫn đến file CSS.

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.

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>

... h1 { font-size: 15px; margin-bottom: 5px } .c1 { background-color: red; color: white } #zx { border-radius: 5px; border: 1px solid red }

...

</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.

...

</style> <style>

...

</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>

...

</style> ...

</body>

...
</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ẻ <style></style>.

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> <body> <h1 style="text-align:center; color: red">Tổng hợp các câu chăm ngôn về việc học</h1> <p style="font-size: 15px">"Học, học nữa, học mãi"</p> <hr style="border-color: red"/> <p style="text-align:right">- Theo Lenin</p> <p style="font-size: 15px">"Học, học nữa, học mãi"</p> <p style="text-align:right">- Trong các câu ca dao, tục ngữ Việt Nam</p>

</body>

...
</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à style="...".

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.

... h1 { color: blue; margin-bottom: 5px; }

...

</style>
</head> <body> <h1 style="text-align:center; color: red">Tổng hợp các câu chăm ngôn về việc học</h1> .....

</body>

...
</html>

Trong đoạn code trên, ta thấy phần tử thẻ <h1></h1> vừa được định dạng bằng Internal CSS lẫn Inline CSS, trong đó thuộc tính CSS color xuất hiện trong cả Internal CSS lẫn Inline CSS. Trong trường hợp này, trình duyệt sẽ ưu tiên render color: red của Inline CSS thay vì color: blue của Internal CSS. Tất cả các thuộc tính CSS không bị trùng lập còn lại của Internal CSS (margin-bottom: 5px; ) và Inline CSS (text-align:center;) sẽ được giữ lại và đưa vào render.

Ư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!

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

Phương pháp External 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 CSS

Phương pháp Internal CSS

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 CSS

Phương pháp Inline CSS

Ưu và nhược điểm của phương pháp Inline CSS

Lời khuyên khi lựa chọn phương pháp chèn CSS

Bài Viết Liên Quan

Quảng Cáo

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Chủ đề

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội