Всем привет, сегодня у меня очень коротенькая информация, которая поможет вам сделать на сайте первую букву в любом элементе с помощью 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 простейших решения. Читайте этот блог, чтобы узнавать другие полезные вещи.