1

Почему название "Стройка" находится выше блока, для которого прописаны свойства? То есть фон блока красный, а название как будто в своем блоке выше и имеет белый цвет фона.

* {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

.header {
  background-color: red;
  height: 200px;
  font-size: 1.5em;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <title>EXAMPLE</title>
</head>

<body>
  <div class="header">
    <h1>Стройка</h1>
  </div>
  </div>
</body>

</html>

3 ответа 3

1

Всё нормально, всё на своих местах. Просто селектор * имеет больший приоритет, чем селектор по классу - он и перебивает своим цветом фона:

* {
  /*background-color: #ffffff;*/
  margin: 0;
  padding: 0;
}

.header {
  background-color: red;
  height: 200px;
  font-size: 1.5em;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <title>EXAMPLE</title>
</head>

<body>
  <div class="header">
    <h1>Стройка</h1>
  </div>
</body>

</html>

8
  • Всем большое Спасибо!!! Только начал что-то верстать, поэтому вопросы будут максимально простыми, возможно даже глупыми))
    – G_M
    5 янв 2021 в 14:06
  • @G_M: прежде, чем задавать вопрос, воспользуйтесь поиском. Также, в процессе написания заголовка к вопросу, Вам предлагаются подходящие вопросы - может стоит сначала посмотреть их.
    – UModeL
    5 янв 2021 в 14:09
  • Очень трудно найти ответ на конкретный вопросы, с учетом, что я тут впервые. Также люди даже один и тот же вопрос задают по разному, поэтому проще самому задать, чем тратить время на поиск. Но, возможно, вы сможете меня переубедить, если покажете как правильно искать необходимую информацию.
    – G_M
    5 янв 2021 в 14:24
  • @G_M: вот тут Вы не совсем правы. Искать было бы намного проще, если люди старались формулировать вопросы, добавляли бы малейшие детали и прикладывали код, а не картинки. Но, надеюсь, у Вас всё получится. Удачи!
    – UModeL
    5 янв 2021 в 14:27
  • Спасибо за дельные советы и адекватное общение, чего, к сожалению, сегодня не хватает. Буду стараться и развиваться.
    – G_M
    5 янв 2021 в 14:29
0

Потому что у тебя есть вот такой стиль:

* {
  background-color: #ffffff; //ВСЕМ БЛОКАМ БЕЛЫЙ ФОН, ЕСЛИ НЕ ЗАДАНО ИНОЕ
  margin: 0;
  padding: 0;
}

Убери это и будет счастье)

0

Вы указали для всех элементов белый фон:

* {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

Поэтому заголовок перекрывает верхнюю часть красной обёртки. В свою очередь оба блока занимают всю ширину экрана.
Уберите белый фон:

* {
  margin: 0;
  padding: 0;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.