Задумался тут, что не очень-то любят об этом писать в учебниках, в результате чего о first-letter узнают не сразу. Однако тут либо знают, либо нет, третьего не дано. Так что пост специально для тех кто не знает, в первую очередь. Во вторую очередь скажу о некоторых деталях псевдоэлемента first-letter, которые может быть забыты или неизвестны.
Итак, что же такое буквица. Слово многозначное, это и полевой шалфей, и старинное название азубки, и устаревшее название записки, но нас интересует следующее определение: "Буквица, или инициал - крупная, часто выделенная цветом, орнаментированная или иным образом украшенная начальная буква раздела рукописной или печатной книги." (с) Wiki.
В html-текстах роль буквицы играет first-letter в CSS. Синтаксис у неё простой: если нужно, к примеру, задать оформления первым буквам всех параграфов, то нужно прописать:
Самое приятное, что first-letter поддерживается не только всеми современными браузерами, но и старичок IE6 не явился исключением. Именно поэтому на заметку этот элемент взять необходимо.
Ему можно задавать margin и padding для позиционирования. Также можно задавать float:left для того, чтобы буква была не на уровне со строкой, а как бы в тексте.
Без float'а всё понятно - нужно выделить букву, обычно цветом и размером. А во втором случае - можно использовать очень любопытно, чтобы как в книгах. Но об этом ниже.
Особенности использования
На хабре отмечают некоторые особенности использования, о которых я поведаю здесь (оригинал статьи).
Возможность задать два бэкграунда одному элементу. Например, в один угол одну маленькую картинку, в другой угол - другую.
h1 { background: #ff9900 url(img1.jpg) right center no-repeat; } h1:first-letter { background: url(img2.jpg) left center no-repeat; padding: 5px 8px; }
Не забываем ставить пробелы для IE6. Перед фигурной скобкой - это раз, а два - при указании нескольких классов - перед запятой.
Закос под старинные книги. Указав float:left, можно сделать из первой буквы что-нибудь нестандартное. К примеру вот варианты из одной статьи.
Выбираем бэкграунд, оформляем букву и вуаля! Автор статьи предлагает создать конструкцию, в которой после каждого заголовка h2 для первого элемента p создаётся оформление.
Однако эта конструкция в IE6 не поддерживается, а в IE7 только частично. Поэтому подобного рода идею стоило бы, вероятно, сделать на jQuery. Но привязывать это к заголовкам h означает, что только одна буква на странице будет такой. Почему? А из-за того, что каждого заголовка h на странице должно быть по одной штуке. Такая вот премудрость СЕО.
Собственно это, наверное, всё, что нужно знать про first-letter. Удачной всем недели!
Блог больше не ведётся. Большинство материалов имеют давнюю дату публикации, учите, что не всё является на сегодняшний день актуальным. Спасибо за внимание!
Меня зовут Александр, я веб-программист со стажем, автор ShuBlog'а, владелец/директор по развитию PetrogradWeb. Мы занимаемся разработкой и развитием сайтов, сервисом и приложений, также продвижением бизнеса в сети. alex [собака] petrogradweb [точка] ru