Не цепляется style.css, браузер не видит файл, в чем проблема?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Киномонстр</title>
	<meta name="description" content="Киномонстр - это  портал о кино">
	<meta name="keywords" content="фильмы, фильмы онлайн, hd">
	<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
	<div class="main">
		<div class="header">
			<div class="logo">
				<div class="logo_text">
					<h1><a href="/">Киномонстр</a></h1>
					<h2>Кино - наша страсть </h2>
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>


.header{
	background-color: darkslateblue;
	height: 177px;
	font-size: 0.8em;
	margin-left: 0px;
	margin-right: 0px;
	min-width: 900px;
}

.main, .logo, .menubar, .site_content, .footer{
	margin-right: auto;
	margin-left: auto;
}

.logo {
	width: 880px;
	padding-bottom: 40px;
}

html

css

2 ответов

Здравствуйте.

1. В браузере Google Chrome нужно открыть этот файл (index.html)

2. Нажать на ctrl и U на клавиатуре (или правой кнопкой мыши Показать исходный код страницы)

3. Найти синюю ссылку в открывшимся коде assets/css/style.css и кликнуть на нее

Если после клика по ссылке assets/css/style.css открывается страница 404, тогда нужно проверить действительно ли файл style.css:

a. Папка assets лежит на том же уровне, что и файл index.html

b. Папка css лежит в папке assets

c. Файл style.css лежит в папке css

d. Название физического файла style.css действительно style.css, а не stail.css, stule.css, stal.css и прочее

Если после этих шагов все равно браузер "не видит" стили, нужно пройти заново шаги с 1 по 4 и если файл style.css по ссылке открывается, тогда нужно файл index.html запустить в режиме инкогнито.

Иногда браузеры кешируют страницы, чтобы быстрее при повторном обращении открывались. Чтобы сбросить cache открытой страницы нужно нажать на ctrl и f5 или открыть инструменты разработчика в браузере, нажав на кнопку f12 и во вкладке network нужно поставить чекбокс на Disable cache и обновить страницу повторно.

Также вы можете скачать исходный код в видеоуроке (исходный код находится справа сверху вкладка под названием Файлы). После того как нажмете на ссылку, скачается zip архив. Файлы из zip архива нужно распаковать например на рабочий стол. После этого запустить файл index.html из распакованной папки. Исходный код всегда работает. Далее сравните скаченный исходный код с вашим.

Также вы можете посмотреть готовый пример в этом интерактивном задании:

https://fructcode.com/ru/courses/html-and-css/header-and-top-menu/

Сергей, благодарю.

Шаги 1-3 я так и делал. После клика на синюю ссылку мне давалась информация, что файл не найден. (Cannot GET assests/css/style.css )

Размещено все верно, названия так же верные. перепроверял.

Подцепил style.css через другой редактор breckets. Там подсказывался путь , после чего все заработало.

А в Subline Text почему не подсказывается такой путь?

Режим Инкогнито не использовал.