Меняем цвет первой буквы в каждом абзаце

Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.

Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..

Создаём новогоднюю поздравительную открытку

Создаём сложное выделение волос

Превращаем современную фотографию в старую

Создаём разноцветную светящуюся спираль

Наносим естественную татуировку в Фотошопе

Уроки по сайтостроению - Рубрика: CSS

Меняем цвет первой буквы в каждом абзаце

Удобнее всего воспользоваться стилевым псевдоэлементом first-letter, добавляя его к селектору P. В стилях вначале указывается селектор, затем через двоеточие first-letter, после чего в фигурных скобках пишется желаемый параметр color и его значение.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Цвет буквы</title>
<style type="text/css">
p:first-letter {
color: red; /* Красный цвет первой буквы */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</p>
</body>
</html>

Результат данного примера показан ниже:

В данном примере псевдоэлемент first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и шрифт.

Если хотите не упустить данный урок, добавьте его в закладки:

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:

Добавлено: 2008-11-27 Просмотров: 909 Сайт-источник: photoshop-php.ru

Комментарии (1)

Комментарий by игорь, От 2010-12-19

вот за ето спасибо а то все уроки одинаковые а ето новый всегда приятно увидеть как работает псевдоеллемент на практике

Оставить комментарий:

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *

Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".

Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее

Вы можете в любое время восстановить исходную рабочую среду, выполнив команду меню Window > Workspace > Default Workspace (Окно > Рабочая среда > Рабочая среда по умолчанию). Неиспользуемые рабочие среды легко удалить командой Window > Workspace > Delete Workspace (Окно > Рабочая среда > Удалить рабочую среду).

Узнать больше