Html первая буква другим цветом. Псевдокласс First-letter или как выделить первую букву в css
Декабрь 20, 2015
Всем привет, сегодня у меня очень коротенькая информация, которая поможет вам сделать на сайте первую букву в любом элементе с помощью css. В этом нам поможет псевдокласс:first-letter . Для новичков советую почитать статью о том, что такое псевдокласс.
first-letter в действии
Итак, все предельно просто. Допустим, у нас есть текст – 3 абзаца. В первом абзаце нужно выделить самую первую букву, как часто делают во многих книгах. То есть именно этой букве нужно задать свои собственные стили: размер шрифта, цвет и т.д.
Это делается с помощью псевдокласса:first-letter , который надо прописать элементу, внутри которого непосредственно располагается наш текст. Но если мы сделаем так:
P:first-letter{ color: red }
Как вы думаете, в каких абзацах первую буквы станут красными? Правильно, во всех абзацах. А нам-то нужно только в первом! Варианты решения:
— прописать первого абзацу стилевой класс и через этот селектор оформить букву
— выбрать первый абзац с помощью свойств first-child или nth-child
Решение 1 в коде:
Abzac1:first-letter{ стили… }
Перед этим нам нужно задать первому абзацу соответствующий класс. Если вы не знаете, как это делается, смотрите в этой статье.
Решение 2 в коде:
P:first-child:first-letter{ стили… }
Как видите, мы использовали два псевдокласса и таким образом выбрали первый абзац и первую букву в нем. Тоже достаточно удобно.
Итак, мы нашли 2 простейших решения. Читайте этот блог, чтобы узнавать другие полезные вещи.
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы 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 . Почему так - об этом далее.
Псевдоэлемент first-letter
предназначен для оформления первой буквы элемента. Любые предшествующие знаки пунктуации должны быть оформлены вместе с первой буквой. Немногим ранее, до версии CSS 2.1:first-letter мог использоваться только с блочными элементами. А начиная со спецификации CSS 2.1 область его применения расширилась, и теперь:first-letter доступен для любого элемента.
К данному псевдоэлементу можно применять только стили, связанные с оформлением текста, границами, полями, цветом.