В этом коротком заключительном видео я хочу рассказать вам о двух псевдоэлементах
для работы с текстом.
И первым из них будет псевдоэлемент ::first-line.
Он позволяет оформить первую строку, используя некоторые свойства,
а именно свойства, связанные с font, то есть шрифтом,
word/letter-spacing, а также всё, что связано с текстом.
Также те, которые мы освещали вскользь: это свойства color,
background и vertical-align.
Возьмём такой CSS-код.
Укажем для параграфа псевдоэлемент первой строки, которому установим новый размер
шрифта и новый шрифт, а также расстояние между буквами, равное шести пикселям.
Вёрстка выглядит примерно так.
Ничего сложного — параграф с текстом.
Получаем результат.
Как вы видите, первая строка полностью соответствует стилям,
которые мы написали для неё.
Следующий псевдоэлемент — это псевдоэлемент первой буквы, и,
как ни странно, он позволяет оформить эту самую первую букву в
строке или установить так называемую буквицу.
Список того, что можно сделать, в отличие от псевдоэлемента первой строки,
пополнился ещё тремя свойствами, а именно: margin, padding и border.
О данных свойствах вы узнаете в дальнейшем.
Сейчас я лишь приведу пример, как их можно использовать.
Возьмём такой CCS-код.
Параграфу укажем псевдоэлемент ::first-letter,
для которого установим размер шрифта 50 пикселей и курсивный Times New Roman.
Также установим отступы margin: 5px и зелёный цвет.
Вёрстка из себя ничего сложного не представляет — два параграфа с текстом,
поэтому сразу перейдём к примеру.
Как видим, первые буквы в каждом параграфе стали зелёными,
ну и в принципе соответствуют полностью стилям, которые мы описали.
А теперь для тех, кто досмотрел эту неделю до конца, маленький срыв покровов.
Как вы все знаете,
в компании «Яндекс» частенько используется первая красная буква.
Вы уже догадались, что для этого можно использовать псевдоэлемент первой буквы.
И всё, что нужно сделать, это добавить класс,
добавить данный псевдоэлемент и указать красный цвет.
Спасибо за внимание!
На этой неделе мы с вами узнали многое о шрифтах,
многое о текстах, о нюансах работы и с тем, и с другим.
Всем удачи!