Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Пример
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
Рис. 1. Результат использования псевдоэлемента::first-letter
Примечание
В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы css — средствами, ознакомитесь с несколькими вариантами создания буквицы и конечно же сможете все опробовать на практике. Ну а теперь давайте переходить к самому интересному!
Займемся трансформацией текста
Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.
Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном . Это text-transform .
Названный элемент может преобразовывать символы к прописным, строчным, а также задавать каждый первый символ слова в виде заглавной буквы. Подробнее о значениях я написал в таблице.
Вот теперь для закрепления теоретического материала разберите пример.
Внимание!
!Завтра на все косметические товары скидка!
Акция действует во всех филиалах, расположенных в Вашем городе.
Создание буквицы
Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.
Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.
Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).
Для решения поставленной задачи можно воспользоваться таким инструментом, как .
Так, в данном случае используется:first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.
Предлагаю рассмотреть конкретный пример. Реализуя представленную небольшую программу, я решил сделать не просто цветную буквицу, а заполнить ее цветами. Для этого нужно использовать несколько хитрых приемов с установкой прозрачного цвета шрифта и заливкой буквы выбранным изображением.
В этом абзаце написано предложение с очень интересным содержанием.
Продолжим интересный рассказ и в следующем абзаце.
Полученный результат выглядит очень привлекательно и необычно, что является идеальным решением для .
Как видите данная тема очень простая. Приведенный мною программный код вы спокойно можете использовать для своих веб-ресурсов, модифицируя и подгоняя под свой стиль.
Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
Ознакомившись с данной статьей Вы сможете сделать на своем сайте автоматическое отображение первой буквы статьи большого размера, как это делают в газетах и журналах.
Если сейчас не понятно, то ниже представлена картинка с примером. Скажу, что полученные знания позволят Вам делать аналогичные большие буквы и для всех абзацев статьи, правда уже вручную.
Я предлагаю сделать намеченное двумя способами: при помощи CSS3 и классической связкой CSS+HTML (кроссбраузерно).
Вот нечто подобную букву сейчас попробуем сделать. Для начала автоматически при помощи CSS3.
Как сделать большую букву автоматически
В данном методе при помощи некоторых параметров CSS3 мы автоматизируем процесс выделения заглавной первой буквы статьи. Все, что нам необходимо, это добавить в файл стилей (style.css) следующую строку:
p:first-child:first-letter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
p:first-child:first-letter { float : left ; color : #0078BF ; font-size : 75px ; line-height : 60px ; padding-top : 4px ; padding-right : 8px ; padding-left : 3px ; font-family : Georgia ; }
Немного поясню: английская буква p (самая первая) - это тег
Обозначающий абзац (аналогично нажатие клавиши Enter во время набора статьи). Структура вашей статьи содержит именно такие теги, когда вы начинаете новый абзац. Вот для него мы и задаем необходимые параметры.
То, что стоит в представленном коде после этой буквы p , а именно first-child:first-letter, позволяет автоматически вычислить первую букву в статье.
Однако предложенного кода будет мало, т.к. необходимо узнать название класса, где располагается данный абзац. Делается это так же двумя способами, о которых я рассказал в следующем видео-подкасте:
Есть и минус подобной автоматической замены при помощи CSS3 - старые браузеры не поддерживают данную технологию. Так же у полу-браузеров Internet Explorer нет поддержки подобных функций. Надеюсь что вскоре большинство пользователей интернета перейдут на нормальные браузеры, которые позволяют реализовывать ранее не доступные вещи.
Делаем большую букву кроссбраузерной вручную
В данном способе вам придется вручную определять каждую букву, которую хотите сделать большой. Плюсом данного способа является то, что вы можете сделать такой большой не только первую букву, но и любую по тексту. Фактически можете каждый абзац сделать с большой буквы - времени много не занимает.
Чтобы подобное реализовать, необходимо будет в файле стилей style.css прописать любое название класса с атрибутами из примера выше. Выглядеть это будет примерно так (класс bigletter я придумал):
Bigletter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Bigletter { float : left ; color : #0078BF ; font-size : 75px ; line-height : 60px ; padding-top : 4px ; padding-right : 8px ; padding-left : 3px ; font-family : Georgia ; }
Здесь у нас все те же атрибуты, только в самом начале немного изменилось: я прописал новый класс и не использовал тег p . Почему так - об этом далее.