Цвет шрифта на сайте можно задать при помощи 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 больше или меньше, соответственно.

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

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

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

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

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

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

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

Инструкция

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

и

:

Заголовок

Подзаголовок следующего по важности уровня следует поместить между тегами

и

и так далее. Последним из предусмотренных уровней является шестой -

и

.

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

Впишите между открывающим и закрывающим тегами style описания стилей для заголовков каждого уровня, внешний вид которого вы хотите изменить. Например, если надо изменить только внешний вид заголовков первого уровня, то этот код может выглядеть так:Здесь h1 указывает, что описание в фигурных скобках относится к тегу h1 и называется «селектором». Параметр color задает цвет текста, параметр font-size - размер шрифта, font-style со значением italic - наклонное начертание букв, font-weight со значением bold - , margin-top - , margin-bottom - отступ снизу. Для заголовков второго уровня надо добавить аналогичный блок с селектором h2 и т.д.

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

Видео по теме

Вам понадобится

• Компьютер, интернет, доступ к содержимому сайта.

Инструкция

Если ваши приоритеты поменялись, и это сказалось на темах сайта, обязательно отразите изменения в заголовке. Выбирая новое название, планируйте, чтобы имя сайта могло стать брендом, если не мировым, то хотя бы для постоянных читателей ресурса. В общем, «как вы яхту назовете, так она и поплывет».

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

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

Найдите на открывшейся странице вкладку, которая называется «Параметры» или «Настройки», или «Общие». И там поищите окошко «Название сайта», куда можно вписывать текст.

Внесите свое новое название в это окошечко. Обязательно нажмите кнопку сохранения, которая на разных web-движках именуется по-разному – «Сохранить», «Опубликовать», «Обновить».

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

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

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

body{ color: red; }

body { color : red ;

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

Форматы записи цвета

Возможно, у вас имеются небольшие познания в области веб-дизайна? В таком случае вы должны знать о том, что существуют разные цветовые режимы. Например, rgb, rgba, hsl, hex и т.д. Конечно, самый простой способ задать оттенок – просто написать ключевое слово. Мы так и сделали в примере выше, значение red делает буквы красными, blue – синими, brown – коричневыми. Это просто названия цветов по-английски.

Единственное, что вам нужно знать в этом случае – название нужного цвета. Их вы можете посмотреть в интернете в любой таблице. Следующий популярный способ задать цвет – записать его шестнадцатеричный код. Это так называемый hex-формат. Примеры:

p{ color: #000; } /* Текст в абзацах будет черным. */ table{ color: #fff; } /* Содержимое в таблицах будет белым. */

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

Rgb – еще один популярный формат записи. Он расшифровывается просто – red, green, blue. Цвет в этом формате задается так:

#footer{ color: rgb(234, 22, 56); }

#footer{ color : rgb (234 , 22 , 56 ) ;

Элемент с идентификатором footer получит указанный цвет. Доля красного составит 234, зеленого – 22, синего – 56. Эти значения можно писать от 0 до 255. Соответственно наш оттенок получится ближе к красному. В Paint вы можете добавлять цвета в палитру с помощью изменения насыщенности трех основных цветов.

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

Rgba – полупрозрачный текст!

Да, это новый режим записи, который в графических редакторах есть давно, но именно в веб-дизайне появился относительно недавно. Записывается так:

a{ rgba(255, 12, 22, 0.5); }

rgba (255 , 12 , 22 , 0.5 ) ;

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

Неправильный способ задания цвета

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

Как определить цвет для произвольного фрагмента

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

Просто заключаем нужный фрагмент в теги span. Прописываем внутри тега атрибут class, которому задаем произвольное, но понятное нам значение. Например, так:

Все, теперь остается только обратиться к селектору в css.

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

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

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

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

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

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

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

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

Заголовок статьи.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После чего, снизу появится дополнительное окно, разделенное на две части. Как и в случае с Google Chrome. Левая колонка с html-кодом страницы. А правая колонка со стилями CSS. При выборе определенного элемента он будет подсвечен, как снизу, в коде страницы, так и на самой странице.

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

После определения цвета. Открываем файл style.css и добавляем или меняем нужные стили. Сохраняем и проверяем результат.

Внимание! Прошу обратить внимание. Если вы пользователь веб-браузера Mozilla Firefox или Opera. И вам что-то не понятно по теме. Прежде, чем задать вопрос, прочтите подробный вариант, описанный для браузера Google Chrome. Все действия абсолютно идентичны во всех веб-браузерах. А также, не забудьте перед редактированием стилей CSS, сделать .

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

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

Размеcтите курсор внутри тега . Стили определяются внутри этого тега, если используется внутренняя таблица стилей.

Введите