Как изменить цвет текста в 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

16 ответов к «Как изменить цвет текста в html»

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *