Атрибуты: Параметры выравнивания текста.

  Атрибуты стилей выравнивания текста применяются для оформления вертикального и горизонтального выравнивания текстового пользовательского контента в поле элемента тега.
  Вертикальное выравнивание текста.
  Атрибуты:
  vertical-align - Устанавливает правила вертикального выравнивания пользовательского представления текстового контента элементов строчных тегов в поле "родительского" элемента.

Формат:

  • vertical-align:
      sub
      |super
      |top
      |text-top
      |middle
      |bottom
      |text-bottom
      |Размер
      |baseline
      |initial
      |inherit
      |unset

Значения:

  • sub - Выравнивание базовой линии текстового контента определяемого элемента тега по базовой линии нижнего индекса текстового контента элемента "родительского" тега.
      Базовая линия это воображаемая линия, на которой располагается текст.
      Индекс - математическое понятие.
  • super – Выравнивание базовой линии текстового контента определяемого элемента тега по базовой линии верхнего индекса текстового контента элемента "родительского" тега.
      Базовая линия это воображаемая линия, на которой располагается текст.
      Индекс - математическое понятие.
  • top – Выравнивание верхнего края текстового контента определяемого элемента тега по верхнему краю контента элемента "родительского" тега.
  • text-top - Выравнивание верхнего края текстового контента определяемого элемента тега по верхнему краю текстового контента элемента "родительского" тега.
  • middle - Выравнивание центра текстового контента определяемого элемента тега по центру текстового контента элемента "родительского" тега.
  • bottom – Выравнивание нижнего края текстового контента определяемого элемента тега по нижнему краю контента элемента "родительского" тега.
  • text-bottom – Выравнивание нижнего края текстового контента определяемого элемента тега по нижнему краю текстового контента элемента "родительского" тега.
  • Размер - Величина с единицей измерения.
      Указывает насколько выше или ниже (отрицательное значение) базовой линии тестового контента элемента "родительского" тега должна находиться базовая линия текстового контента определяемого элемента тега.
      Базовая линия это воображаемая линия, на которой располагается текст.
  • baseline - Приводит значение атрибута к нормальному состоянию, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Нормальное состояние это выравнивание базовых линий текстового контента определяемого элемента тега и текстового контента элемента "родительского" тега.
      Базовая линия это воображаемая линия, на которой располагается текст.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Горизонтальное выравнивание текста.
  Атрибуты:
  text-align - Устанавливает правила горизонтального выравнивания пользовательского представления текстового контента в поле определяемого элемента тега.

Формат:

  • text-align:
      center
      |justify
      |left
      |right
      |start
      |end
      |initial
      |inherit
      |unset

Значения:

  • center – Выравнивание по центру поля элемента.
  • justify – Полное выравнивание в поле элемента.
      Последняя строка прижимается к левому краю.
  • left - Выравнивание по левому краю поля элемента.
  • right - Выравнивание по правому краю поля элемента.
  • start – Выравнивание по краю начала чтения пользователем текста в поле элемента.
      Например для арабского или "зеркалированного" текста это будет правый край.
      Нормальное значение атрибута, таким оно наследуется от элемента тега HTML (inherit на самом верхнем возможном уровне).
  • end – Выравнивание по краю конца чтения пользователем.
      Например для арабского или "зеркалированного" текста это будет левый край.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Горизонтальное выравнивание последней строки текста.
  Атрибуты:
  text-align-last - Устанавливает правила горизонтального выравнивания последней строки пользовательского представления текстового контента в поле определяемого элемента тега.

Формат:

  • text-align-last:
      auto
      |center
      |justify
      |left
      |right
      |start
      |end
      |initial
      |inherit
      |unset

Значения:

  • auto – Выравнивание в соответствии со значением установленным атрибутом стиля text-align (умолчание).
  • center – Выравнивание по центру поля элемента.
  • justify – Полное выравнивание в поле элемента.
  • left - Выравнивание по левому краю поля элемента.
  • right - Выравнивание по правому краю поля элемента.
  • start – Выравнивание по краю начала чтения пользователем текста в поле элемента.
      Например для арабского или "зеркалированного" текста это будет правый край.
      Нормальное значение атрибута, таким оно наследуется от элемента тега HTML (inherit на самом верхнем возможном уровне).
  • end – Выравнивание по краю конца чтения пользователем.
      Например для арабского или "зеркалированного" текста это будет левый край.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Отступ красной строки.
  Атрибуты:
  text-indent - Устанавливает размер отступа для "красной строки" пользовательского представления текстового контента в поле определяемого элемента тега.

Формат:

  • text-indent:
      Размер
      |initial
      |inherit
      |unset

