Để chèn các đoạn mã css vào file html, chúng ta có thể thực hiện bằng cách chèn trực tiếp vào thuộc tính style của các thẻ html, chèn vào nội dung thẻ style, hoặc chèn file css thông qua thẻ link.
Chèn mã css trực tiếp bằng thuộc tính style của các thẻ html
Xem ví dụ sau:
<body>
<p style="color: red">Đoạn văn bản này sẽ có màu đỏ</p>
<p style="color: blue">Đoạn văn bản này sẽ có màu xanh dương</p>
</body>Trong ví dụ này: Chúng ta đã chèn đoạn mã css vào từng thẻ html thông qua thuộc tính style.
Khi chèn trực tiếp như bên trên, thì nội dung css sẽ chỉ áp dụng cho thẻ html hiện tại.
Ưu điểm khi chèn css trực tiếp trong các thẻ html:
- Nhanh, không bị lưu cache, tính cập nhật tức thời.
Nhược điểm khi chèn css trực tiếp trong các thẻ html:
- code html trở nên phức tạp, khó kiểm soát
Chèn mã css bằng thẻ style
<!DOCTYPE HTML>
<html lang="vi">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Trang bán hàng trực tuyến abc</title>
<!-- Other html tags -->
<style>
.c_red{
color: red;
}
#p2{
color: blue;
}
</style>
</head>
<body>
<p class="c_red">Đoạn văn bản này sẽ có màu đỏ</p>
<p class="c_blue" id="p2">Đoạn văn bản này sẽ có màu xanh dương</p>
</body>
</html>Lưu ý:
- Thẻ style phải được đặt là con trực tiếp của thẻ head.
- Chúng ta có thể có nhiều thẻ style trong một tài liệu html.
- Nội dung của các thẻ style là các đoạn mã css được áp dụng cho tài liệu html hiện tại.
Ưu điểm: Không bị lưu cache, tính cập nhật tức thì.
Nhược điểm: Không áp dụng cùng lúc cho nhiều file html.
Chèn file css bằng thẻ link
File html viết:
<!DOCTYPE HTML>
<html lang="vi">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Trang bán hàng trực tuyến abc</title>
<!-- Other html tags -->
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class="c_red">Đoạn văn bản này sẽ có màu đỏ</p>
<p class="c_blue" id="p2">Đoạn văn bản này sẽ có màu xanh dương</p>
</body>
</html>
File css viết:
.c_red{
color: red;
}
#p2{
color: blue;
}Lưu ý:
- Thẻ link phải được đặt là con trực tiếp của thẻ head.
- Có thể có nhiều thẻ link khai báo file css trong cùng một file html.
- Khi này, đoạn mã trong file css sẽ được áp dụng cho các file html có liên kết tới.
Ưu điểm: Có thể áp dụng cùng lúc cho nhiều file html, có thể lưu cache để tăng tốc độ website.
Nhược điểm: Có thể bị tự động lưu cache dẫn đến tính cập nhật bị trễ hoặc phải xoá cache thủ công mỗi khi cập nhật css.
Như vậy là chúng ta vừa xem qua các cách để chèn mã css vào file html. Ở những bài học tiếp theo chúng ta sẽ học cách để viết các đoạn mã css để trang web nhìn đẹp hơn.
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Cách chèn css vào html đơn giản trong một nốt nhạc