Как изменить цвет шрифта в html

Приветствую, друзья, на блоге SdelaemBlog.ru. Сегодня, поговорим о вопросе, который очень часто встречается в сети интернет. И не реже, его задают мне посетители блога. А зная ответ на него, вы сможете использовать полученные знания и в других ситуациях. Которые связаны с размещением элементов на сайте, их размером и цветом.

Самостоятельное изменение цвета шрифта на сайте.

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


Итак. Самой большой проблемой является не изменение самих свойств. А определение элемента, он же селектор, в файле style.css. Свойства которого должны быть изменены, чтобы изменился внешний вид на самой странице. Благодаря нынешним возможностям браузеров, мы можем легко определить нужный селектор.

Для примера, я буду использовать один из стандартных шаблонов wordpress. Именно для него мы изменим цвет шрифта. Но по аналогии, мы сможем совершать подобные действия в любой другой теме wordpress. Да и вообще на любом, абсолютно любом сайте, не зависимо от того, ваш он или нет, и какая CMS выбрана. Так как, в любом случае, браузер выводит любой сайт в виде html-кода, с применением стилей CSS, для организации необходимого внешнего вида.

Как изменить цвет шрифта в HTML, с помощью веб-браузера Google Chrome?

Для того, чтобы воспользоваться данным способом, нам понадобится веб-браузер Google Chrome и собственно сайт, для которого необходимо поменять цвет шрифта.

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


Как изменить цвет шрифта в HTML, с помощью веб-браузера Google Chrome?

После этого, в нижней части окна браузера появится дополнительное окно, в котором будет отображен html-код страницы. С которым мы и будет работать. Теперь, если мы все сделали, как написано выше, нужный нам элемент будет подсвечен, в левой колонке окна. А его стили, которые нам нужны, будут отображены в правой колонке окна.

Как изменить цвет шрифта в HTML, с помощью веб-браузера Google Chrome?

В данном случае выделенный элемент, является заголовком статьи. То есть он обернут тегами h1…h6. И выглядит примерно так:

<h1>Заголовок статьи.</h1>

Теперь немного подробнее о том, как пользоваться данной возможностью браузера. В левой колонке мы можем выбирать любой элемент веб-страницы, наводя курсором на html-код. При этом, элемент будет подсвечен, для того чтобы было понятней какой элемент в данный момент мы выбрали. А справа представлены все стили, которые относятся к данному объекту. Стоит учитывать, что на элемент могут действовать не только стили относящиеся непосредственно к нему. Но и глобальные стили, которые применяются ко всем подобным элементам на странице.


В нашем примере, как раз именно тот случай. Если мы кликнули по тегу заголовка, мы не увидим в его стилях цвета шрифта, который относится именно к нему. Здесь, как раз, цвет шрифта назначается глобальным селектором body,  который влияет и на цвет остальных шрифтов, необязательно заголовков. А также имеются стили для всех видов заголовков сразу.  А чтобы назначить цвет только для данного типа заголовка, мы можем прописать их отдельно в файле style.css, так как с помощью браузера, мы определили, какой необходим селектор, для назначения стилей. В данном случае, это будет h1. То есть, чтобы определить стили для заголовка статьи,  в style.css необходимо прописать следующее:

h1{  /* стили заголовка */  }

Кроме того, с помощью браузера мы можем попробовать те или иные стили, для любого элемента, перед тем как прописать его в файл стилей. То есть, как бы устроить себе предпросмотр внешнего вида. При этом на сайте меняться ничего не будет. Для этого, если нет уже заданных стилей для данного селектора, мы можем прописать все что угодно в самом верху правой колонки. То есть для селектора, который определяется, как element.style:

Как изменить цвет шрифта в HTML, с помощью веб-браузера Google Chrome?


При этом, внешний вид элемента будет меняться в режиме онлайн, только в нашем браузере. Что очень удобно. Можно все подогнать как надо. И только потом прописать все в файл стилей и сохранить. И тогда уже изменения будут отображены на сайте, для всех посетителей.

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

Нужный тег выбран, но где его цвет? Для того, чтобы найти откуда берется цвет шрифта, просто прокручиваем используемые стили вниз, до того момента пока не увидим стили с цветом. Они обычно выглядят, как color. А чтобы проверить, нужный мы нашли стиль или нет, мы можем кликнуть на квадратик с цветом и заменить цвет на любой другой. Если цвет поменяется, значит, мы нашли нужный селектор и именно здесь нам нужно изменить цвет.

Как изменить цвет шрифта в HTML, с помощью веб-браузера Google Chrome?

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


Для одного конкретного заголовка, код в style.css будет выглядеть так:

h1{  color: rgb(216, 48, 48);  }

А если для всей группы заголовков, то будет так:

h1, h2, h3, h4, h5, h6{  color: rgb(216, 48, 48);  }

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

Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox?

Чтобы изменить цвет, с помощью браузера Mozilla Firefox. Нам также, необходимо перейти на нужную страницу. Найти нужный элемент. Кликнуть по нему правой кнопкой мыши. И выбрать в выпавшем меню «Исследовать элемент».

Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox?

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


Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox?

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

Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox?

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

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


Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox?

После определения кода цвета и его замены. Мы также увидим изменения на странице сайта. И если нас результат устроит, мы просто копируем цвет шрифта, прописываем нужный селектор, и вставляем код цвета для него. После чего, сохраняем и проверяем результат.

sdelaemblog.ru

Использование CSS для оформления сайта

Для оформления HTML-документа и изменения настроек текста в нем используется CSS (Cascading Style Sheet — каскадные таблицы стилей).

Для внесения корректировок в цвет текста HTML в более ранних версиях можно было воспользоваться тегом <font>…</font>. После выхода версии HTML5, программисты и владельцы сайтов для этих целей начали пользоваться только CSS. Это отвечает всем стандартам и можно будет не беспокоиться о том, как сайт будет отображаться в разных браузерах.

Внести изменения цвета текста в HTML, применяя CSS, можно несколькими способами:

  • при помощи режима HEX: color:#0000ff;
  • с использованием слова, обозначающего требуемый цвет (на английском языке): color:blue.

Прямое включение CSS в документ HTML

Использование атрибута style для изменения цвета текста в HTML коде разберем на примере.

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

Начало любого нового HTML- документа выглядит следующим образом:

<!DOCTYPE html>

<html>

<head>

<h2>Изменяем цвет текста в HTML</h2>

</head>

<body>

<h1> По умолчанию цвет текста содержимого страницы — черный. Конечно, если дополнительными тегами не задано другое оформление. </h1>

<h2 style=»color:#0000ff»> Включение атрибута style (style=»цвет в формате hex или цвет, заданный словом») с определенным значением цвета, изменит цвет текста в соответствии с Вашими пожеланиями. Текст этого заголовка-синий. </h2>

<p style=»color:#008000″> В предыдущем параграфе и в данном случае мы задали цвет текста в режиме HEX, который представляет собой шестнадцатеричную систему исчисления. Цвета зашифрованы в сочетаниях цифр от 0 до 9 и латинских букв от a до f. Цвет этого текста-зеленый. </p>

<p style=»color:#ff0000″> Запоминать номера цветов не нужно. Существует таблица цветов в HEX-формате. Найти ее очень просто, написав в поисковике соответствующий запрос. Данный параграф на сайте будет окрашен в красный цвет. </p>


<p style=»color:brown»> Легче представляется определение цвета текста английским словом. Цвет текста в этом примере коричневый. Основные цвета легко узнать и запомнить. Также любой сайт по изучению английского языка подскажет вам нужные слова. </p>

<p style=»color:#4B0082″> Использование цветов в hex-формате нужно в случае необходимости изменения цвета нераспространенного оттенка. Здесь мы применили цвет Indigo согласно таблице цветов. </p>

</body>

</html>

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

Подключение CSS в секцию <head>

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

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

Ниже приведен пример разметки, при которой все стили (в том числе изменение цвета текста HTML-документа), размещенные внутри тега парного тега <style>…</style> будут применены ко всему документу, если внутри парного тега <body>…</body> не заданы свои дополнительные параметры.

<!DOCTYPE html>

<html>

<head>

<style>


body {

color: green;

}

</style>

</head>

<body> Таким образом, специально задав цвет основной части документа, данный текст будет окрашен в зеленый цвет (green).

</body>

</html>

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

