ФАК Хау Ту Дизайн Веб Пейдж HTML/CSS/JS

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

  • - сущность содержания и структуры
  • - сущность формы
  • - сущность (интер)активности

 

Блоки

?

Запрет переноса

Неразрывный пробел   запрещает перенос следующего слова или блока, но его действие может быть отменено некоторыми тегами и свойствами (см. ниже).
Парный тег <nobr></nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Тег не входит в спецификацию HTML, но поддерживается всеми браузерами.
Свойство white-space:nowrap устанавливает отображение, при котором пробелы между словами не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, добавление тега <br> переносит текст на новую строку.
.style.whiteSpace='nowrap';

Верстка Flexbox

// Переклад "A Complete Guide to Flexbox" //medium.com

  • display:
    • flex
    • inline-flex
  • flex-direction устанавливает направление главной оси и определяет направление flex-элементов размещенных в flex-контейнере:
    • row (стандартное положение) — слева направо
    • row-reverse — элементы располагаются справа налево
    • column аналогично row, только сверху вниз
    • column-reverse аналогично row-reverse, но снизу вверх
  • flex-wrap управляет размещением flex-элементов в ограниченном пространстве
    • nowrap поумолчанию все flex элементы будут выстраиваться в одну линию
    • wrap элементы будут переноситься в следующие строки ниже или правей
    • wrap-reverse элементы будут переноситься в предыдущие строки выше или левей
  • flex-flow (применяется для родительского flex контейнера) Это сокращение flex-direction и flex-wrap свойств, которые вместе определяют направление главной и поперечной оси. По-дефолту оно имеет значение row nowrap
    • flex-direction
    • flex-wrap
  • justify-content определяет выравнивание вдоль главной оси. Оно помогает распределить лишнее свободное пространство, когда, либо все flex элементы в линии имеют фиксированный размер, либо же нет, но уже достигли своего максимального размера. Оно также влияет на выравнивание элементов, когда те переполнят строку
    • flex-start — дефолтное состояние, при котором элементы расставляются от начала строки
    • flex-end — состояние, в котором элементы размещены с конца строки
    • center — элементы центрированы вдоль строки
    • space-between — элементы равномерно распределены по строке, первый элемент находится вначале строки, последний в конце
    • space-around — элементы равномерно распределены по строке с равным местом вокруг них. Учтите, что визуально пробелы не равномерны, так как все элементы имеют одинаковые пробелы с двух сторон. Первый элемент получит одну единицу свободного места от границы контейнера, но получит две единицы свободного места от следующего элемента, так как у него тоже есть одна единица свободного места с каждой из сторон
    • space-evenly — элементы распределены таким образом, что свободное пространство между любыми двумя элементами равномерно, как и место до границы края контейнера
  • align-items свойство определяет стандартное поведение того, как flex элементы будут располагаться вдоль поперечной оси на заданной строке. Это своебразная версия justify-content, но только для поперечной оси, которая перпендикулярна главной
    • flex-start — всё размещается с начала поперечной оси
    • flex-end — все элементы размещаются с конца поперечной оси
    • center — элементы центрируются по поперечной оси
    • baseline — элементы выравниваются по базовой линии
    • stretch — это дефолтное состояние, при котором элементы заполяют контейнер, с учетом min-width и max-width
  • align-content свойство выравнивает и распределяет строки контейнера, когда есть свободное пространство в поперечной оси, подобно тому как justify-content, оно выравнивает элементы по главной оси. Свойство не имеет эффекта, если строка flex элементов только одна
    • flex-start — строки расположены от начала контейнера
    • flex-end — строки расположены от конца контейнера
    • center — строки расположены от центра контейнера
    • space-between — строки равномерно распределены, первая строка находится вначале контейнера, тогда как последняя находится в конце
    • space-around — строки равномерно распределены с равным местом вокруг каждой строки
    • stretch — стандартное состояние, при котором строки растягиваются на вся оставшееся место
  • order положительное или отрицательное значение свойства у flex-элемента изменяет его положение в группе, которое по умолчанию соответствует порядку определения 1, 2, 3
  • flex-grow положительное значение свойства определяет расширение flex-элемента в доступном свободном пространстве и долю свободного пространства при распределение между другими flex-элементами
  • flex-shrink  положительное значение свойства определяет возможность flex-элемента сжиматься
  • flex-basis свойство определяет стандартный размер элемента, перед тем как оставшееся место будет распределено
  • align-self свойство flex-элемента подавляет выравнивание flex-контейнера align-items другим значением:
    • auto, flex-start, flex-end, center, baseline, stretch

Верстка Grid

Адаптивный дополненный перевод "CSS Grid Tutorial" //medium.com

CSS Grid модель позволяет создавать шаблоны в системе сетки, образованной пересекающимися горизонтальными и вертикальными линиями, задающими размерность и систему координат для контента в grid-контейнере.

  • display: grid делает элемент grid-контейнером, и все прямые потомки автоматически становятся  grid-элементами
    • inline-grid
    • subgrid
  • grid-template-rows: 1fr 1fr 1fr;
  • grid-template-columns: 1fr 1fr 1fr;
  • grid-gap: 2vw;

...

Изменение стиля

Стиль заданный в CSS доступен в JS

Получение вычисленного значения свойства стиля примененного к элементу методом
window.getComputedStyle(element, pseudoElement)

Изменение значения свойства стиля по селектору (не всегда срабатывает):

Изменение значения свойства добавлением правила CSSOM

How to Change CSS Styles with JavaScript – From Basic to Advanced Methods //blog.shimin.io

 

Джерела



Leave a Reply