Псевдоэлемент first-letter / HTML, XHTML и CSS на 100% / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Игорь Квинт i

Книги автора: HTML, XHTML и CSS на 100% Работаем на нетбуке. Начали!

/ Издательство «Питер»i

Книги автора: Системное программное обеспечение. Лабораторный практикум Мерчандайзинг. Курс управления ассортиментом в рознице Категорийный менеджмент. Курс управления ассортиментом в рознице Дефрагментация мозга. Софтостроение изнутри Искусство управления IT-проектами Гибкое управление проектами и продуктами Лидогенерация: клиентов много не бывает Идеальный программист. Как стать профессионалом разработки ПО Реклама. Принципы и практика Интернет-маркетинг 3.0. Нет русской рулетке! Информационный удар. Как сделать, чтобы в шумном медиамире услышали именно тебя Перехват клиента. Борьба за продажи в условиях жесткой конкуренции Маркетинг для государственных и общественных организаций Запуск! Быстрый старт для вашего бизнеса Большая книга директора магазина 2.0. Новые технологии Успешная короткая презентация Цифровая фотография. Трюки и эффекты Новое оружие маркетинговых войн Продвижение порталов и интернет-магазинов Разумный маркетинг. Как продавать больше при меньших затратах Установка, настройка и восстановление Windows 7 на 100% Графология XXI века HTML, XHTML и CSS на 100% Копирайтинг: как не съесть собаку. Создаем тексты, которые продают 99 инструментов продаж. Эффективные методы получения прибыли Выжми из бизнеса всё! 200 способов повысить продажи и прибыль Генератор новых клиентов. 99 способов массового привлечения покупателей Если покупатель говорит «нет». Работа с возражениями Копирайтинг: секреты составления рекламных и PR-текстов Продвижение бизнеса в ВКонтакте. Быстро и с минимальными затратами Профессиональный поиск в Интернете Восстановление данных на 100% Инфобизнес на полную мощность. Удвоение продаж Инфобизнес за один день Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете Монетизация сайта. Секреты больших денег в Интернете Удвоение продаж в интернет-магазине Деловая e-mail переписка. Пять правил успеха Социальные сети. Источники новых клиентов для бизнеса Быстрые деньги в Интернете. 50 способов заработать, сидя дома у компьютера Интернет-маркетинг на 100% Как спроектировать современный сайт

Книга: HTML, XHTML и CSS на 100%

Псевдоэлемент first-letter

Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он аналогичен перемещаемому объекту.

К псевдоэлементам: first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, text-decoration, vertical-align (если для свойства float установлено значение none), text-transform, line-height, свойства полей, полей в ячейке таблицы, рамок, float, text-shadow и clear.

В следующем примере из листинга 7.8 высота буквицы устанавливается равной высоте двух строк.

Листинг 7.8. Стиль заглавной буквы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0//EN»>

<html>

<head>

<title>Глава 7. Стиль заглавной буквы</title>

p { font-size: 12pt; line-height: 12pt }

p:first-letter { font-size: 200%; font-style: italic;

font-weight: bold; float: left }

span { text-transform: uppercase }

</style>

</head>

<body>

Первые несколько слов из книги

"Самоучитель по HTML и CSS".

</body>

</html>

Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.

Рис. 7.1. Стиль заглавной буквы

Приведу последовательность функциональных тегов:

<p:first-letter>

</p:first-letter>ервые

несколько слов из статьи в журнале "Экономист".

Обратите внимание, что теги псевдоэлементов: first-letter примыкают к содержимому (например, к начальному символу), а открывающий тег псевдоэлемента: first-line вставляется сразу после открывающего тега элемента, к которому он прикрепляется.

Учтите, что в некоторых языках могут существовать специальные правила обращения с определенными сочетаниями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе находятся в псевдоэлементе: first-letter.

В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен 24 пункта. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца – красным. CSS-код примера будет выглядеть следующим образом:

p { color: red; font-size: 12pt }

p:first-letter { color: green; font-size: 200% }

p:first-line { color: blue }

Например, рассмотрим этот CSS код применительно к такому абзацу:

Некоторый текст, разделенный на две строки

Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:

<p:first-line>

<p:first-letter>

Не

</p:first-letter>который текст,

</p:first-line>

разделенный на две строки

Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.

Оглавление книги

Оглавление статьи/книги

Похожие страницы