FrontendBook - Как изменить цвет текста в HTML

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

Текст играет важную роль на наших веб-страницах. Это потому, что это помогает пользователям узнать, что такое веб-страница и что они могут там делать.

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

Например, предположим, что у вас более темный цвет в качестве фона вашего сайта. В этом случае вам нужно сделать цвет текста светлее и ярче, чтобы улучшить читабельность и доступность вашего веб-сайта.

В этой статье вы узнаете, как изменить цвет текста в HTML. Мы рассмотрим различные методы и обсудим, какой из них лучше.

Как изменить цвет текста до HTML5

До появления HTML5 вы использовали <font> его для добавления текста на веб-сайты. Этот тег принимает colorатрибут, который принимает цвет как имя или шестнадцатеричное значение кода: 


<font color="#9900FF"> Welcome to FrontendBook. </font>

// Или

<font color="green"> Welcome to FrontendBook. </font>

Этот тег устарел, когда был представлен HTML5. Это имеет смысл, поскольку HTML — это язык разметки, а не язык стилей. При работе с любым типом стилей лучше всего использовать CSS, основная функция которого заключается в оформлении.

Это означает, что для добавления цвета на веб-страницы вам необходимо использовать CSS.

Если вы спешите узнать, как можно изменить цвет текста, то вот он:


// строчный CSS код
<h1 style="color: value;"> Welcome to FrontendBook! </h1>



// внешний CSS файл
selector {
    color: value;
}

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

Вы можете использовать свойство цвета CSS, чтобы изменить цвет текста. Это свойство принимает значения цвета, такие как шестнадцатеричные коды, RGB, HSL или имена цветов.

Например, если вы хотите изменить цвет текста на небесно-голубой, вы можете использовать имя skyblue, шестнадцатеричный код #87CEEB, десятичный код RGB rgb(135,206,235)или значение HSL hsl(197, 71%, 73%).

Есть три способа изменить цвет текста с помощью CSS. Они используют встроенный, внутренний или внешний стиль.

Как изменить цвет текста в HTML с помощью встроенного CSS

Встроенный CSS позволяет применять стили непосредственно к элементам HTML. Это означает, что вы помещаете CSS непосредственно в тег HTML.

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

 
<p style="...">Welcome to FrontendBook!</p>

Вы будете использовать свойство цвета CSS вместе с вашим предпочтительным значением цвета:

 
// Название цвета
<p style="color: skyblue">Welcome to FrontendBook!</p>

// Hex код цвета
<p style="color: #87CEEB">Welcome to FrontendBook!</p>

// RGB код цвета
<p style="color: rgb(135,206,235)">Welcome to FrontendBook!</p>

// HSL код цвета
<p style="color: hsl(197, 71%, 73%)">Welcome to FrontendBook!</p>

Но встроенные стили — не лучший вариант, если ваши приложения становятся больше и сложнее. Итак, давайте посмотрим, что вы можете сделать вместо этого.

Как изменить цвет текста в HTML с помощью внутреннего или внешнего CSS

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

Для внутреннего стиля вы делаете это в <head> теге вашего HTML-файла. В <head> теге вы добавите <style> тег и поместите туда все свои стили CSS, как показано ниже:

 
<!DOCTYPE html>
<html>
  <head>
    <style>
      selector {
        color: value;
      }
    </style>
  </head>

  // ...

</html>

В то время как для внешнего стиля все, что вам нужно сделать, это добавить стиль CSS в ваш файл CSS, используя общий синтаксис:


selector {
  color: value;
}

Селектор может быть либо вашим HTML-тегом, либо class файлом ID. Например:

 
// HTML
<p> Welcome to FrontendBook! </p>

// CSS
p {
  color: skyblue;
}

Или вы можете использовать class:

 
// HTML
<p class="my-paragraph" > Welcome to FrontendBook!</p>

// CSS
.my-paragraph {
   color: skyblue;
}

Или вы можете использовать id:

 
// HTML
<p id="my-paragraph" > Welcome to FrontendBook!</p>

// CSS
#my-paragraph {
   color: skyblue;
}

Как вы видели ранее, со встроенным CSS вы можете использовать имя цвета, шестнадцатеричный код, значение RGB и значение HSL с внутренним или внешним стилем.

Подведение итогов

В этой статье вы узнали, как изменить шрифт/цвет текста HTML-элемента с помощью CSS. Вы также узнали, как это делали разработчики до появления HTML5 с <font>атрибутами тегов и цветов.

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

Например, вместо того, чтобы добавлять одинаковые встроенные стили ко всем <p> элементам тегов, вы можете использовать один CSS classдля всех них.