← Комьюнити

Не отображаются стили css в браузере, как подключить их к html?

student_ViXPFNnn1 ответов
#html#css
* {margin:0; padding:0;}
div {margin: 50px auto;}

 . blok1 {
	width: 400px;
	height: 268px; background-image: url(../bee-on-daisy.jpg);
	background-color: ##FFC0CB 

 }

Здравствуйте! Начала учить html и css. Всё вроде писала как в инструкции, но почему-то не работает background-image. Не отображается в браузере, что бы я ни делала. Пока пробовала, оказалось, что вообще ни одно свойство из css не работает. Буду благодарна за помощь. Прилагаю код.

<!DOCTYPE html>
<html lang=ru>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style.css">
		<title>Шапка для сайта</title>
	</head>
	<body>
		<div class="blok1"></div>
	</body>
</html>

1 ответов

Попробуйте сделать как в уроке, например у вас написан путь к CSS файлу такой:

css/style.css

а в уроке путь к  CSS файлу такой:

assets/css/style.css

Также проверьте, что файл называется style.css (как выше указан), а не styles.css.

Проверить путь к файлу можно в инструментах разработчика браузера, как в уроке (на 16 минут 30 секунд):

/ru/courses/html-and-css-advanced/css-first/

У вас также есть в стилях в background такой путь к картинке:

background-image: url(../bee-on-daisy.jpg);

Его тоже нужно проверить через инструменты разработчика (ссылка на урок выше).

Также у вас здесь ошибки:

. blok1 {
	width: 400px;
	height: 268px; background-image: url(../bee-on-daisy.jpg);
	background-color: ##FFC0CB 
 }

1) . blok1 - точка должна перед blok1 быть без пробела, у вас .[ПРОБЕЛ]blok1

2) background-color: ##FFC0CB - не стоит точки с запятой (лучше поставить, хоть если свойство последнее стоит в стилях, будет работать и без точки запятой)

3) background-color: ##FFC0CB - лишняя #, должна быть одна #

И нужно соблюдать форматирование кода, а то потом запутаться можно, вот так нужно сделать:

* {
    margin: 0;
    padding: 0;
}

div {
    margin: 50px auto;
}

.blok1 {
    width: 400px;
    height: 268px;
    background-image: url(../bee-on-daisy.jpg);
    background-color: #ffc0cb;
}
student_CSyAOvpM

Ваш ответ

Войдите, чтобы ответить