Значения:

  • Размер - Линейная величина с единицей измерения.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Разбивка текста на колонки.
  Текстовый контент в поле элемента, который в HTML-коде на колонки не разбит, может быть разбит браузером в соответствии со связанным с этим элементом стилем.
  Если в колонку, в соответствии со своим местоположением в HTML-коде, попадёт элемент "дочернего" тега, то, по умолчанию, ширина поля этого элемента ограничится шириной колонки, даже несмотря на заданную для него ширину. Поэтому контент и поле этого элемента будет отображён в соответствии со связанным стилем overflow.
  Количество строк текстового контента в колонке будет ограничено высотой поля элемента. Для принудительного перехода на следующую колонку можно использовать элемент "дочернего" тега связанный с атрибутами стиля break-after: column и(или) break-before: column, контент которого может быть заголовком или итогом столбца.
  Если же какой-либо текстовый контент не должен быть разнесен по разным колонкам, то его надо заключить в элемент "дочернего" тега связанный с атрибутом стиля break-inside: avoid-column.
  Атрибуты:
  column-count - Устанавливает количество колонок в пользовательском представлении текстового контента в поле определяемого элемента тега.
  Ширина каждой колонки устанавливается одинаковой и, в отсутствии атрибута column-width, автоматически подстраивается под ширину поля элемента.

Формат:

  • column-count:
      Количество
      |auto
      |initial
      |inherit
      |unset

Значения:

  • КоличествоЧисло (по умолчанию - 1).
  • auto – Количество колонок установится исходя из значения атрибута column-width и размеров поля определяемого элемента тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  column-fill - Устанавливает заполнение колонок в пользовательском представлении текстового контента в поле определяемого элемента тега.
Формат:

  • column-fill:
      |auto
      |balance
      |initial
      |inherit
      |unset

Значения:

  • auto – Каждая колонка заполнится полностью по высоте поля элемента. Последняя колонка может быть неполной.
  • balance – Каждая колонка заполнится исходя из равномерности заполнения всех колонок.
      Высота поля элемента может быть не полностью использована.
      Умолчание.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  column-width - Устанавливает ширину колонок в пользовательском представлении текстового контента в поле определяемого элемента тега.
  Если текстовый контент элемента достаточно объемный, то он разобьется на соответствующее количество колонок и без атрибута column-count, однако может возникнуть потребность в горизонтальном скроллинге поля элемента на Web-станице.

Формат:

  • column-width:
      Размер
      |all
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Размер - Линейная величина с единицей измерения.
  • all – Ширина колонки равна ширине поля определяемого элемента тега (одна колонка - умолчание).
  • auto – Ширина колонок установится исходя из значения атрибута column-count и размеров поля определяемого элемента тега.
      Умолчание если задан атрибут column-count.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  columns - Устанавливает ширину и количество колонок в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • columns:
      [Ширина]
      [Количество]

Значения:

  column-gap - Устанавливает ширину интервала между колонками в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • column-gap:
      Размер
      |normal
      |initial
      |inherit
      |unset

Значения:

  • РазмерЛинейная величина с единицей измерения (по умолчанию - 10px).
  • normal - Приводит значение атрибута в нормализованное состояние (1em).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  column-rule-color - Устанавливает окраску граничной линии между колонками в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • column-rule-color: Окраска

Значения:

  • Окраска – Значение окраски линии в одном из форматов:
  column-rule-style - Устанавливает начертание граничной линии между колонками в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • column-rule-style:Начертание

Значения:

  • Начертание – Одно из ключевых слов:
    •  none – Нет разделительной линии.
    •  hidden – Скрытая линия (в отличие от отсутствующей занимает место на Web-станице).
    •  dotted – Пунктирная линия.
    •  dashed – Штриховая линия.
    • solid – Сплошная линия (умолчание, если отсутствует значение начертания).
    •  double – Двойная линия.
    •  groove – "Вдавленная" трехмерная линия.
    • ridge – "Выпуклая" трехмерная линия.
    • inset – Трехмерная "выпуклость".
    • outset – Трехмерное "углубление".
  column-rule-width - Устанавливает ширину граничной линии между колонками в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • column-rule-width:
      auto
      |Ширина

Значения:

  • auto – Ширина граничной линии установится исходя из значения атрибута column-count и размеров поля определяемого элемента тега.
      Умолчание если задан атрибут column-count.
  • Ширина – Значение ширины линии в однм из форматов:
  Нормализованная толщина линии это размер, понятный браузеру в соответствии со стандартом HTML. Точный размер нормализованных значений зависит от настроек браузера и от значений остальных атрибутов стилей линии. Нормализованные значения предпочтительны, поскольку дают возможность пользователю самому настраивать вид Web-страницы.
  column-rule - Устанавливает общий стиль граничной линии между колонками в пользовательском представлении текстового контента в поле определяемого элемента тега.

