Декабрь 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 простейших решения. Читайте этот блог, чтобы узнавать другие полезные вещи.
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
ОбозначенияУказывает тип значения. | ||
A && B | Значения должны выводиться в указанном порядке. | && |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,]* |
+ | Повторять один или больше раз. | + |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | {1,4} |
# | Повторять один или больше раз через запятую. | # |
first-letter p { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 0.9em; /* Размер шрифта */ } p::first-letter { font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 2em; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ }
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан на рис. 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 .
Названный элемент может преобразовывать символы к прописным, строчным, а также задавать каждый первый символ слова в виде заглавной буквы. Подробнее о значениях я написал в таблице.
Вот теперь для закрепления теоретического материала разберите пример.
Трансформация текста body { text-align: center; } h1 { text-transform: uppercase; } h3 { text-transform: capitalize; } Внимание! !Завтра на все косметические товары скидка!
Акция действует во всех филиалах, расположенных в Вашем городе.
Создание буквицыЕсли вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.
Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.
Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).
Для решения поставленной задачи можно воспользоваться таким инструментом, как .
Так, в данном случае используется:first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.
Предлагаю рассмотреть конкретный пример. Реализуя представленную небольшую программу, я решил сделать не просто цветную буквицу, а заполнить ее цветами. Для этого нужно использовать несколько хитрых приемов с установкой прозрачного цвета шрифта и заливкой буквы выбранным изображением.
Выступающий инициал p { font-size: 26px; font-family: fantasy; } P:first-letter { /*прописываю стилевые правила для первой буквы абзаца*/ font-family: sant-serif; font-weight: 900; color: transparent; background: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); background-size: 99%; font-size: 119px; -webkit-background-clip: text; }
В этом абзаце написано предложение с очень интересным содержанием.
Продолжим интересный рассказ и в следующем абзаце.
Полученный результат выглядит очень привлекательно и необычно, что является идеальным решением для .
Как видите данная тема очень простая. Приведенный мною программный код вы спокойно можете использовать для своих веб-ресурсов, модифицируя и подгоняя под свой стиль.
Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.
Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.
Первая буква строки в верхнем регистре на PHPНа PHP существует функция под названием «ucfirst », которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.
Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:
В таком варианте мы получим предложение, которое начинается с большой буквы, что, собственно говоря, нам и необходимо.
Первая буква строки в верхнем регистре на CSSЭтот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.
Использование следующее:
первое предложение
второе предложение
третье предложение
четвертое предложение
#content p:first-letter { text-transform: uppercase; }С помощью псевдоэлемента «first-letter » и свойства «text-transform » мы задали оформление для каждой первой буквы параграфа.
Первая буква строки в верхнем регистре на jQueryКак я уже говорил ранее, этот способ преобразования лучше всего подойдет для материалов, которые еще только будут публиковаться.
Для примера мы возьмем текстовое поле (оно будет выступать у нас в качестве поля для ввода заголовка) и напишем для него небольшой скрипт, который при вводе предложения с маленькой буквы делает его с большой:
$(document).ready(function() { $(".content").on("keyup", function() { var text = $(this).val(); var new_text = text.charAt(0).toUpperCase() + text.substr(1); $(this).val(new_text); }); });
Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.
Ознакомившись с данной статьей Вы сможете сделать на своем сайте автоматическое отображение первой буквы статьи большого размера, как это делают в газетах и журналах.
Если сейчас не понятно, то ниже представлена картинка с примером. Скажу, что полученные знания позволят Вам делать аналогичные большие буквы и для всех абзацев статьи, правда уже вручную.
Я предлагаю сделать намеченное двумя способами: при помощи 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 . Почему так - об этом далее.