Học HTML, CSS từ Zero Tới Hero
- Các cách sử dụng CSS
- External CSS
- Internal CSS
- Inline CSS
- Độ ưu tiên của cách sử dụng CSS
- Giữa Internal và External
- Inline
Các cách sử dụng CSS
External CSS
External CSS nghĩa là CSS được viết bên ngoài file HTML. Code CSS sẽ được viết trong một file riêng biệt có phần mở rộng là .css, sau đó được liên kết vào code HTML thông qua thẻ <link> ở phần <head>.
Ví dụ:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Để link file CSS, thẻ <link> có 2 thuộc tính bắt buộc:
rel="stylesheet"href="styles.css"
Giá trị thuộc tính href sẽ tham chiếu tới file CSS bạn cần sử dụng. Nếu thiếu một trong hai thuộc tính bên trên, CSS của bạn sẽ không hoạt động nữa.
Internal CSS
Internal CSS (CSS nội bộ) là cách viết code CSS trong thẻ <style> thuộc phần <head>.
Ví dụ:
<head>
<style>
body { background-color: lightblue; }
p { color: green; }
</style>
</head>
Cách dùng này phù hợp với các trang web có ít nội dung CSS, khi bạn muốn các quy định CSS chỉ ảnh hưởng tới một trang đơn.
Inline CSS
Inline CSS được áp dụng trực tiếp lên từng thẻ HTML qua thuộc tính style.
<p style="color:green;">Đây là một đoạn văn bản màu xanh.</p>
Trong thực tế, Inline CSS sẽ bị hạn chế dùng. Yếu điểm của phương pháp này là làm giảm khả năng tái sử dụng code và khiến trình bày code trở nên khó nhìn.
Độ ưu tiên của cách sử dụng CSS
Độ ưu tiên CSS là khi bạn cùng viết cùng một thuộc tính CSS ở 3 cách khác nhau thì cách nào sẽ được áp dụng đầu tiên.
Giữa Internal và External
Nếu có cả 2 cách viết External và Internal trong cùng 1 file HTML. Cách nào viết sau sẽ có độ ưu tiên cao hơn.
Giả sử, tại file styles.css selector p có giá trị color: red và có đoạn code sau:
<link rel="stylesheet" href="styles.css">
<style>
p {
color: green;
}
</style>
Với trường hợp trên, Internal CSS được viết sau nên thẻ <p> sẽ có màu xanh lá.
Inline
Trong 3 cách CSS, Inline CSS có độ ưu tiên cao nhất vì code CSS cụ thể được áp dụng ngay lập tức trên phần tử.
Trong phạm vi bài này chỉ cần nắm căn bản, sẽ có một bài dạy riêng về độ ưu tiên của CSS.
Tóm tắt
- External CSS: CSS được viết trong file riêng biệt và liên kết vào HTML bằng thẻ
<link>. Phù hợp cho việc tái sử dụng trên nhiều trang và duy trì code dễ dàng. - Internal CSS: CSS được viết trong thẻ
<style>ở phần<head>của HTML. Phù hợp với các trang web có ít CSS, khi muốn quy định CSS chỉ áp dụng cho một trang cụ thể. - Inline CSS: CSS được áp dụng trực tiếp lên từng thẻ HTML thông qua thuộc tính
style. Có độ ưu tiên cao nhất nhưng giảm khả năng tái sử dụng và khiến code khó nhìn. - Giữa Internal và External: Cách nào viết sau sẽ có độ ưu tiên cao hơn.
Nhận xét