HTML и CSS 0

Как делается в css красная строка

Приветствую вас на своем блоге. Иногда при оформлении текста появляется необходимость по-особенному оформить именно первую строчку текста. Так как в делается в css красная строка? Об этом я и хотел бы сегодня рассказать вам.

Свойство text-indent – отступ для первой строки текста

В css есть свойство, которое используется очень редко, поэтому о нем знают не все. Называется оно text-indent, а его смысл в том, чтобы задать отступ слева самой первой строчке текста в том элементе, для которой он указан. Я сразу же привожу пример:

<div class = “post”>
<h1>Заголовок поста</h1>
<article>Сама статья</article>
</div>

Так вот, чтобы у нас получилась красная строка, пишем в css вот так:

Article{
Text-indent: 50px;
}

Вот и все, а вот вам картинка, которая показывает, как все это будет выглядеть. Тут четко видно работу свойства text-indent.красная строка в css

Как применить другие свойства к первой строке

Но text-indent помогает всего лишь задать нужный отступ текстовому содержимому, но сама строка не выделяется по-другому, а иногда это может быть необходимо. Итак, что же нам делать, чтобы оформить первую строчку не так, как остальные?

Решение очень простое – псевдокласс first-line. Он был создан в css специально для того, чтобы можно было обращаться к первой линии текстового содержимого нужного нам элемента. Например, если взять ту же самую разметку, что мы описали выше, то вот так мы можем обратиться к первой строке:

Article:first-line{
Color: red;
}

Псевдоклассы в css-селекторах пишутся так: ставится двоеточие, а потом вы должны написать имя нужного вам псевдокласса. А вообще об этом можете почитать вот эту статью.
оформление первой строки
Так мы добавили первой строке красный цвет шрифта, так что теперь она очень сильно выделяется в тексте. Как вы понимаете, теперь к ней вы можете добавить любые другие свойства, какие посчитаете нужными. Например, жирное начертание или даже другой шрифт, отличный от основного.

Как видим, css предоставляет нам достаточно возможностей, чтобы оформить первую строку в тексте по-особенному. Интересно, что в нем даже есть псевдокласс, которым можно выбрать первую букву в элементе. О нем я написал здесь.

Итак, оформляйте текст средствами языка css, а эту статью на этом я заканчиваю.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5