CSS. Урок 6 (выравнивание, издевательства над текстом, видимость, расстояние между словами, переносы)



Выравнивание

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

.ClassName  {

                       text-align: center | justify | left | right | start | end;

}

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

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

.ClassName  {

                       vertical-align: middle;

}

К сожалению, не все так идеально работает. Иногда указываешь значение, а оно не работает. Это не баг, а слабодокументированная особенность. Браузер должен знать, что за вид отображения у блочного элемента и его высоту. Если сразу вертикальное выравнивание не работает, приходится добавлять домолнительные свойства родительскому элементу. Вернемся к этому позже.

Издевательства над текстом

Иногда надо, чтобы текст стал зачеркнутым, имел линию сверху или снизу. Используем:

.ClassName  {

                       text-decoration: line-through;

}

Цвет линии можно задавать с помощью свойства:

.ClassName  {

                       text-decoration-color: #ff0000;

}

Тип линии задаем через свойство:

.ClassName  {

                       text-decoration-style: dashed;

}

Линий может быть несколько, указываем их расположение через запятую:

.ClassName  {

                       text-decoration-line: line-through, overline, underline;

}

Тень для текста следует использовать с осторожностью. На мелких размерах букв получается нечитабельная мазня. Тень можно использовать для крупных заголовков, но реальное использование данной опции в дизайне случается крайне редко. Теней может быть несколько, их параметры указываем через запятую. У каждой тени есть параметры: сдвиг по x, сдвиг по y, радиус размытия, цвет.

.ClassName  {

                       text-decoration-line: 1px 1px 2px #ff0000, 0 0 1px #dddeb0;

}

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

.ClassName  {

                      text-transform: uppercase;

}

Иногда нам может понадобиться наклонить текст, повернуть вокруг оси, отмасштабировать. Эффекты можно задавать по несколько сразу, через запятую:

.ClassName  {

                      transform: rotate 45, scaleY (35);

}

Видимость элементов

Иногда приходится делать элементы, которые появляются только после того, как пользователь произвел те или иные действия. С помощью JavaScript можно очень сильно влиять на страницу, добавляя или удаляя элементы. Дизайн и отображение страницы может при этом "поплыть" при некоторых сочетаниях браузеров и размеров окна. Заранее все не предусмотришь. Гораздо удобнее и правильнее, когда элемент заранее заложен в DOM-структуру документа изначально, но скрыт для отображения. В нужный момент меняем ему значение видимости:

.ClassName  {

                      visibility: hidden;

}

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

.ClassName  {

                      word-spacing: 20px;

}

Некоторые куски текста нельзя переносить по словам. Это относится к заголовкам, названию компании из нескольких слов. Для этого желательно текст обрамить строковым элементом <span> и в свойствах его класса жестко установить запрет на перенос:

.ClassName  {

                      word-wrap: normal;

}