CSS и первые строки

Атрибут first line

CSS first line: Первая строка и ее оформление

Оформление первой строки текста при помощи CSS :first-line

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

В Соединенных Штатах Америки
второй по прибыльности после нефтяной является информационная индустрия.

Теперь разберем HTML и CSS код нашего примера:

<title>Первая строка в css</title>
<style type="text/css">
p.f-l:first-line {color:#06c; font-weight:bold; line-height:210%}
</style>
</head>
<body>
<p class="f-l">В Соединенных Штатах Америки <br /> второй по прибыльности после нефтяной является информационная индустрия.</p>

Строку текста в примере мы сначала разбили HTML тегом <br />, сделав таким образом перенос. Затем присвоили параграфу класс class="f-l", который необходимым способом описали в CSS стилях, назначив для первой строки характерное оформление.

Как вы видите, ничего сложного, а в вашем арсенале еще один CSS прием.

Дата публикации: Январь 2013 | Обновление: Август 2014

Первая строка или CSS first line   CSS справочник

    Сохранить в сервисы и закладки