Hướng dẫn why is my css not affecting my html? - tại sao css của tôi không ảnh hưởng đến html của tôi?

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

<link rel="stylesheet" href="style.css" />

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:

<link rel="stylesheet" href="style.css" />

Nếu bạn thêm

This is an example div

<link rel="stylesheet" href="/style.css" />

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

This is an example div

This is an example div

Cái này sai:wrong:

<link rel="stylesheet" href="/assets/style.css" />

Chính xác:correct:

<link rel="stylesheet" href="assets/style.css" />

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

This is an example div

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

This is an example div

Ví dụ: giả sử tên của tệp CSS của bạn là

This is an example div

This is an example div

<link rel="stylesheet" href="my%20style.css" />

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

This is an example div

This is an example div

This is an example div

#example {
width: 350px;
height: 350px;
background-color: green;
}

#example {
width: 350px;
height: 350px;
background-color: green;
}

Đảm bảo thẻ liên kết ở đúng nơi

Thẻ

#example {
width: 350px;
height: 350px;
background-color: green;
}

Nếu bạn đặt thẻ

#example {
width: 350px;
height: 350px;
background-color: green;
}

#example {
width: 350px;
height: 350px;
background-color: green;
}

Ví dụ sau là sai:

Kiểu bên ngoài có thể được đặt bên trong thẻ

#example {
width: 350px;
height: 350px;
background-color: green;
}

#example {
width: 350px;
height: 350px;
background-color: green;
}

Ví dụ sau vẫn hoạt động:

Đả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:

Vì các trình duyệt không có hỗ trợ cho tên màu

#example {
width: 350px;
height: 350px;
background-color: green;
}

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" href="style.css" />

#example {
width: 350px;
height: 350px;
background-color: green;
}

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

  <link rel="stylesheet" href="style.css" />
  

  3Windows/ Linux, you need to press

  <link rel="stylesheet" href="style.css" />
  

  3
• Đối với Edge, Chrome và Firefox trên MacOS, bạn cần nhấn

  <link rel="stylesheet" href="style.css" />
  

  4macOS, you need to press

  <link rel="stylesheet" href="style.css" />
  

  4
• Đối với Safari, bạn cần trống bộ nhớ cache với

  <link rel="stylesheet" href="style.css" />
  

  5 hoặc nhấp vào menu trên cùng

  <link rel="stylesheet" href="style.css" />
  

  6

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

  <link rel="stylesheet" href="style.css" />
  

  7 trên Windows/ Linux hoặc

  <link rel="stylesheet" href="style.css" />
  

  8 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 đề 👍