Tôi đã tạo ra một bảng kiểu bên ngoài trong đó tôi tin rằng sẽ thực hiện các tệp HTML của tôi khi tôi chạy chúng trên Notepad ++. Tuy nhiên, đây không phải là trường hợp. Nó dường như không ảnh hưởng đến nó cả. Tôi tin rằng liên kết là chính xác, nhưng tôi không hiểu tại sao nó không hoạt động. Đây là trang web đầu tiên của tôi tôi đang tạo. Nếu bạn cần thêm hình ảnh, xin vui lòng bình luận và hỏi. Tôi khá là không biết gì vào lúc này.
Đã hỏi ngày 5 tháng 1 năm 2014 lúc 14:33Jan 5, 2014 at 14:33
2
Tệp CSS nằm trong một thư mục riêng. Bạn phải chỉ định thư mục này. Bạn phải biết rằng nó phải nằm trong một thư mục con của thư mục chứa
4.You have to know it has to be in a subfolder of the folder containing
4. Cách phổ biến nhất là:
5
5
Sau đó, bạn phải sử dụng:
Đã trả lời ngày 5 tháng 1 năm 2014 lúc 14:45Jan 5, 2014 at 14:45
AndyandyAndy
3,8191 Huy hiệu vàng18 Huy hiệu bạc37 Huy hiệu đồng1 gold badge18 silver badges37 bronze badges
0
Bạn chỉ có sai. REL cần bằng với biểu đồ kiểu, không phải websitestestyles
Đã trả lời ngày 5 tháng 1 năm 2014 lúc 14:36Jan 5, 2014 at 14:36
CrabolraboloCRABOLO
8,52738 Huy hiệu vàng39 Huy hiệu bạc67 Huy hiệu Đồng38 gold badges39 silver badges67 bronze badges
1
Tôi sẽ cho bạn một ví dụ làm việc.
Tệp index.html
Example webpage
This is an example div
Tệp Style.css
#example {
width: 350px;
height: 350px;
background-color: green;
}
index.html và style.css phải nằm trong cùng một thư mục cho ví dụ này! Để tìm hiểu và hiểu CSS và HTML, tôi khuyên bạn nên trường W3Schools
chỉnh sửa
Vâng, tôi đã không đọc về việc bạn đang giữ tệp CSS trong thư mục riêng biệt. href chỉ định vị trí của tệp.
Đã trả lời ngày 5 tháng 1 năm 2014 lúc 14:50Jan 5, 2014 at 14:50
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
6 vào thẻ
7 để làm cho nó hoạt động.
Nếu bạn bỏ qua thuộc tính
8 từ thẻ
7 thì kiểu won won được áp dụng cho trang.Đả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
Example webpage
This is an example div
0 trước tên tệp, CSS sẽ được áp dụng:
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
Example webpage
This is an example div
1 mà không có
Example webpage
This is an example div
0.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
Example webpage
This is an example div
1 phải khớp với tên thực của tệp CSS.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
Example webpage
This is an example div
4Ví dụ: giả sử tên của tệp CSS của bạn là
Example webpage
This is an example div
5, sau đó ở đây, tên chính xác bên trong thuộc tính
Example webpage
This is an example div
1:
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
Example webpage
This is an example div
7 hoặc dấu gạch dưới
Example webpage
This is an example div
8 để
Example webpage
This is an example div
5 trở thành #example {
width: 350px;
height: 350px;
background-color: green;
}
0 hoặc #example {
width: 350px;
height: 350px;
background-color: green;
}
1.Đảm bảo thẻ liên kết ở đúng nơi
Thẻ
7 mà bạn đã sử dụng trong tệp HTML của mình phải là con trực tiếp của thẻ #example {
width: 350px;
height: 350px;
background-color: green;
}
3 như được hiển thị bên dưới:
0Nếu bạn đặt thẻ
7 bên trong một thẻ tiêu đề hợp lệ khác như thẻ #example {
width: 350px;
height: 350px;
background-color: green;
}
5 hoặc #example {
width: 350px;
height: 350px;
background-color: green;
}
6, thì CSS đã giành được công việc.Ví dụ sau là sai:
1Kiểu bên ngoài có thể được đặt bên trong thẻ
#example {
width: 350px;
height: 350px;
background-color: green;
}
7, mặc dù nó đã khuyến nghị đặt nó vào thẻ #example {
width: 350px;
height: 350px;
background-color: green;
}
3 để tải kiểu trước nội dung trang.Ví dụ sau vẫn hoạt động:
2Đả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:
3Vì các trình duyệt không có hỗ trợ cho tên màu
#example {
width: 350px;
height: 350px;
background-color: green;
}
9, quy tắc kiểu cho các thẻ
0 ở trên sẽ bị bỏ qua trong khi thuộc tính
1 cho thẻ #example {
width: 350px;
height: 350px;
background-color: green;
}
7 sẽ được áp dụng.Đả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
3Windows/ Linux, you need to press
3 - Đối với Edge, Chrome và Firefox trên MacOS, bạn cần nhấn
4macOS, you need to press
4 - Đối với Safari, bạn cần trống bộ nhớ cache với
5 hoặc nhấp vào menu trên cùng
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
7 trên Windows/ Linux hoặc
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 đề 👍