fb.ru

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

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

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

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

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

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

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Меняем цвет шрифта при помощи HTML</title>   </head>   <body>   <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>   </body>  </html>

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

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

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

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Меняем цвет шрифта при помощи CSS</title>   <style>   .nubex {   color:#fa8e47;   font-size: 150%;   }   .constructor {   color: blue;   }   .saitov {   color: green;   font-size: 125%;   }   </style>   </head>   <body>   <p><span class="constructor">Конструктор</span> <span class="saitov">сайтов</span> <span class="nubex">"Нубекс"</span></p>   </body>  </html>

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

nubex.ru

 

В этом уроке мы рассмотрим последний атрибут тега <font>, который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html, нужно применить атрибут color тега <font>:

<font color="цвет">

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="green">Текст зеленого цвета</font></p>   <p><font color="red">Текст красного цвета</font></p>   <p><font color="purple">Текст фиолетового цвета</font></p>   </body>  </html>    

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

<font color="#5AFF00">

 

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="#008000">Текст зеленого цвета</font></p>   <p><font color="#FF0000">Текст красного цвета</font></p>   <p><font color="#800080">Текст фиолетового цвета</font></p>   </body>  </html>    

Сохраним файл и посмотрим на результат:

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

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:

  <html>   <head>   <title>Задаем тексту несколько параметров</title>   </head>   <body>   <p>&nbsp</p>   <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="arial" size="+3" color="#00FF02">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="comic sans ms" size="+4" color="#FF002E">Задаем тексту шрифт, размер и цвет</font></p>   </body>  </html>    

Как всегда не забудем сохранить файл и посмотрим результат:

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.

saperka.ru

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

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

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение цвета текста</title> </head> <body> <h5 style="color:#FF0000">Красный текст заголовка</h5>  <p style="color:#0000FF">Синий текст параграфа.</p>  <p>  <em style="color:#008000">Зеленый курсив.</em>  <span style="color:#FF0000">Красный текст.</span>  </p> </body> </html>

Результат в браузере

seodon.ru

Добавляем стили для изменения цвета шрифта

В этом примере понадобится веб-страница с разметкой и отдельный CSS-файл, подключаемый внутри HTML-кода.

В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов <p> при помощи внешней таблицы стилей.

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

  1. Добавляем атрибут style к тегу <p>:
  1. Добавляем свойство color:
  1. Добавляем значение цвета после свойства:

Элементы <p> на странице станут чёрными.

Перед тем, как изменить цвет текста в HTML, нужно понимать, что в данном примере используется название цвета black. Несмотря на то, что это один из способов указания цвета в CSS, он имеет определенные ограничения.

Нет ничего страшного в том, чтобы использовать названия black (чёрный) и white (белый). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:

Этот CSS-код также сделает элементы <p> чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000, и результат будет тем же.

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

Например:

Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.

Перейдём к RGBA-значениям. RGBA поддерживают все современные браузеры, так что этот метод можно использовать, не беспокоясь о запасных вариантах:

Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. «1» означает «100%». То есть, текст будет полностью непрозрачным.

Если сомневаетесь в поддержке браузерами, то цвета можно указывать следующим образом:

В этом синтаксисе сначала идет hex-значение, которое затем переписывается RGBA-значением. Это значит, что устаревшие браузеры, в которых нет поддержки RGBA, будут использовать первое значение и игнорировать второе. Современные браузеры будут использовать второе значение. Это нужно учитывать, чтобы знать, как изменить цвет текста в таблице HTML.

Данная публикация представляет собой перевод статьи «How to Change the Font Color with CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Задание атрибута встроенного стиля текста

Чтобы понять, как изменить цвет текста в HTML, достаточно взглянуть на список атрибутов текстового поля. Среди них имеется ряд значений, определяющих стиль текста, заключенного в данные теги, которые указываются внутри ключевого слова style.

Для изменения цвета текста достаточно в выбранном участке текстового поля внутри открывающегося тега ввести слово style= ». Внутри данного атрибута можно указывать различные значения параметров — за изменение цветового оттенка текста отвечает значение атрибута color. Указав этот параметр, после знака двоеточия необходимо указать цвет, в который будет окрашены все символы данного поля. При этом, определяя оттенок, можно указать как явное значение цвета, например, red или yellow, так и его шестнадцатиричное значение, или rgb.

Вне зависимости от выбранного способа определения цвета, результат будет одинаковым в случае одинакового выбора оттенка. Таким образом, все следующие три примера выполнят одинаковые изменения текста — окрасят его в жёлтый цвет.

1. <h1 style=»color:yellow;»>текст</h1>

2. <h1 style=»color:#FFFF00;»>текст</h1>

3. <h1 style=»color:rgb(255,255,0);»>текст</h1>

Изменение цвета с использованием CSS

Использование таблицы стилей также позволяет решить, как изменить цвет текста в HTML. CSS полностью поддерживается всеми современными версиями HTML, а также позволяет изменять стиль сразу нескольких элементов страницы.

Чтобы понять, как изменить цвет текста в HTML с помощью CSS, не обязательно разбираться в формальном языке определения внешнего вида. Для определения атрибутов некоторого элемента, необходимо создать CSS-описание, которое записывается внутру тега <head>, и определяется тегом <style>. В этом разделе необходимо указать либо название класса, либо тип элемента, после чего перечислить атрибуты текста, которые необходимо изменить, как в примерах выше.

Так, чтобы сделать текст всех заголовков желтого цвета, необходимо написать следующие строки кода:

<style>

h1 { color: #FFFF00; }

</style>

Как выбрать более подходящий способ?

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

www.syl.ru

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

Попробуем изменить фон текста в HTML:

<title>HTML, фон, текст, цвет</title>
</head>
<body>
<h3 style="background-color:#ff9911">HTML Фон текста оранжевый</h3>
<p style="background-color:#ff0000; color:#ffffff">Цвет HTML текста белый, фон красный</p>

Результат: цвет HTML текста и его фон

Атрибут background-color определяет фон, в данном случае изменения затрагивают текст.

ab-w.net


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector