Веб дизайн реализуется триединством языков сущностей:
- сущность содержания и структуры
- сущность формы
- сущность (интер)активности
CSS справочник //puzzleweb.ru
Блоки
?
Запрет переноса
Неразрывный пробел запрещает перенос следующего слова или блока, но его действие может быть отменено некоторыми тегами и свойствами (см. ниже).
Парный тег <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)
1 |
color = window.getComputedStyle( document.getElementById( "my-id" )).color; |
Изменение значения свойства стиля по селектору (не всегда срабатывает):
1 2 |
const myClass = document.querySelector('.my-class'); myClass.style.color = 'red'; |
Изменение значения свойства добавлением правила CSSOM
1 2 |
const stylesheet = document.styleSheets[0]; stylesheet.insertRule( ".my-class { color: red; }" ); |
How to Change CSS Styles with JavaScript – From Basic to Advanced Methods //blog.shimin.io
Джерела