Khi làm việc với HTML và CSS, bạn có thể thấy rằng CSS của bạn không tạo kiểu cho tài liệu HTML của bạn ngay cả khi bạn đã thêm CSS vào trang của mình.
Dưới đây là sáu bản sửa lỗi mà bạn có thể cố gắng làm cho CSS của mình hoạt động trên trang HTML của bạnsix fixes that you can try to make your CSS work on your HTML page
Đảm bảo rằng bạn thêm thuộc tính rel vào thẻ liên kết
Khi bạn thêm một tệp CSS bên ngoài vào tài liệu HTML của mình, bạn cần thêm thuộc tính
Nếu bạn bỏ qua thuộc tính
Đảm bảo bạn có đường dẫn chính xác trong thuộc tính HREF
Nếu bạn có tệp CSS trong cùng thư mục với tài liệu HTML, thì bạn có thể thêm đường dẫn vào tệp CSS trực tiếp như hiển thị bên dưới:
Nếu bạn thêm một
Khi CSS của bạn là một thư mục, bạn cần chỉ định tên thư mục bên trong thuộc tính
Cái này sai:wrong:
Chính xác:correct:
Đảm bảo tên tệp CSS là chính xác
Tên của tệp CSS mà bạn đặt bên trong thuộc tính
Nếu bạn có tên CSS có khoảng trống, thì bạn cần bao gồm các khoảng trống ở định dạng an toàn URL bằng cách thay thế nó bằng
Ví dụ: giả sử tên của tệp CSS của bạn là
Bởi vì URL có thể chứa không gian, nên bạn khuyến nghị bạn nên thay thế tất cả các không gian trong tệp CSS của mình bằng dấu gạch nối
Đảm bảo thẻ liên kết ở đúng nơi
Thẻ
Hello World
Nếu bạn đặt thẻ
Ví dụ sau là sai:
Test page
Kiểu bên ngoài có thể được đặt bên trong thẻ
Ví dụ sau vẫn hoạt động:
Test page
Đảm bảo rằng tất cả các quy tắc phong cách của bạn là chính xác
Khi bạn có cú pháp CSS không hợp lệ bên trong bảng kiểu của mình, thì trình duyệt sẽ bỏ qua các cú pháp không hợp lệ và áp dụng các cú pháp hợp lệ.
Ví dụ: giả sử bạn có tệp CSS sau:
body {
background-color: greenyellow;
}
h2 {
color: choco;
}
Vì các trình duyệt không có hỗ trợ cho tên màu
Đảm bảo rằng bạn đang sử dụng cú pháp phù hợp cho kiểu dáng của mình vì cú pháp CSS không hợp lệ đã tạo ra một thông báo lỗi.
Vô hiệu hóa bộ đệm bằng một tải lại cứng
Đôi khi, bạn có thể có tệp CSS được liên kết chính xác từ tệp HTML của bạn, nhưng bạn không thấy những thay đổi bạn thực hiện đối với tệp CSS được phản ánh trên trang web.
Điều này thường xảy ra khi trình duyệt phục vụ phiên bản được lưu trong bộ nhớ cache của tệp CSS của bạn.
Để vô hiệu hóa bộ đệm và phục vụ phiên bản mới nhất của tệp CSS của bạn, bạn có thể thực hiện tải lại cứng trên trình duyệt.
Phím tắt để thực hiện làm mới cứng có thể thay đổi giữa các trình duyệt:
- Đối với Edge, Chrome và Firefox trên Windows/ Linux, bạn cần nhấn
7Windows/ Linux, you need to press
7 - Đối với Edge, Chrome và Firefox trên MacOS, bạn cần nhấn
8macOS, you need to press
8 - Đối với Safari, bạn cần trống bộ nhớ cache với
9 hoặc nhấp vào menu trên cùng
0
Nếu bạn sử dụng Chrome, bạn cũng có thể chọn để làm trống bộ đệm và thực hiện tải lại cứng với các bước sau:
- Mở Chrome DevTools bằng cách nhấn
1 trên Windows/ Linux hoặc
2 trên Mac. - Nhấp chuột phải vào biểu tượng tải lại [làm mới] và chọn tùy chọn thứ ba
Hình ảnh bên dưới hiển thị tùy chọn bộ nhớ cache trống chrome và tải lại cứng bạn cần chọn:Empty Cache and Hard Reload option you need to select:
Với điều đó, bạn sẽ thấy các thay đổi CSS mới nhất được phản ánh trên trang web của bạn.
Ngoài ra, bạn cũng có thể vô hiệu hóa bộ đệm trình duyệt bằng cách sử dụng phiên bản CSS như được giải thích ở đây:
Trick Phiên bản CSS được giải thích
Và đó là sáu bản sửa lỗi bạn có thể thử liên kết tệp CSS của mình với tài liệu HTML của bạn.
Tôi hy vọng hướng dẫn này đã giúp bạn khắc phục vấn đề 👍