Знакомство с HTML и CSS. Часть 5: Оформление текста — Тренажёр HTML Academy

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

Я напишу немного не в том порядке, в котором подавалось в тренажёре, там более в плавной подаче, но, честно говоря, в формате статьи роли не играет.

Группа свойств font

С них начинается тренажёр и мы с них начнем. И справедливости ради, это действительно одни из самых базовых и востребованных свойств для текста.

В тренажёре упомянуты, вроде как, не все:

font-size - отвечает за размер шрифта, принимает значение чаще всего в пикселях, также в относительных единицах em и rem, возможно и в других, но в тренажёре не упомянуто;
font-family - в этом свойстве указывается список гарнитур, причем порядок списка важен, т.к. браузер считает первый указанный приоритетным и переходит к следующему только если не смог его загрузить;
font-weight - отвечает за толщину или насыщенность шрифта, от 100 до 900 при условии, что у гарнитуры в наборе есть эти параметры насыщенности, чаще всего используется 400 normal (или regular) и 700 bold;
font-style - отвечает за т.н. начертание текста - обычное normal, курсивное italic и наклонное oblique;
line-height - отвечает за высоту строки или межстрочный интервал, по умолчанию с значением normal примерно равен 1.2em от font-size;

Последнее свойство, хоть и без корня font, но находится в одной группе со всеми, так как все они могут быть указаны в комбинированном свойстве font:

.super-font-text {
  font: bold italic 12px/14px "Fira Sans", serif;
}

В эту групп входит еще пачка свойств, но про них пока не упоминается и, на самом деле, там крайне специфичные свойства, применение которых очень частное.

Группы свойств text и align

Начнем с align’ов. Их всего два, по крайней мере упомянутых в тренажёре — это text-align, который отвечает за выравнивание по горизонтали, и vertical-align, отвечающий, соответственно за выравнивание по вертикали.

Оба свойства используют в значениях ключевые слова — лево left, право right, верх top, низ bottom или еще начало start и конец end, ну и т. д.

Отдельным уроком выведен нюанс — эти свойства могут выравнивать не только текст, но еще «инлайновые» или «строчные» элементы, например <img>, если только ему не задан display: block.

Это на самом деле ловушка для новичка и дилетанта — я долгое время недоумевал почему иногда text-align «работает», а иногда нет. Оказалось, он всегда работает, просто иногда глупый верстальщик пытается им выровнять по центру блочный элемент.

Остальные упомянутые в тренажёре свойства с корнем «text-»:

text-decoration — отвечает за подчеркивание, зачеркивание и даже надчеркивание текста, а также убирает none их, например, у ссылок;
text-transform — отвечает за регистр символов, может сделать все КАПСОМ uppercase, если хотите на кого-то покричать, или наоборот строчными lowercase, на первый взгляд может показаться, что малоприменимое свойство, но нет — даже я очень часто им пользовался, хотя верстал ручками крайне редко.

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

Свойство white-space

Управляет пробелами и переносами строк. По умолчанию браузер игнорирует все лишние пробелы и переносы везде в коде, кроме элементов <pre> ... </pre>, а перенос строки делается автоматически в конце блока.

С помощью значения pre можно сымитировать действие тега <pre> — пробелы и переносы сохранятся в точности как в коде. Если задать значение pre-wrap появятся переносы строк в случае, если контент не помещается в контейнер.

Ну, а значение nowrap наоборот убирает все лишние пробелы и вообще убирает перенос строк, то есть в итоге будет одна длинная строка.

Я, честно говоря, пока очень туманно представляю, где это свойство использовать. Для меня и <pre> было чем-то странным, но окей, скорее всего будет какой-то очень частный случай, где оно пригодится.

Свойство color

Об этом свойстве было в середине, но я его вывел напоследок. Свойство отвечает за цвет текста, причем значение цвета можно задавать несколькими разными способами:

Ключевое слово red - частенько используется, удобно, когда цвет простой, но частенько нужен серобурокозявчитый;
RGB или RGBA (255, 255, 255, 0.7) - стандартный цветовой диапазон для... всего, кроме печати;
HEX #000000 - пожалуй, самый распространённый вариант в вебе, шестнадцатеричная интерпретация RGB(A).

Про эти способы упомянуто в тренажёре, но обучаясь в приложении, про которые недавно писал, я узнал, что можно еще в HSL и в Lab, но для этого нужен какой-то определенный повод, который мне в голову даже не приходит.

Практика и Испытание

Давайте на чистоту — сам блок достаточно пресный, просто перечисление пачки свойств для текста. Практика и Испытание аналогичные, но с небольшим усложнением — за нас тут уже не пишут классы.

В Испытании нужно определённым элементам <span> задать несколько различных свойств. Нужно поковыряться в HTML вкладке, найти нужные span’ы и и с их классами творить чудеса стилизации. Не сложно, но можно запутаться.

В первом практическом задании разбираем разные гарнитуры с помощью свойства font-family. Тут, кстати, объясняют разницу между serif и sans-serif.

Во втором задании очень натянуто, но господа смогли придумать куда применить white-space и, честно говоря, выглядит нелепо. Не в том плане, что разработчики урока дурачки, а в том, что все более мертворождённым кажется это свойство.

Третье задание прикольное, как написано, «на смекалку!» — сделать рамку вокруг ссылки с помощью свойства text-decoration и border, причем используя именно оба свойства, а не только border.

Последнее задание также по большей части на свойства text-decoration, плюс еще font-wight и font-style — нужно «исправить» испорченный текст.

Между четвёртой и пятой, как говорится, и ехать надо. Да, это я сейчас придумал. Не говорится. Посмотрите «Внутри Лапенко».

Суть в том, что формат длинных статей про каждую часть тренажера, видимо не заходит мне. Пятую часть блока «Знакомство с HTML и CSS» я с горем пополам написал, но следующие блоки как-то надо трансформировать.

Кто-то дочитал до конца? Огромное спасибо за внимание! Это была вымученная статья, но я со своим синдромом незаконченных гештальтов не мог бросить этот блок почти в самом конце. Поэтому трижды спасибо!

Остальные статьи можно посмотреть у меня на главной странице блога.

Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#обучение #html #css #фронтенд #веб_разработка