Как изменить цвет текста в html

Цвет текста в html
Изменить цвет текста можно несколькими способами.

С помощью тега font

Тег font имеет 3 атрибута, которые меняют цвет текста, размер и шрифт. Общая формула выглядит так:

<font color="цвет" face="шрифт" size="размер">Ваш текст</font>

Частные случаи форматирования выглядят таким образом:

  • уменьшаем текст <font size="-2"> уменьшенный текст на 2 единицы</font>
  • увеличиваем текст <font size="+2"> увеличить текст на 2 единицы </font>
  •  изменяем цвет текста <font color="red"> красный текст </font> или
    <font color="#FF0000"> красный текст </font>
  • изменить размер и цвет текста <font color="red" size="+3"> красный текст </font>
  • Изменить шрифт <font face="Monotype Corsiva">Ваш текст</font>

Для изменения цвета вам пригодится Таблица html кодов цветов

 С помощью тега span

Этот способ предпочтителен, так как работает в большинстве случаев и там, где тег font оказывается несостоятельным. 

  • Вы можете изменить размер текста:
    <span style="font-size: 25px;">Ваш текст</span>
    Ваш текст
  • Изменяем цвет текста
    <span style="color: blue;">Ваш текст</span>
    Ваш текст
  • Изменяем шрифт:
    <span style="font-family: Monotype Corsiva;">Ваш текст</span>
    Ваш текст
  • Изменить одновременно шрифт, цвет и размер текста:
    <span style="font-family: Monotype Corsiva; color: fuchsia; font-size: 25px;">Ваш текст</span>
    Ваш текст
  1. Чтобы подобрать шрифт, воспользуйтесь шрифтами html
  2. для подбора цвета - таблицей цвета HTML

Через стили CSS

Самый лучший способ задать форматирование текста - применить стили css. Примеры "текстовых" стилей:

<html> 
<head>
<style>
p { 
color: #ccc000;
}
.primercss {
color: red
}
</style>
</head>
<body>
<p>Пример изменения цвета теста абзаца в CSS</p>
<p class="primercss">Пример изменения цвета текста с помощью класса CSS</p>
</body>
</html>

Что получим:
Пример изменения цвета теста абзаца в CSS
Пример изменения цвета текста с помощью класса CSS

Оцените статью
Добавить комментарий

  1. Zinaida

    Ну замечательно!Все есть для неумех!
    Огромное спасибо.

    Ответить
  2. Аноним

    Очень рада, что моя информация оказалась Вам полезна.

    Ответить
  3. Анонимный

    Да, очень полезная юным сайтостроителям.

    Ответить
  4. Анонимный

    спасибо огромное!

    Ответить
  5. mmm

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

    Ответить
  6. Аноним

    Конечно, не ту. В записи рассказываю как увеличить размер шрифта на своем блоге. Если вы хотите увеличить размер шрифта на любой веб-странице, так это делается гораздо проще - нажмите одновременно сочетание клавиш CTRL и +
    Можете нажать их несколько раз, до тех пор, пока не станет вам удобно читать. Эти горячие клавиши работают во всех браузерах.

    Ответить
  7. Анонимный

    СПАСИБО! ПОЛ ДНЯ НЕ МОГЛА ПОНЯТЬ!

    Ответить
  8. Анонимный

    хорошая статья .Подчерпнул для себя пару полезных вещей.

    Ответить
  9. Анонимный

    Спасибо, Ваш сайт всегда под рукой!!!

    Ответить
  10. Анонимный

    Спасибо огромное)) я автор самиздата, а там вечно все эти шрифты фоны меняют, а я сижу как макака по ту сторону монитора и чувствую себя неандертальцем)) а теперь уж и яшеньки умом позаимствованным блесну!:)

    Ответить
  11. Анонимный

    Большое Вам спасибо!

    Ответить
  12. kvaveryanov23

    +1

    Ответить
  13. Pushkaryov

    Админ!! Если нужен хостинг недорогой.. напиши мне на admin@chromoryad.com . я ООО РЭМИС, и у меня свои сервера.

    Ответить
  14. Mycrib

    Pushkaryov, мне хостинг не нужен. Пока и blogger устраивает.

    Ответить
  15. Анонимный

    Наверное "умным " это понятно, а как же нам "не очень умным " ?

    Ответить
  16. Павел Федоренко

    Вот это уж да ! Искал решение с уменьшением и увеличением шрифта в блоге на стороннем скачанном шаблоне.Весь нэт перерыл ,а решение тута )) Добра админу !

    Ответить