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

Цвет шрифта можно изменять стилизации внутри HTML-документа . Однако рекомендуется использовать именно внешние таблицы CSS-стилей .

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

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

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

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

При помощи внешней таблицы стилей.

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

1. Добавляем атрибут style к тегу

   :

1. Добавляем свойство color :

1. Добавляем значение цвета после свойства:

p { color: black;}

Элементы

На странице станут чёрными.

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

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

p { color: #000000; }

Этот CSS-код также сделает элементы

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

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

Например:

p { color: #2f5687; }

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

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

p { color: rgba(47,86,135,1); }

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

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

p { color: #2f5687; color: rgba(47,86,135,1); }

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

Перевод статьи “How to Change the Font Color with CSS ” был подготовлен дружной командой проекта .

Хорошо Плохо

Шестнадцатеричный цвет указывается в формате: #RRGGBB, где шестнадцатеричные целые числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета. Все значения…

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

Форматирование текста - одна из главных функций редактора

Цветовое изменение шрифта

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

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

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

Цветовое выделение отдельного фрагмента документа

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

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

Вернуть стандартный вид электронному указателю поможет повторный клик по ранее представленной команде .

Отмена выбранного действия

Убрать разноцветное выделение текста в Word следует точно такими же действиями, которыми он был применён. Всё, что нужно для работы с выделением шрифта или области вокруг него, располагается в одной вкладке, которая называется «Главная». Убрать из документа жирный и курсивный шрифты позволит повторное нажатие на определённые кнопки центрального меню, в частности, «Ж» и «К». Правда, прежде чем изменить и убрать выделение, нужно «показать» компьютеру место, которое подлежит форматированию. Помогают убрать цвет шрифта кнопки «Нет цвета» и «Авто». Изменить стиль форматирования следует с помощью применения команды «Обычный стиль».

Надоели стандартные шрифты Windows? Хочешь сделать свой компьютер уникальным?

Тогда просто поменяй их! Как? Узнай из нашей статьи.

Изменить стиль текста

Текстовое оформление для Windows можно устанавливать для каждого из интерфейсов по отдельности.

При этом в настройках программы в целом никаких перемен не произойдет.

Сделать это совсем не сложно.

1 Откройте вкладку на панели задач «Цвет и оформление окон». Название может немного отличатся, в зависимости от установленной на компьютере версии. Но отвечает закладка за одну и ту, же функцию.

2 Теперь необходимо найти пункт «Объект», в котором определится с нужным интерфейсом, для которого требуются изменения стиля в написании текста.

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

4 Подтвердите действия кнопкой «Ок» .

5 Для того что б установки начали действовать, нажмите еще раз «Ок».

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

К сожалению, поделать с этим ничего нельзя – так заложено по умолчанию в программе.

Существует еще один вариант

Теперь можно распаковать архив в папку Шрифты (Fonts) системного каталога Windows . После таких действий будет добавлен новый значок с соответствующим видом текста.

Для просмотра, требуется кликнуть левой кнопкой мышки по файлу.

Рассмотрим один из самых простых вариантов, как изменить размер шрифта на компьютере windows 8:

1 Сначала необходимо удалить стиль для текста, предложенный системой. По умолчанию для данной вариации программного обеспечения используется Segoe UI. Сохранить изменения.

2 Открываем заново и следуем по такому пути HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts.

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

3 Проделываем ту же процедуру, которая уже описана выше - следуем по пути.

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitute

4 Необходимо создать временную папку. Установить необходимые перемены и выбрать понравившееся оформление. На этом настройки завершены.

Изменяем параметры шрифта

Windows 8 обделена большим количеством функциональных возможностей, которыми обладали предыдущие версии.

Осталось лишь мизерное количество настроек, касающихся шрифта, которыми может управлять пользователь.

Чтобы изменить параметры в тексте следует выполнить такие действия:

• Необходимо правой кнопкой мыши вызвать окно с меню и кликнуть по пункту «Разрешение экрана» (Screen resolution).

• Откроется окно, в котором следует найти раздел «Сделать текст и другие элементы больше или меньше» либо на иностранном языке «Make text of other items larger or smaller» .

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

• Можно сделать размер букв больше или меньше. Установить понравившийся стиль.
• Так же необходимо будет указать в конфигурациях область действия настроек. Например, только текстовые документы.
• Сохранить изменения.

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

Попробуем изменить размеры выбранного шрифта другим способом

Требуется зайти в Панель управления в раздел «Принтеры и факсы» .

Теперь можно кликнуть мышей по разделу . А в окне, которое всплывет, найти раздел «Экран» . Щелкните по нему мышкой.

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

Можно определиться с

Чтобы выполнить такие перемены, требуется откорректировать реестр.

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

Через «Пуск» необходимо зайти в панель управления ПК. Отыскать раздел «Оформление и персонализация» , а в нем подпункт «Шрифты» .

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

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

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

Определитесь, какой подойдет именно вам, и запишите его название, чтобы не забыть.

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

Segoe UI – это тот вариант, который установлен по умолчанию. Его предлагает десятая версия виндовс.

Windows Registry Editor Version 5.00 «Segoe UI (TrueType)»=»» «Segoe UI Bold (TrueType)»=»» «Segoe UI Bold Italic (TrueType)»=»» «Segoe UI Italic (TrueType)»=»» «Segoe UI Light (TrueType)»=»» «Segoe UI Semibold (TrueType)»=»» «Segoe UI Symbol (TrueType)»=»» «Segoe UI»=»Выбранный вами шрифт»

Конечная строчка должна иметь название, избранного пользователем варианта текстового оформления. Сохраните написанное.

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

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

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

В общем статью, я решил посвятить тому, как изменить цвет шрифта в 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 .

Наверняка вы замечали, что на многих сайтах размер шрифта очень мелкий, из-за чего приходится напрягать зрение, увеличивать буквы с помощью мыши (Ctrl + крутим колесико мышки) и вообще чувствовать себя некомфортно. Хочется поскорее покинуть такой сайт. Тем более что есть еще один немаловажный момент: в последнее время все больше людей выходят в интернет с мобильных устройств, а там, поскольку экран маленький, графические отображения играют большую роль.
Между тем, решить вопрос, как говорится, раз чихнуть. Для этого откройте любую свою статью, выделите кусочек текста, щелкните по нему правой кнопкой мыши и выберите пункт «Исследовать элемент».После этого в нижней части экрана появится окошко кода, где с правой стороны увидите вот такую картину.
В строке font-size:15px; нужно поменять цифру в большую сторону. Щелкните по ссылке «Style.css:739», окроется файл «Style.css», прокрутите вниз и найдите строку 739, где и поменяйте цифру на нужную вам. Для тех, кто панически боится кодов, скриптов, любых изменений на блоге: на этом этапе вам нечего опасаться, вы просто смотрите, что произойдет, если сделаете так-то и так-то. После того как перезагрузитесь, все изменения исчезнут и страница примет прежний вид.

А чтобы они вступили в силу нужно редактировать сам файл. Для этого пройдите по адресу «Внешний вид» - «Редактор», откройте файл «Style.css», нажмите Ctrl+f и в появившееся окошко введите такую строку кода - #main_content_post p. Внесите изменения и обновите файл. Должен предупредить, что чрезмерно большие буквы тоже плохо влияют на восприятие, все хорошо в меру.

Как изменить размер шрифта заголовка?

Поступаем аналогичным образом - щелкаем непосредственно по названию сайта правой кнопкой мыши - «Исследовать элемент» — в правой колонке, прокручивая вниз, находим строку font-size. Переходим по ссылке в таблицу стилей, находим нужную строку и занимаемся творчеством. Но тут есть один нюанс: при увеличении шрифта заголовка, одновременно с ним увеличиваются на главной странице и другие элементы - автор, рубрики, комментарии. Они как-то связаны между собой и смотрится это, честно говоря, несколько непрезентабельно.

Решение находится в header.php, потому что заголовок относится именно к этому файлу. В строку вывода названия сайта добавим такую команду - padding: 0px;»>. Тем самым мы задали размер только заголовку. Таким же образом можно редактировать и описание сайта. Чтобы при этом чувствовать себя более уверенно, сделайте резервное копирование. Если что пошло не так, можно откатиться назад и в панели управления хостинга.

Как изменить цвет шрифта на сайте?

Порядок действий тот же, что и на примерах выше, единственно, будем искать слово «color». Если из предложенных вариантов вам ничего не подошло, но где-то вы видели приятный для глаза цвет, узнать его html-код поможет замечательная программка Pixie, советую.

И в заключение несколько слов о стиле шрифта, отвечает за это строка «font-family». Обычно указываются 3 различных вида, выстроенные по приоритету, то есть на вашем сайте используется шрифт, стоящий под номером один. Меняйте местами, экспериментируйте, творите.