Как сделать текст красным в css
Перейти к содержимому

Как сделать текст красным в css

  • автор:

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

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

  • название цвета — «красный», «зеленый», «синий»
  • шестнадцатеричный код (HEX-code), который начинается с хэштега — «# 00FF00», «# 121212»
  • код RGB, который выглядит так — «rgb (125, 20, 255)»

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

h1 < color: gold; > h2 < color: #008000; > h3 < color: rgb(128, 0, 128); > 

В результате заголовок h1 окрасится в золотистый цвет, h2 — зеленый, а h3 примет фиолетовый окрас.

Цвет текста (color) в HTML

Одним из основных и наиболее часто используемых CSS свойств является цвет текста «color». Это свойство может принимать значения цвета, выраженные в разных единицах измерения. К примеру, в значении CSS свойства «color» напишем красный цвет (red) текстом:

Тише, мыши, кот на крыше.

— в таком случае текст окрасится в красный цвет (red):

Тише, мыши, кот на крыше.

Но очевидно, что если писать название цвета текстом, то нельзя выбрать оттенки. Поэтому существует ещё два других варианта выбора цветов. Рассмотрим их далее.

Цвет в формате RGB

В палитре RGB основными цветами являются красный, зелёный и синий. При смешении этих цветов получаются все остальные. Максимальное и минимальное значение каждого цвета может быть от 0 до 255. При смешивании трёх цветов со значениями из этого диапазона можно получить более 16 миллионов цветов (256 * 256 * 256 = 16 777 216). Этого вполне достаточно, чтобы человеческий глаз не замечал резкого перехода между цветами.

Приведём пример, как задать цвет через RGB в CSS. Сначала попробуем сделать текст красного цвета:

Тише, мыши, кот на крыше.

Как можно понять из записи, в скобках у rgb(. ) ставится уровень красного, зелёного и синего цвета, которым будет написан текст. Цвета ставятся в этой последовательности через запятую. Получается такой результат:

Тише, мыши, кот на крыше.

В палитре RGB чёрный цвет — это значение rgb(0, 0, 0), а белый цвет — это rgb(255, 255, 255). Теперь подмешаем к красному цвету зелёный в немного меньшем количестве. К примеру 150 единиц.

Тише, мыши, кот на крыше.

При смешении красного и зелёного получается жёлтый. Но так как пропорция неравная, поэтому жёлтый получился с оттенком оранжевого:

Тише, мыши, кот на крыше.

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

Об инструментах разработчика сайтов читайте подробнее в статье «Средства разработки CSS». Там вы узнаете, как изменять CSS свойства на странице без её перезагрузки, как работать с консолью, как изменять значения cookie.

Цвет в формате HEX

Запись цвета в виде rgb(255, 150, 0) является довольно громоздкой. Но существует возможность записи цвета через шестнадцатеричное значение. Если в rgb указываются цвета в десятеричной системе счисления от 0 до 255, то в шестнадцатеричной системе эти числа будут соответствовать 0 и FF. А если записывать все три числа в скобках (255, 150, 0) в одну строку без запятых через эту систему, то получится FF9600 (FF = 250, 96 = 150, 0 = 00).

Hex (hexadecimal) — обозначение шестнадцатеричной системы счисления
Чтобы записать такой цвет в значении свойства «color», необходимо сначала поставить решётку # :

Тише, мыши, кот на крыше.

Получится точно такой же результат, что и при использовании записи цвета через rgb(255, 150, 0):

Тише, мыши, кот на крыше.

Запись цвета в формате HEX компактнее. Но её можно упростить ещё сильнее. Если первые три символа в этом формате идентичны второй тройке символов, то вторую стройку можно не писать. К примеру, если есть цвет «#F96F96», то можно записать цвет как «#F96».

Другие способы записи цвета?

Существуют и другие способы записи цвета, которые имеют свои преимущества и недостатки. К примеру, RGBA у которого в отличии от RGB есть ещё и четвёртое число, которое означает прозрачность. Но чаще всего используются записи значений цвета через HEX и RGB( . ).

Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

  • color – задает цвет текста;
  • size – устанавливает размер текста;
  • face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

   Меняем цвет шрифта при помощи HTML  

Конструктор сайтов "Нубекс"

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

   Меняем цвет шрифта при помощи CSS .nubex < color:#fa8e47; font-size: 150%; >.constructor < color: blue; >.saitov 

Конструктор сайтов "Нубекс"

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Смотрите также:

  • Выравнивание текста в HTML
  • Списки HTML
  • Спецсимволы HTML
  • Шрифты CSS

Как изменить цвет текста с помощью CSS. Свойство color.

При создании веб-страниц довольно часто приходиться менять цвет текста в том или ином месте.

Небольшая инструкция о том, как это можно делать с помощью технологии CSS.

Здесь все довольно просто, нужно всего-лишь воспользоваться свойством:

color: значение_цвета;

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

Сейчас давайте рассмотрим на конкретном примере, как это работает:

Обычный абзац красным цветом

Абзац, который выделяется красным цветом в 16-ричной системе счисления

Тот же абзац красным цветом, только в формате rgb

Теперь выделим красным цветом отдельное слово в тексте:

Абзац, в котором одно Слово выделено красным цветом

Как видите, с выделением текста цветом, все довольно просто, попробуйте это сами на практике.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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