Как изменить цвет текста в html
Перейти к содержимому

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

  • автор:

Задать цвет текста html: Атрибут color | htmlbook.ru

Установить цвет фона и текста для однострочного текстового поля формы.

Решение

Цвет фона элемента задается стилевым свойством background-color, а цвет текста с помощью color, эти свойства необходимо добавить к селектору INPUT. Поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.

Пример 1. Цвет текста и фона в текстовом поле

    Цвет текста и фона   

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем colortext, он добавляется к тегу с помощью конструкции.

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется атрибутtype. Используя запись INPUT[type=»text»] задаем стиль для всех элементов , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).

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

XHTML 1.0CSS 2.1IECrOpSaFx

    Цвет фона и текста в поле INPUT[type="text"] 

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

Навигация по статье:

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

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

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

Значение цвета можно задавать несколькими способами:

  • При помощи кодового названия (Например: red, black, blue)
  • В шестнадцатиричном формате (Например: #000000, #ccc)
  • В формате rgba (Например: rgba(0,0,0,0.5))

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

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML


CSS

Вместо color-text вы можете указать свой класс.

Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS.

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

  1. 1.Находи вверху HTML страницы тег . Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
  2. 2.Перед строкой добавляем теги

    .

  3. 3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:
    Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.

    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I

    Aleq

    Попробуйте сами!

    ::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.

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

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

    Форматирование текста HTML

    HTML содержит несколько элементов для определения текста со специальным значением.

    Пример

    Этот текст выделен жирным шрифтом

    Этот текст выделен курсивом

    Это нижний индекс и верхний индекс

    Элементы форматирования HTML

    Элементы форматирования были разработаны для отображения специальных типов текста:

    • — полужирный текст
    • — Важный текст
    • — Курсив
    • — выделенный текст
    • — выделенный текст
    • — Текст меньшего размера
    • — Удален текст
    • — вставленный текст
    • — Подстрочный текст
    • — Надстрочный текст

    HTML

    и Элементы

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

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

    Элементы HTML

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

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

    Элемент HTML определяет выделенный текст. Содержимое внутри обычно отображается курсивом.

    Совет: Программа чтения с экрана произнесет слова на с ударением, используя словесное ударение.

    HTML

    Элемент HTML определяет мелкий текст:

    HTML

    Элемент HTML определяет текст которые следует отметить или выделить:

    HTML-элемент

    Элемент HTML определяет текст который был удален из документа.Браузеры обычно задевают через удаленный текст:

    HTML

    Элемент HTML определяет текст который был вставлен в документ. Браузеры обычно подчеркивают вставленные текст:

    HTML

    Элемент HTML определяет подстрочный текст. Подстрочный текст отображается на полсимвола ниже нормальной строки, и иногда отображается более мелким шрифтом.Подстрочный текст можно использовать для химические формулы, такие как H 2 O:

    HTML-элемент

    Элемент HTML определяет надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного линия, а иногда отображается более мелким шрифтом. Можно использовать надстрочный текст для сносок, например WWW [1] :

    Упражнения HTML

    Элементы форматирования текста HTML

    Тег Описание
    Определяет полужирный текст
    Определяет выделенный текст
    Определяет часть текста другим голосом или настроением
    Определяет меньший текст
    Определяет важный текст
    Определяет текст с нижним индексом
    Определяет надстрочный текст
    Определяет вставленный текст
    Определяет удаленный текст
    Определяет выделенный / выделенный текст

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

    Что нужно знать
    • Добавьте к тегу атрибут Style: style = «color: #FFFFFF»
    • Добавьте раздел стилей в HTML.
    • Создайте отдельную таблицу стилей CSS : color: #FFFFFF;

    В этой статье объясняется, как указать цвета текста в HTML тремя разными способами. Он также объясняет, как вы можете указать цвета, которые вы хотите для своего текста.

    3 способа указания цвета

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

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

    Программы, необходимые для изменения цветов HTML

    Минимальный набор инструментов для настройки цвета текста в HTML — это программа для редактирования самого HTML и браузер для его тестирования. Вы можете редактировать HTML в текстовом редакторе, простой программе, такой как Блокнот, которая записывает чистый текст, или в редакторе кода, оптимизированном для обработки синтаксиса программирования. Вы не можете использовать текстовый процессор, такой как Microsoft Word, LibreOffice или Google Docs, потому что эти программы вставляют невидимое форматирование, называемое управляющими символами , которые несовместимы с HTML.

    Любой веб-браузер может отображать HTML-файл, который вы хотите изучить. Перейдите в папку, содержащую файл HTML, и щелкните по нему, и ваш браузер должен отобразить его. Если нет, щелкните файл правой кнопкой мыши и откройте его в браузере.

    Метод 1. Оберните текст в теги с помощью цветового стиля

    Самый простой метод раскраски текста — это добавить атрибут стиля и желаемое значение, состоящее из ключевого слова color и спецификации цвета (шестнадцатеричный код, код RGB или имя), в тег HTML, обертывающий целевой текст. .

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

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

    Метод 2. Добавление раздела стилей в заголовок документа HTML

    Имена тегов HTML здесь те же, что и в разделе

    , но без угловых скобок. Например,

    Однако вы также можете стилизовать HTML по классу, что похоже на метку, применяемую для выбора экземпляров тега в разделе

    . Например, если вам нужен только один конкретный

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

    Метод 3. Создание и связывание отдельного документа CSS

    Самый организованный способ установить цвет текста и бесконечный набор других стилей — это создать отдельную таблицу стилей CSS и указать на нее ссылку в HTML-документе.

    Поместите свои стили, отформатированные так же, как в

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

    В HTML мы можем изменить цвет любого текста следующими способами:

    1. Использование тега HTML
    2. Использование встроенного атрибута стиля
    3. Использование внутреннего CSS

    1.Использование HTML-тега

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

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

    Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать тег Html.

    Изменить цвет текста с помощью тега HTML JavaTpoint
    Учебное пособие по HTML
    Как изменить цвет текста в HTML

    Шаг 2: Теперь переместите курсор в начало текста, цвет которого мы хотим изменить. Затем введите в этой позиции пустой тег Html .

    Однострочный текст и инструкции

    Шаг 3: Затем мы должны закрыть тег шрифта в конце текста, цвет которого мы хотим изменить.

    Однострочный текст и утверждения

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

    Изменить цвет текста с помощью тега HTML JavaTpoint
    Учебное пособие по HTML
    Как изменить цвет текста в HTML

    Проверить это сейчас

    Шаг 5: И, наконец, нам нужно сохранить код Html в текстовом редакторе и запустить код.После выполнения мы увидим результат в браузере. На следующем снимке экрана показан вывод вышеуказанного HTML-кода:

    2. Использование атрибута встроенного стиля

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

    Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать атрибут стиля для изменения цвета текста.

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

    Шаг 2: Теперь переместите курсор в начало текста, цвет которого мы хотим изменить.Затем введите встроенный атрибут стиля в любой элемент. Здесь мы используем тег

    Шаг 3: На этом шаге мы должны указать имя цвета в качестве значения. Мы можем дать название цвета в трех формах:

    1. Мы можем ввести название цвета
    2. Мы также можем ввести значение RGB для цвета
    3. Мы также можем ввести шестнадцатеричное значение цвета.

    Шаг 4: Затем мы должны закрыть элемент в конце текста, цвет которого мы хотим изменить.

    Шаг 4: И, наконец, сохраните код Html, который изменяет цвет текста с помощью атрибута стиля CSS.

    Изменить цвет с помощью атрибута стиля

    Эта страница поможет вам понять, как изменить цвет текста.

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

    Проверить это сейчас

    Вывод вышеуказанного кода показан на следующем снимке экрана:

    2. Использование внутреннего CSS

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

    Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для изменения цвета текста.

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

    Шаг 2: Теперь мы должны поместить курсор в тег заголовка документа Html, а затем определить стили внутри тега

    Шаг 3: Теперь мы должны ввести определенный селектор элемента перед текстом, цвет которого мы хотим изменить.

    Изменить цвет с помощью внутреннего CSS Тело < оранжевый цвет; >п < цвет: зеленый; >Эта страница поможет вам понять, как изменить цвет текста.

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

    Проверить это сейчас

    Вывод вышеуказанного Html-кода показан на следующем снимке экрана:

    HTML | Атрибут цвета

    HTML | Атрибут цвета

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

    Синтаксис:

    Значения атрибутов:

    • color_name: Устанавливает цвет текста с помощью имени цвета. Например: «красный» .
    • hex_number: Устанавливает цвет текста с помощью шестнадцатеричного кода цвета. Например: «# 0000ff» .
    • rgb_number: Устанавливает цвет текста с помощью кода RGB. Например: «rgb (0, 153, 0)» .

    Примечание. Атрибут цвета не поддерживается HTML5.

    Пример:

    Начертание шрифта HTML Атрибут

    Как изменить цвет текста в HTML? Примеры С#

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

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

    Если вы хотите узнать больше о цветовых кодах RGB, RGBA, HSL, HSLA и HEX, посетите статью Цветовые коды HTML. Примеры кода HTML о том, как изменить цвет текста, вы можете найти в статье Работа с цветом HTML.

    Изменить цвет текста с помощью встроенного CSS (Inline CSS)

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

    Например, в следующем фрагменте кода показано, как указать свойство CSS color для элемента HTML

    в существующем файле file.html. Сделайте несколько шагов:

    1. Загрузите существующий файл HTML.
    2. Найдите, например, первый элемент абзаца, чтобы установить атрибут стиля. Используйте метод GetElementsByTagName( name ) класса Element, который возвращает первый элемент с заданным именем тега в порядке документа.
    3. Используйте свойство Style элемента HTMLElement для установки атрибута style со свойством color .
    4. Сохраните измененный HTML-документ.

    C# code

     1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for HTML document saving  6 string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the first paragraph element to set a style attribute 15 var paragraph = (HTMLElement)document.GetElementsByTagName("p").First(); 16 17 // Set the style attribute with color property 18 paragraph.Style.Color = "#8B0000"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));

    JavaScript code

    1script> 2 // Find the first paragraph element to set a style attribute 3 var paragraph = document.getElementsByTagName("p")[0]; 4 5 // Set the style attribute with color property 6 paragraph.style.color = "#8B0000"; 7script>

    В результате текст первого абзаца в файле HTML будет перекрашен в цвет #8B0000 DarkRed (см. рисунок а, проскрольте ниже).

    Вы можете скачать полные примеры и файлы данных с GitHub.

    Изменить цвет текста с помощью внутреннего CSS (Internal CSS)

    Внутренний CSS популярен для применения свойств стиля к отдельным страницам. Вы можете применить внутренние таблицы стилей CSS, поместив элемент в раздел страницы. Например, вы хотите изменить цвет всех абзацев на веб-странице. Для этого нужно добавить p в раздел заголовка HTML-файла. Сделайте несколько шагов:

    1. Загрузите существующий файл HTML.
    2. Создайте элемент и назначьте значение цвета текста для всех элементов абзаца. Используйте метод CreateElement( localName ), который создает элемент указанного типа.
    3. Найдите элемент документа и добавьте в него элемент .
    4. Сохраните измененный HTML-документ.

    C# code

     1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for HTML document saving  6 string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Create a element and assign the text color value for all paragraph elements 15 var style = document.CreateElement("style"); 16 style.TextContent = "p < color:#8B0000 >"; 17 18 // Find the document's element and add a element to it 19 var head = document.GetElementsByTagName("head").First(); 20 head.AppendChild(style); 21 22 // Save the HTML document to a file 23 document.Save(Path.Combine(savePath));

    JavaScript code

    1script> 2 // Create a element and assign the text color value for all paragraph elements 3 var style = document.createElement("style"); 4 style.textContent = "p < color:#8B0000 >"; 5 6 // Find the document's element and add a element to it 7 var head = document.getElementsByTagName("head")[0]; 8 head.appendChild(style); 9script>

    Чтобы изменить цвет текста, вы можете использовать рассмотренные в этой статье примеры C# с элементами HTML

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

    На рисунке показаны результаты изменения цвета текста в соответствии с использованием встроенного CSS (a) и внутреннего CSS (b):

    Текст “Два фрагмента HTML-документа с цветным текстом абзаца”

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

    Цвета

    Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.

    Цвет

     class="text-primary">.text-primary  class="text-secondary">.text-secondary  class="text-success">.text-success  class="text-danger">.text-danger  class="text-warning">.text-warning  class="text-info">.text-info  class="text-light bg-dark">.text-light  class="text-dark">.text-dark  class="text-muted">.text-muted  class="text-white bg-dark">.text-white 

    Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.

    href="#" class="text-primary">Primary link

    href="#" class="text-secondary">Secondary link

    href="#" class="text-success">Success link

    href="#" class="text-danger">Danger link

    href="#" class="text-warning">Warning link

    href="#" class="text-info">Info link

    href="#" class="text-light bg-dark">Light link

    href="#" class="text-dark">Dark link

    href="#" class="text-muted">Muted link

    href="#" class="text-white bg-dark">White link

    Цвет фона

    Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .

    .bg-secondary

     class="p-3 mb-2 bg-primary text-white">.bg-primary  class="p-3 mb-2 bg-secondary text-white">.bg-secondary  class="p-3 mb-2 bg-success text-white">.bg-success  class="p-3 mb-2 bg-danger text-white">.bg-danger  class="p-3 mb-2 bg-warning text-dark">.bg-warning  class="p-3 mb-2 bg-info text-white">.bg-info  class="p-3 mb-2 bg-light text-dark">.bg-light  class="p-3 mb-2 bg-dark text-white">.bg-dark  class="p-3 mb-2 bg-white text-dark">.bg-white 

    Градиентный фон

    Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient- . По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.

    .bg-gradient-primary
    .bg-gradient-secondary
    .bg-gradient-success
    .bg-gradient-danger
    .bg-gradient-warning
    .bg-gradient-info
    .bg-gradient-light
    .bg-gradient-dark

     class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary  class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary  class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success  class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger  class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning  class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info  class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light  class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark 
    Специфические случаи

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

    Использование вспомогательных технологий

    Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

    Цветной вывод текста в Python

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

    Сделать текст цветным можно двумя способами: использовать встроенные средства языка или библиотеки. Каждый способ имеет плюсы и минусы, также существуют нюансы, касающиеся изменения цвета текста в консоли Windows.

    C помощью встроенных средств языка

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

    ANSI коды работают на большинстве дистрибутивов Linux, но не поддерживаются консолью операционной системы Windows до Windows 10. В статье есть отдельный пункт про то, как запускать на Windows!

    На разных дистрибутивах Linux и в Windows 10 цвет текста, созданный при помощи одного и того же ANSI кода, может отличаться. Это зависит от настроек консоли, её кастомизации пользователем и некоторых других факторов.

    Изменять цвет текста с помощью ANSI кодов можно разными способами, например, использоваться функции или даже написать свой класс-обёртку для ANSI.

    Использовать ANSI коды просто, для этого нужно знать базовый синтаксис и сами коды. Разбор на примере кода «\033[31m\033[43m»:

    • \033 — обозначение того, что дальше идет какой-то управляющий цветом код;
    • [31m — цвет текста (красный);
    • [43m — цвет фона (жёлтый).

    После вывода этого в консоль, далее выводимая информация будет красного цвета на жёлтом фоне. Сбросить к начальным значениям : \033[0m .

    Базовые коды:

    • \033[0-7m — это различные эффекты, такие как подчеркивание, мигание, жирность и так далее;
    • \033[30-37m — коды, определяющие цвет текста (черный, красный, зелёный, жёлтый, синий, фиолетовый, сине-голубой, серый);
    • \033[40-47m — коды, определяющие цвет фона.

    Цвета

    Цвет Текст Фон
    Чёрный 30 40
    Красный 31 41
    Зелёный 32 42
    Жёлтый 33 43
    Синий 34 44
    Фиолетовый 35 45
    Бирюзовый 36 46
    Белый 37 47

    Эффекты

    Код Значение
    0 Сброс к начальным значениям
    1 Жирный
    2 Блёклый
    3 Курсив
    4 Подчёркнутый
    5 Редкое мигание
    6 Частое мигание
    7 Смена цвета фона с цветом текста

    Функции для вызова

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

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

    def out_red(text): print("\033[31m <>" .format(text)) def out_yellow(text): print("\033[33m <>" .format(text)) def out_blue(text): print("\033[34m <>" .format(text)) out_red("Вывод красным цветом") out_yellow("Текст жёлтого цвета") out_blue("Синий текст")

    Мы меняли только цвет текста, но можно менять и цвет фона, добавлять дополнительные стили. Например, чтобы вывести подчёркнутый текст белого цвета на синем фоне, нужно написать так:

    print("\033[4m\033[37m\033[44m<>\033[0m".format("Python 3"))

    Вот так будет выглядеть вывод:

    Обратите внимание на строку print("\033[4m\033[37m\033[44m<>\033[0m".format("Python 3")) .

    Здесь мы вывод осуществляли следующим образом:

    • \033[4m — подчёркнутый;
    • \033[37m — белая надпись;
    • \033[44m — синий фон;
    • <> — заменится на «Python 3»;
    • \033[0m — сброс к начальным значениям.

    Как вывести цветной текст в консоль на Windows

    В Linux по умолчанию встроена поддержка ANSI кодов консолью, а в Windows — нет. Это объясняется тем, что для линукса консоль является основным рабочим инструментом. В Windows консоль используется редко, поэтому нет смысла встраивать в неё подобные вещи.

    Однако в Windows 10, начиная с версии Threshold 2, разработчики добавили в консоль поддержку управляющих кодов. Однако из-за того, что далеко не все пользуются новой ОС, писать консольные приложения с цветным текстом все ещё приходится с помощью дополнительных библиотек.

    Так библиотека colorama поддерживает работу с Windows 10! Поэтому рекомендуется её использование.

    Для того, чтобы код, написанный с помощью внутренних средств Python 3 или с помощью библиотеки termcolor заработал в Windows 10, надо включить поддержку ANSI для stdout в запущенной консоле.

    Сделать это можно следующим образом:

    import ctypes kernel32 = ctypes.windll.kernel32 kernel32.SetConsoleMode(kernel32.GetStdHandle(-11), 7)

    Вывод цветного текста в консоль с colorama

    Colorama — самая популярная библиотека для вывода цветного текста на Python 3. Colorama позволяет использовать ANSI коды не только в Linux, но и в Windows.

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

    Использование сторонней библиотеки, такой как colorama, не приводит к каким-то негативным эффектам. Перед использованием библиотеки colorama, её следует установить с помощью команды в консоле pip install colorama .

    Приведём пример использования colorama:

    import colorama from colorama import Fore, Back, Style colorama.init() print(Fore.RED + 'Красный текст') print(Back.BLUE + 'Синий фон') print(Style.RESET_ALL) print('Снова обычный текст')

    Здесь мы импортировали модули для работы с текстом и фоном. И так же как и раньше мы выводили всё встроенными средствами Python, вывели всё в консоль.

    Стоит обратить внимание на функцию init. Если её забыть запустить, то не будет поддерживаться вывод на Windows 10.

    Только теперь нам не надо писать \033[44m, а достаточно написать Fore.BLUE, что конечно же удобно. Style.RESET_ALL — это сброс цветов консоли к начальным значениям.

    Цветной текст с помощью termcolor

    Эта библиотека даёт программисту исчерпывающий инструментарий для работы с цветом текста.

    Часто termcolor используют вместе с colorama. Termcolor используют непосредственно для написания кода, действительно, её синтаксис более удобный и простой.

    Для установки библиотеки termcolor следует выполнить в консоле команду pip install termcolor .

    from termcolor import colored, cprint print(colored('Привет мир!', 'red', attrs=['underline'])) print('Привет, я люблю тебя!') cprint('Вывод с помощью cprint', 'green', 'on_blue')

    Здесь мы воспользовались функциями colored и cprint. Первая позволяет создать строку для последующего вывода с необходимыми параметрами цветов и эффектов. Вторая сразу производит вывод в консоль.

    Заключение

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

    При выборе между библиотеками colorama и termcolor, я бы остановился бы на colorama. Не только исходя из её большей популярности, но и из-за того, что она поддерживает работу с командной строкой Windows 10. Хотя cprint удобная функция в termcolor.

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

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