Формат:

  • column-rule:
      [Ширина]
      [Начертание]
      [Окраска]

Значения:

  column-span - Устанавливает возможность выхода за пределы колонки поля элемента "дочернего" тега в поле элемента, текстовый контент которого разбит на колонки.
  Если в колонку, в соответствии со своим местоположением в HTML-коде, попадёт элемент "дочернего" тега, то, по умолчанию, ширина поля этого элемента ограничится шириной колонки даже несмотря на заданную ширину. Поэтому контент и поле этого элемента поведут себя в соответствии со связанным стилем overflow.
  Атрибут стиля column-span связанный с элементом "дочернего" тега позволяет изменить такую ситуацию.

Формат:

  • column-span:
      all
      |none
      |initial
      |inherit
      |unset

Значения:

  • all – Поле элемента "дочернего" тега выйдет за пределы своей колонки и разместится во всём поле своего "родителя".
  • none - Поле элемента "дочернего" тега не выйдет за пределы своей колонки (умолчание).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.


Примеры:
Пример атрибута vertical-align - наведите мышку.

- Родительский DIV - - Дочерний I - - - vertical-align: sub


-Родительский DIV - - Дочерний I - - - vertical-align: super


- Родительский DIV - - Дочерний I - - - vertical-align: top


- Родительский DIV - - Дочерний I - - - vertical-align: text-top


- Родительский DIV - - Дочерний I - - - vertical-align: bottom


- Родительский DIV - - Дочерний I - - - vertical-align: text-bottom


- Родительский DIV - - Дочерний I - - - vertical-align: middle
Пример атрибута column-count - наведите мышку.
Жил старик со своею старухой
У самого синего моря;
Они жили в ветхой землянке
Ровно тридцать лет и три года.
Старик ловил неводом рыбу,
Старуха пряла свою пряжу.
Раз он в море закинул невод,
Пришел невод с одною тиной.
Он в другой раз закинул невод,
Пришел невод с травой морскою.
В третий раз закинул он невод,
Пришел невод с одною рыбкой,
С непростою рыбкой, - золотою.
Как взмолится золотая рыбка!
Голосом молвит человечьим:
"Отпусти ты, старче, меня в море!
Дорогой за себя дам откуп:
Откуплюсь чем только пожелаешь"
Удивился старик, испугался:
Он рыбачил тридцать лет и три года.
И не слыхивал, чтоб рыба говорила.
Отпустил он рыбку золотую
И сказал ей ласковое слово:
"Бог с тобою, золотая рыбка!
Твоего мне откупа не надо;
Ступай себе в синее море,
Гуляй там себе на просторе."
Воротился старик ко старухе,
Рассказал ей великое чудо.
"Я сегодня поймал было рыбку,
Золотую рыбку, непростую;
По нашему говорила рыбка,
Домой в море синее просилась,
Откупалась чем только пожелаю.
Не посмел я взять с нее выкуп;
Так пустил ее в синее море."
Старика старуха забранила:
"Дурачина ты, простофиля!
Не умел ты взять выкупа с рыбки!
Хоть бы взял ты с нее корыто,
Наше-то совсем раскололось".
Вот пошел он к синему морю;
Видит, - море слегка разыгралось.
Стал он кликать золотую рыбку,
Приплыла к нему рыбка спросила:
"Чего тебе надобно, старче?"
Ей с поклоном старик отвечает:
"Смилуйся, государыня рыбка,
Разбранила меня моя старуха,
Не дает старику мне покою:
Надобно ей новое корыто;
Наше-то совсем раскололось."
Отвечает золотая рыбка:
"Не печалься, ступай себе с богом
Будет вам новое корыто."
Воротился старик ко старухе,
У старухи новое корыто.
Еще пуще старуха бранится,
"Дурачина ты, простофиля!
Выпросил, дурачина, корыто!
В корыте много ль корысти?
Воротись, дурачина, ты к рыбке;
Поклонись ей, выпроси уж избу."
Вот пошел он к синему морю,
(Помутилося синее море).
Стал он кликать золотую рыбку,
Приплыла к нему рыбка, спросила:
"Чего тебе надобно, старче?"
Ей старик с поклоном отвечает:
"Смилуйся, государыня рыбка!
Еще пуще старуха бранится,
Не дает старику мне покою:
Избу просит сварливая баба."
Отвечает золотая рыбка:
"Не печалься, ступай себе с богом,
Так и быть: изба вам уж будет."
Пошел он ко своей землянке,
А землянки нет уж и следа;
Перед ним изба со светелкой,
С кирпичною, беленою трубою,
С дубовыми, тесовыми воротами.
Старуха сидит под окошком,
На чем свет стоит - мужа ругает...


А.С. Пушкин
"Сказка о рыбаке и рыбке"