itmo_conspects

Помимо display: block и display: inline для выравнивания можно использовать display: flex. Значение flex превращает блоки во флекс-контейнеры, внутри которых можно менять направление потока элементов

Внутри флекс-контейнера существует главная ось, вдоль которой следует поток, и которая задается с помощью свойства flex-direction:

flex-direction: row задает главную ось слева направо, что используется по умолчанию
flex-direction: row-reverse задает главную ось справа налево
flex-direction: column задает главную ось сверху вниз
flex-direction: column-reverse задает главную ось снизу вверх

С помощью свойства justify-content можно выравнять элементы относительно главной оси:

justify-content: flex-start располагает все элементы в начале оси
justify-content: flex-end располагает все элементы в конце оси
justify-content: center располагает все элементы в центре оси
justify-content: space-between располагает все элементы равномерно, оставляя между ними равные промежутки
justify-content: space-around располагает все элементы равномерно, оставляя между ними равные промежутки, но до первого и после последнего выделяется половина пространства от того, что уходит между элементами
justify-content: space-evenly располагает равные промежутки между элементами, до первого элемента и после последнего

Поперечная ось расположена перпендикулярно и направлена вниз или направо в зависимости от направления главной. Вдоль поперечной оси работает выравнивание элементов с помощью свойства align-items:

align-items: flex-start располагает все элементы в начале оси
align-items: flex-end располагает все элементы в конце оси
align-items: center располагает все элементы в центре оси
align-items: stretch растягивает все элементы так, что бы вдоль поперечной оси не было пустого пространства
align-items: baseline располагает все элементы так, что базовая линия текста элементов одинакова

Если нужно другое выравнивание по поперечной оси для отдельного элемента, для него применяют свойство align-self с теми же значениями, что и align-items

Лекция 4. Типы верстки

Верстка сайта - этап разработки, когда макет дизайна, на котором указаны расположения элементов на странице, становится функциональным, то есть превращается в HTML-структуру

Верстка включает также в себя подготовку изображений и прочей графики, подключение шрифтов, подключение JavaScript-библиотек, создание динамического поведения элементов и тестирования страницы на различных устройствах

Рассмотрим виды верстки:

Фреймовая верстка

Фрейм - специальный блок, который позволял рендерить в нем отдельный HTML-документ. С помощью них до версии HTML 5 создавались независимые секции из повторно используемых компонентов
```
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
  <html>
  <head><title>Website with Frames</title></head>

  <body>
  <frameset cols="25%,75%">
      <frame src="navigation.html" name="nav">
      <frame src="content.html" name="main">
  </frameset>
  <body>

  </html>
```
Проблем с ними было много:
- Поисковые оптимизации плохо работали, так как весь контент скрыт за тегом <frame src="content.html" name="main">
- Проблема с печатью страницы
- Читатели экранов для слабо видящих с трудностями обрабатывали такие страницы
- Такие страницы были не дружелюбны к мобильным телефонам
Табличная верстка

Табличная верстка заключалась в том, что бы использовать невидимые таблицы для размещения контента. Такая таблица фактически представляла собой модульную сетку, в которой размещались отдельные элементы веб-страницы

Достоинства:
- Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали
- Браузеры по-разному интерпретируют некоторые параметры CSS, а таблицы везде выглядели одинаково
Недостатки:
- Громоздкий код из вложенных структур
- Нет разделения содержимого и оформления. В идеале HTML-код должен содержать только теги с классами, которые используются для оформления. Табличная верстка из-за обилия тегов такое не позволяет
- Спецификация утверждает, что таблицы созданы в первую очередь для размещения табличных данных
Блочная верстка

В блочной верстки страница делится на блоки, которые содержат в себе контент. Они вкладываются друг в друга, таким образом уменьшается нагромождение кода, структура понятна, а править верстку легко

Сейчас преимущественно применяется блочная верстка

10 видов верстки, вы будете ржать...

Далее верстка делится по степени адаптивности:

Статическая или фиксированная верстка (Static)

