Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

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

    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;
    }

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

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

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

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

    Как покрасить первую букву в каждом новом абзаце. Ну или формулировка – «Оформление первой буквы абзаца через 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!


Вас может еще заинтересовать список тем : #CSS | #PARAGRAPH | #COLOR | #FIRST_LETTER |
Последняя дата редактирования : 2020-11-18 17:46
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
первая буква абзаца цветом первые буквы абзацев цвет

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.