Как задать цвет текста в css

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

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 256 835.

В этой статье:

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

Метод 1 из 2:

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

• Этот метод также применим к внешним таблицам стилей (отдельным файлам CSS). Приведенные ниже примеры предназначены для файла HTML с внутренней таблицей стилей.

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

Введите , чтобы создать внутреннюю таблицу стилей. Когда тег находится внутри тега , таблица стилей, которая находится внутри тега , будет применена к любым элементам страницы. Таким образом, начало HTML-файла должно выглядеть следующим образом: [1] X Источник информации

 html> head> style> style> head> 

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

 html> head> style> body  > style> head> 

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

 html> head> style> body  color: > style> head> 

Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст синим, введите blue , rgb(0, 0, 255) или #0000FF .

 html> head> style> body  color: red; > style> head> 

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

 html> head> style> body  color: red; > h1  color: #00FF00; > p  color: rgb(0,0,255) > style> head> body> h1>Этот заголовок будет зеленым.h1> p>Этот параграф будет синим.p> Этот основной текст будет красным. body> html> 

Укажите стилевой класс CSS вместо того, чтобы менять элемент. Можно указать стилевой класс, а затем применить его к любому элементу страницы, чтобы изменить стиль элемента. Например, класс .redtext окрасит текст элемента, к которому применен этот класс, в красный цвет:

 html> head> style> .redtext  color: red; > style> head> body> h1 class="redtext"> Этот заголовок будет краснымh1> p>Этот параграф будет стандартным.p> p class="redtext">Этот параграф будет краснымp> body> html> 

CSS: Цвета

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

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

В этом уроке цвет будет указываться в формате HEX — это шестнадцатеричное представление цвета, где #ffffff означает белый цвет, а #000000 чёрный. Для удобства, в конце урока, оставлена ссылка на портал, где можно выбрать любой цвет и получить его значение в формате HEX . Подробнее про цветовые модели в CSS будет рассказано в одном из следующих уроков.

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

.info

Внимание! Важная информация

Чтобы установить цвет текста для всей страницы можно использовать селектор body . Свойство color является наследуемым, поэтому цвет будет установлен для всех текстовых элементов:

body

Задание

В редакторе добавьте элемент с классом violet и установите для него цвет равный #9400d3 . Для подключения стилей воспользуйтесь тегом .

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Выбрать цвет и получить его hex -код можно на HTML Color Codes

Сменить цвет текста кнопки

Все привет, есть три кнопки, если использовать псевдокласc :focus цвет текста кнопки меняется, но пока не поменялся фокус.
Что прописать в css чтобы при нажатии кнопки 1, текст её был желтый и не терял фокуса пока не нажмешь кнопку 2 или 3, а цвет текста кнопок 2 и 3 оставался белым пока не нажмешь на кнопку 2, она меняет цвет текста кнопки на желтый, а цвет текста кнопок 1 и 3 становился белым и т.д

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Изменить цвет текста и кнопки через CSS на стороннюю тему WordPress
Доброго времени! Установила на Denwer Worpress, после чего на последний установила тему. Теперь.

Сменить цвет
Нужно создать квадрат и закрасить определённым цветом, но ни знаю что быстрее будет работать, что.

Сменить цвет бг слайдера
В общем поставил шаблон на wordpress. Все нормально, но одно не устраивает — цвет фона под.

Не могу сменить цвет фона
Всем, доброе время суток! Ув. профессионалы прошу помощи не могу сменить цвет фона. В браузере.

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

Дайте код кнопок. Вы как всегда закрутили Что значит «не терял фокуса, пока не нажмешь кнопку 2 или 3»? А если фокус ушел на совсем другой элемент?

Регистрация: 17.09.2016
Сообщений: 450

1 2 3

input type="button" id="mobilButton1" name="" value="Кнопка1"> input type="button" id="mobilButton2" name="" value="Кнопка2"> input type="button" id="mobilButton3" name="" value="Кнопка3">

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

#mobilButton1 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1;/*цвет фона*/ color: #FFFFFF;/*цвет текста*/ font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000;/*тень*/ position: absolute; left: 67px; top: 58px; width: 200px; height: 40px; cursor: pointer; } #mobilButton1:focus { color: #f7f905; } #mobilButton3 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1; background-image: none; color: #FFFFFF; font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000; position: absolute; left: 69px; top: 165px; width: 200px; height: 40px; cursor: pointer; } #mobilButton3:focus { color: #f7f905; } #mobilButton2 { border: 0px #FFFFFF solid; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border-radius: 5px; background-color: #4169E1; background-image: none; color: #FFFFFF; font-family: "Times New Roman"; font-weight: bold; font-size: 20px; /*-moz-box-shadow: 2px 2px 4px #000000; -webkit-box-shadow: 2px 2px 4px #000000;*/ box-shadow: 2px 2px 4px #000000; position: absolute; left: 69px; top: 112px; width: 200px; height: 40px; cursor: pointer; } #mobilButton2:focus { color: #f7f905; }

Добавлено через 6 минут
Схема работы такова, нажал на кнопку1 текст стал желтый, а текст кнопок 2 и 3 остается белым, нажал на кнопку2, текст кнопки2 стал желтый, а текст кнопок 1 и 3 поменялся на белый, и т.д. чтобы можно было видеть какая кнопка сейчас нажата. если использовать :focus то цвет желтый пока есть фокус на этой кнопки стоит щелкнуть влюбое место фокус теряется и цвет становится белым хотя нажата именно та кнопка.

Универсальный селектор

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

Для обозначения универсального селектора применяется символ звёздочки ( * ) и в общем случае синтаксис будет следующий.

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

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

Пример 14.1. Использование универсального селектора

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

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

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

2. Что означает следующая запись в стилях?

1. Установить фоновый цвет для всех элементов веб-страницы.
2. Задать цвет для всех текстовых элементов документа.
3. Установить фоновый цвет для всех элементов внутри контейнера .
4. Установить фоновый цвет только для тегов , вложенных в другие контейнеры.
5. Зеленый цвет фона для всех тегов в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

• Ut wisis enim ad
• Quis nostrud exerci
• Tution ullamcorper suscipit

1. Lorem
2. consectetuer
3. Ut
4. nostrud
5. Nisl

Ответы

2. Установить фоновый цвет для всех элементов внутри контейнера .