Ширина элементов задается жестко в пикселях, из-за чего сайт выглядит одинаково на любом мониторе. Если контент не влезает по горизонтали, то появляется полоса прокрутки
Резиновая (Liquid или Fluid)

Размеры элементов указываются в процентах от ширины родительского контейнера, поэтому контент растягивается или сжимается вместе с окном браузера, заполняя всё доступное пространство. Однако, если окно браузера слишком маленькое, контент ужимается в узкие полосы
Гибкая или адаптивная (Adaptive)

В адаптивной верстке используются медиа-запросы (через @media), что позволяет для разных устройств (смартфон, планшет, компьютера) создавать отдельные фиксированные макеты. При достижении определенной ширины дизайн переключается “скачком”
Отзывчивая (Responsive)

Отзывчивая верстка - это комбинация резиновой и адаптивной верстки. В ней сайт плавно меняет размеры элементов, а в ключевых точках меняет структуру макета, например, выстраивая блоки из нескольких колонок в одну

Верстка считается правильной, если соответствует нескольким критериям:

Кроссбраузерность - способность отображаться во всех популярных браузерах: Google Chrome, Mozilla Firefox, Opera, Safari и так далее
Адаптивность - способность отображаться на всех устройствах
Качество кода - специальные HTML-валидаторы могут провести проверку на наличие синтаксических ошибок, соответствие стандарту и на посторонние элементы

Хорошими практиками являются:

Гибкие изображения, меняющиеся под разрешение окна
Настраиваемая структура макета страницы
Принцип “Mobile First” - сначала сайт верстается для мобильных устройств, а потом с помощью медиа-запросов макет масштабируется для больших экранов

CSS-фреймворки могут помочь достичь хорошой верстки. Они содержат готовый набор стилей, компонентов и утилит. Разберем популярные:

Bootstrap - классический CSS-фреймворк с готовыми компонентами. В нем есть сетка на флекс-блоках, готовые компоненты и JavaScript-плагины

Лучше всего использовать для админ-панели, минимально жизнеспособного продукта или учебных проектов
Tailwind CSS. В нем почти нет готовых компонентов, и всё собирается из классов, поэтому тут полный контроль над дизайном, минимальный итоговый CSS, но HTML перегружен классами

Лучше использовать для одностраничных приложений, современных фронтенд-проектов и для кастомного дизайна
Framework7 - фреймворк для мобильных и прогрессивных веб-приложений. Создает стили iOS- или Android-приложений, имеет мобильные компоненты, работает с Vue, React, Svelte
Material Design - дизайн-система от Google, имеющая строгие правила дизайна, тени, уровни, анимации и консистентный опыт пользователя

Лучше использовать для Android-ориентированных продуктов и больших приложений

Единицы в CSS

В CSS для указания длины есть разные единицы

Самая базовая из них - это пиксели px. Пиксели - абсолютная величина, браузер переводит все остальные единицы в пиксели, поэтому пиксели являются понятной величиной, однако с помощью пикселей трудно создать адаптивную веб-страницу

Другая величина em обозначает высоту текущего шрифта и определяются по текущему контексту. Например, в таком примере:

<div style="font-size:2em">
  Арбуз
  <div style="font-size:2em">Абрикос</div>
</div>

второе слово будет иметь шрифт высотой в два раза больше, чем первое

Проценты % - еще одна относительная единица. 1% - это одна сотая от ширины/высоты родительского элемента. Для свойства line-height, определяющего высоту пространства, занимаемого текстом, 1% - это одна сотая от размера шрифта. Однако, если position: fixed, то 1% - это одна сотая от ширины/высоты окна браузера

Другая величина rem (от root-em) задается как размер шрифта элемента html и не определяется другими родительскими тегами, поэтому ее пользоваться удобнее, чем другими

Наконец, есть величины vw и vh, которые зависят от ширины и высоты окна браузера соответственно. 1vw - это одна сотая от ширина окна и аналогично для vh. Таким образом, стало проще создавать верстку для мобильных устройств

This site is open source. Improve this page.