Изменить цвет первой буквы предложения css

Как изменить цвет первой буквы предложения в блоке. Выделение первой буквы цветом. Изменить цвет всех первых букв на странице!

Изменение цвета первой буквы

1. Изменение цвета первой буквы в блоке:
2. Пример изменения цвета первой буквы

Скопировать ссылку



Изменение цвета первой буквы в блоке:

Для того, чтобы продемонстрировать изменение цвета первой буквы в блоке, создадим несколько предложений.

И все данные предложения будут находится в одном блоке!

Нам потребуется :

HTML :
Блок с абзацем {P}:
<div id="example">
<p>Для того, чтобы продемонстрировать изменение цвета первой буквы в блоке, создадим несколько предложений.</p>
<p>И все данные предложения будут находится в одном блоке!</p>
<p>Нам потребуется :</p>
</div>

CSS :
Изменим чуть-чуть высоту первой буквы и покрасим её в синий
div#example p:first-letter {
font-size: 150%;
color: #0701ff;
font-family: monospace;
}


Результат изменения цвета первой буквы :

Результат вы увидели уже в первых строках данного пункта!

Скопировать ссылку



Пример изменения цвета первой буквы

В примере - "изменение цвета первой буквы" будем использовать тот же принцип, что и в выше идущем пункте, только покрасим первую букву в красный!


Как покрасить первую букву в каждом новом абзаце. Ну или формулировка – «Оформление первой буквы абзаца через css»

Итак! Мы видим, что уже в данном тексте, первая буква каждого абзаца имеет тот цвет и размер, который мы ранее прописали в стилях!

Давайте попробуем разобраться как сделать первую букву первого слова отличной от других. К первой букве абзаца мы можем применить вообще любой стиль: цвет, размер и .т.д.

Для этого нам понадобится :

Псевдо класс :first-letter

Ну в нашем случае… именно на этой странице мы использовали данный псевдо класс таким образом:

p:first-letter

Каждый новый абзац в html будет иметь вид:

<p>Здесь текст, каждого нового абзаца!</p>

Добавляем стили к первой букве абзаца:

p:first-letter {
font-family: "Times New Roman", Times, serif;
font-size: 150%;
color: red;
font-style: italic;
}

Ну,... и результат/ы вы видите на нашей странице, где мы и выделяли первую букву первого слова. В каждом абзаце, на всей странице через css!

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---