Приветствую вас на своем блоге. Иногда при оформлении текста появляется необходимость по-особенному оформить именно первую строчку текста. Так как в делается в css красная строка? Об этом я и хотел бы сегодня рассказать вам.
Свойство text-indent – отступ для первой строки текста
В css есть свойство, которое используется очень редко, поэтому о нем знают не все. Называется оно text-indent, а его смысл в том, чтобы задать отступ слева самой первой строчке текста в том элементе, для которой он указан. Я сразу же привожу пример:
<div class = “post”> <h1>Заголовок поста</h1> <article>Сама статья</article> </div>
Так вот, чтобы у нас получилась красная строка, пишем в css вот так:
Article{
Text-indent: 50px;
}
Вот и все, а вот вам картинка, которая показывает, как все это будет выглядеть. Тут четко видно работу свойства text-indent.
Как применить другие свойства к первой строке
Но text-indent помогает всего лишь задать нужный отступ текстовому содержимому, но сама строка не выделяется по-другому, а иногда это может быть необходимо. Итак, что же нам делать, чтобы оформить первую строчку не так, как остальные?
Решение очень простое – псевдокласс first-line. Он был создан в css специально для того, чтобы можно было обращаться к первой линии текстового содержимого нужного нам элемента. Например, если взять ту же самую разметку, что мы описали выше, то вот так мы можем обратиться к первой строке:
Article:first-line{
Color: red;
}
Псевдоклассы в css-селекторах пишутся так: ставится двоеточие, а потом вы должны написать имя нужного вам псевдокласса. А вообще об этом можете почитать вот эту статью.
Так мы добавили первой строке красный цвет шрифта, так что теперь она очень сильно выделяется в тексте. Как вы понимаете, теперь к ней вы можете добавить любые другие свойства, какие посчитаете нужными. Например, жирное начертание или даже другой шрифт, отличный от основного.
Как видим, css предоставляет нам достаточно возможностей, чтобы оформить первую строку в тексте по-особенному. Интересно, что в нем даже есть псевдокласс, которым можно выбрать первую букву в элементе. О нем я написал здесь.
Итак, оформляйте текст средствами языка css, а эту статью на этом я заканчиваю.