:first-letter как сделать красивую заглавную букву CSS
Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему "Псевдо-элементы CSS".
Сейчас, с их помощью, мы научимся делать красивую заглавную букву, для абзацев, и красиво оформлять первую строку абзаца, при необходимости.
За красивую заглавную букву, в CSS отвечает псевдо-элемент :first-letter.
Если Вам нужно сделать красивую заглавную букву во всех абзацах статьи, то :first-letter привязывается к селектору p/
Если же красивая заглавная буква нужна только в одном абзаце, то этому абзацу задаётся class, и псевдо-элемент привязывается к этому классу.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
p:first-letter{
font-family: Monotype Corsiva;
font-size: 200%;
color: #007371;
}
.text:first-letter{
font-family: Impact;
font-size: 200%;
color: #FF0A0A;
}
</style>
</head>
<body>
<p>Forex ФоРуМ</p>
<p>Многофункциональный форум рунета</p>
<p>Быстрое решение любых проблем с сайтом</p>
<p>Только провереная информация</p>
<p class="text">1 среди форумов!</p>
</body>
</html>
Результат:
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
p:first-letter{
font-family: Monotype Corsiva;
font-size: 200%;
color: #007371;
}
.text:first-letter{
font-family: Impact;
font-size: 200%;
color: #FF0A0A;
}
</style>
</head>
<body>
<p>Forex ФоРуМ</p>
<p>Многофункциональный форум рунета</p>
<p>Быстрое решение любых проблем с сайтом</p>
<p>Только провереная информация</p>
<p class="text">1 среди форумов!</p>
</body>
</html>
[/html]
Думаю, тут всё понятно.
Теперь оформим первую строку абзаца. За неё в CSS отвечает псевдо-элемент first-line.
Принцип действия такой же, как и в предыдущем примере.
Если нужно оформить только одну строку одного абзаца, то этому абзацу задаётся класс. Если же оформлению подлежат первые строки всех абзацев, то псевдо-элемент first-line привязывается к селектору p
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
p:first-line{
font-family: Impact;
font-size: 150%;
color: blue;
}
</style>
</head>
<body>
<p>Хостинг Бегет<<br>
Круглосуточная тех. поддержка<<br>
Быстрое решение любых проблем с сайтом<<br>
Стоимость аренды от 999 руб. в год<<br>
1 гиг на диске</p>
</body>
</html>
Результат:
В следующей статье научимся делать страницу с загнутым уголком.
Желаю творческих успехов!
