Класс тега img не работает для соответствующего файла css
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "store.css">
<meta charset = "UTF-8">
<title>About</title>
</head>
<body>
<ul class = "navBar">
<li><a href = "http://csc412sfsu.com/~yzhang25/store_home">Home</a></li>
<li><a href = "http://csc412sfsu.com/~yzhang25/store_hours">Hours</a></li>
<li><a href = "http://csc412sfsu.com/~yzhang25/store_about">About</a></li>
</ul>
<div class = "centered-container">
<h1 class = "centered-text sansSerif-text">About the store</h1>
<p>Here is the information about the store</p>
<img class = "open-sign-img" src = "images/testpic.jpg" alt = "open sign">
</div>
</body>
</html>
css-файлы
.orange-text {
color: orange;
}
.blue-text {
color: blue;
}
#red-header {
color: red;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 10px;
background-color: pink;
}
.navBar li {
display: inline;
}
.centered-container {
max-width: 100%;
width: 80%;
height: 90vh;
margin: auto;
background-color: yellow;
}
.centered-text {
text-align: center;
}
.sansSerif-text {
font-family: sans-serif;
}
.centered-container .open-sign-img {
width: 50%;
display: block;
margin: auto;
}
введите описание изображения здесь
остальная часть моего кода работает нормально. В chrome devTool он показывает, что класс CSS не соединяется с тегом img в моем html-файле. Я так запутался, почему остальные работают, кроме этого. Я много ищу в гуле, но, кажется, я не могу найти правильный ответ.
Ответы 2
Веб-сервер, который обслуживает ваш сайт, в настоящее время отправляет следующие заголовки вместе с вашим файлом CSS:
HTTP/1.1 200 OK
Date: Fri, 15 Mar 2019 22:56:07 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Fri, 15 Mar 2019 22:19:04 GMT
ETag: "22c-584296d30e600-gzip"
Accept-Ranges: bytes
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/css
Transfer-Encoding: chunked
Из-за заголовка Last-Modified браузер будет кэшировать этот файл, чтобы избежать повторного запроса его с сервера. У меня такое чувство, что это проблема в вашем случае, так как сайт загружается отлично, когда я захожу на него прямо сейчас.
Если вы не хотите, чтобы это произошло, в инструментах разработчика большинства браузеров есть флажок, который позволяет отключить кэширование, когда инструменты открыты.
В Chrome это можно найти, открыв DevTools с помощью F12, затем щелкнув вкладку «Сеть» и установив флажок «Отключить кеш». Кроме того, вы можете использовать CtrlShiftR для жесткой перезагрузки, которая заставит повторно запрашивать все кэшированные ресурсы без использования DevTools.
Спасибо! это проблема кеша
В вашей скрипте CSS правильный:
с фоновым цветом:
.centered-container .open-sign-img {
background-color: red;
width: 50%;
display: block;
margin: auto;
}
Вы очистили кеш?
Он отображается в инструментах разработчика в этой скрипке без каких-либо изменений: jsfiddle.net/jennifergoncalves/0omj7r3d/1