Типичные ситуации в вёрстке

Перейдите к следующему слайду, нажав кнопку Вправо

Разбор ситуаций, которые могут возникнуть при вёрстке и их решения

Подготовлено онлайн-курсом

https://dvmn.org

Переместить несколько тегов

Иногда хочется двигать теги вместе, группой. Например, отодвинуть на 100 пикселей вправо картинку и заголовок. Вот так —>

 

Простой способ
Всем тегам назначить отступ, но это не круто и вообще копипаста.

 

Способ получше — тег <div>
Можно объединить теги и двигать их все вместе, а не по-отдельности.

<img style="margin-left:100px;" src="...">
<h1 style="margin-left:100px;">
  Заголовок
</h1>
<div style="margin-left:100px;">
  <img src="...">
  <h1>
    Заголовок
  </h1>
</div>

Добавить фон блоку текста

Иногда хочется объединить несколько тегов общим фоном

 

Снова спасёт <div>

<div style="background-color:red;" >
  <p>Первый абзац моего текста</p>
  <p>Второй абзац моего текста</p>
  <p>Третий абзац моего текста</p>
</div>

Без <div> получится треш, потому что между самими тегами <p> тоже есть отступы, которые не будут заполненые фоном.

<p style="background-color:red;">Первый</p>
<p style="background-color:red;">Второй</p>

Выделить часть текста

Если хочется выделить только часть текста, поможет тег <span>.

<p>
  В мире есть много разных цветов,
  но мой любимый — <span style="color:red;">красный</span>
</p>

Сделать аватарку круглой

Если хочется сделать картинку круглой — поможет стиль border-radius

<img src="..."
     style="border-radius:50%;width:30px;height:30px"
>

Да, картинка для примера была не очень удачной :)

Избавиться от копипасты стилей

Кнопки будут выглядеть так же, но стили для <button> переехали в тег <style> и больше не повторяются

<html>
<head>
  <style type="text/css">
    button {color:red;}
  </style>
</head>
<body>
  <button>Первая кнопка</button>
  <button>Вторая кнопка</button>
</body>
</html>
<html>
<head>
</head>
<body>
  <button style="color:red;">
    Первая кнопка
  </button>
  <button style="color:red;">
    Вторая кнопка
  </button>
</body>
</html>

За подробностями жми кнопку вниз.

Верстаем две красные кнопки

Для каждой кнопки приходится повторять style="color: red;"

Избавиться от копипасты стилей

CSS селектор "button"
Подробнее.

<style type="text/css">
  
  button {
    color:red;
    border: none;
    font-size: 150%;
  }
  
</style>

Перечисление стилей внутри фигурных скобок

За подробностями жми кнопку вниз.

<style type="text/css">
  button {
    color: red;
    background-color: black;
  }
  
  button.play {
    font-size: 20px;
  }
</style>

Селектор для всех кнопок, у которых проставлен класс play. Так можно проставить стиль не всем кнопкам, а только некоторым.

<button class="play">
  Play
</button>
<button>
  Stop
</button>

Применятся все стили из <style>

Только стили для button

Если стилей много

За подробностями жми кнопку вниз.

Если стилей много

Селектор  button переопределяет все кнопки на странице, что, конечно, не хорошо: разве все кнопки должны быть красными? Того, чтобы ограничить стили и навесить их только на нужные кнопки, на кнопки навешивают классы, и привязывают селекторы к этим классам.

<html>
<head>
  <style type="text/css">
    .button-red {
      color:red;
      border: none;
      font-size: 150%;
    }
  </style>
</head>
<body>
  <button class="button-red">
    Первая кнопка
  </button>
  <button class="button-red">
    Вторая кнопка
  </button>
</body>
</html>

Создано для онлайн-курса https://dvmn.org