проблема с буквицей при верстке в word

h2+p:first-letter {   float:left;   padding: 10px;   background: #fff url(img3.jpg) center bottom no-repeat;   color: #000;   border: 1px solid #000;}

Выбираем бэкграунд, оформляем букву и вуаля! Автор статьи предлагает создать конструкцию, в которой после каждого заголовка h2 для первого элемента p создаётся оформление.

Закос под старинные книги. Указав float:left, можно сделать из первой буквы что-нибудь нестандартное. К примеру вот варианты из одной .

h1:first-letter{ /*Не сработает*/ }h1:first-letter { /*Сработает*/ }h1:first-letter, .someclass { /*Не сработает*/ }h1:first-letter , .someclass { /*Сработает*/}

Не забываем ставить пробелы для IE6. Перед фигурной скобкой - это раз, а два - при указании нескольких классов - перед запятой.

h1 {   background: #ff9900 url(img1.jpg) right center no-repeat;}h1:first-letter {   background: url(img2.jpg) left center no-repeat;   padding: 5px 8px;}

Возможность задать два бэкграунда одному элементу. Например, в один угол одну маленькую картинку, в другой угол - другую.

На хабре отмечают некоторые особенности использования, о которых я поведаю здесь ( ).

Особенности использования

Без float'а всё понятно - нужно выделить букву, обычно цветом и размером. А во втором случае - можно использовать очень любопытно, чтобы как в книгах. Но об этом ниже.

Ему можно задавать margin и padding для позиционирования. Также можно задавать float:left для того, чтобы буква была не на уровне со строкой, а как бы в тексте. 

Самое приятное, что first-letter поддерживается не только всеми современными браузерами, но и старичок IE6 не явился исключением. Именно поэтому на заметку этот элемент взять необходимо.

p:first-letter {   font: bold 14px Tahoma;    color: red;}

В html-текстах роль буквицы играет first-letter в CSS. Синтаксис у неё простой: если нужно, к примеру, задать оформления первым буквам всех параграфов, то нужно прописать:

Итак, что же такое буквица. Слово многозначное, это и полевой шалфей, и старинное название азубки, и устаревшее название записки, но нас интересует следующее определение: "Буквица, или инициал - крупная, часто выделенная цветом, орнаментированная или иным образом украшенная начальная буква раздела рукописной или печатной книги." (с) Wiki.

Задумался тут, что не очень-то любят об этом писать в учебниках, в результате чего о first-letter узнают не сразу. Однако тут либо знают, либо нет, третьего не дано. Так что пост специально для тех кто не знает, в первую очередь. Во вторую очередь скажу о некоторых деталях псевдоэлемента first-letter, которые может быть забыты или неизвестны.

Следующая запись »  

« Предыдущая запись  

“Как сделать буквицу на CSS” или “Всё, что нужно знать про псевдоэлемент first-letter в CSS”

“Как сделать буквицу на CSS” или “Всё, что нужно знать про псевдоэлемент first-letter в CSS” | ShuBlog