Как в css задать цвет текста – Применение цвета к HTML элементам с помощью CSS — Веб-технологии для разработчиков

Как изменить цвет текста при помощи css

Довольно часто веб разработчикам требуется поменять цвета на отдельных участках текста. Если это нужно сделать срочно и на скорую руку, то можно прописать требуемые значения color прямо в html-коде.

Например, поменяем цвет для отдельного тега вот так:
 

Здесь мы поменяли цвет текста на красный для жирного шрифта.

Или изменим некоторые области текста, который расположен между тегами  

Синтаксис примерно одинаковый, который описан чуть выше: 

Здесь какой-нибудь текст из вашего сайта

В этом примере цвет текста между тегами <p>…</p> поменяется на зеленый.

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

Так что давайте все то же самое мы сделаем при помощи css.
 

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

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

p{font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; font-weight: 100; }/*здесь мы установили серый цвет для всех элементов расположенных между тегами p*/ h2{font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: blue; } /*для заголовка с тегом h2 установлен синий цвет*/ ul,li{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: green; }/*все буквы маркированного списка будут окрашены в зеленый цвет*/

Но текст не обязательно может быть между тегами <p>,<h2>,<ul>,<li> и т.д.

Текст может быть и в обычных контейнерах <div>, <span>. Тогда вам нужно будет прописать конкретные атрибуты класса или селектора id.
 

Здесь какой-нибудь текст из вашего сайта

Тогда в файле стилей нужно прописать стили для класса ”txt”: 

div.txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: black; } /*задан черный цвет*/

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

Здесь какой-нибудь текст из вашего сайта

В файле стилей уже нужно прописать стили для селектора ”txt”: 

div#txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; } /*задан желтый цвет*/

Аналогично можно прописать цвета для всех тегов html отвечающих за вывод текста на вашем сайте.

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

Например, если прописать вот так:  

div#txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; } div#Txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; }

Тогда это уже будут разные значения для селектора id.

Если не задавать никаких атрибутов для текста, любой браузер будет окрашивать цвет текста согласно своим настройкам.

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

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

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

Свойство CSS Color

Свойства color воздействует не на сам элемент (блок), а на шрифт внутри него. Цвет элемента обычно регулируется с помощью свойств background-color, border-color, а также сокращенных версий свойств background и border. Также можно использовать свойство box-shadow, которое отвечает за тень элемента.

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

Объявление цвета

Есть три способа определения цвета текста CSS: RGB-значение, HEX и название:

.red-rgb {
 background-color: rgb(255, 0, 0);
}

.red-hex {
 background-color: #ff0000;
}

.red-name {
 background-color: red;
}

Второй по счету пример (HEX-значение) наиболее распространен. Но HEX-значение покажется абсолютно бессмысленным, если вы не знакомы с принципом работы модели RGB.

RGB-значения

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

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

то есть, режимы «включено» и «выключено»), в то время как высокотехнологичные современные экраны способны предложить обширную градацию. Обычно в компьютерных мониторах используются шкала от 0 до 255. Интенсивность каждого субпикселя может иметь значение до 256. А это значит, что значение каждого субпикселя можно хранить в виде 8-битного байта (28 = 256). Так как задействуется три цвета, то каждый из них представляется в 8 битах. Общее количество цветов превышает 16 млн. (2563 = 16,777,216).

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

rgb(0, 128, 255)

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

В рамках данной системы объявление белого цвета (все цвета включены) выглядит так: rgb (255, 255, 255

). Объявление черного цвета (все цвета выключены): rgb (0, 0, 0).

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

rgb (0.0, 50.0, 100.0)

HEX-значения

Аналогичный результат можно получить более простым — используя HEX-значение. Оно задается с использованием хэша (#) и 6 символов, разделенных на три пары:

#0080ff

Первая пара цвета в CSS отвечает за красный, вторая отвечает за зеленый, третья – за синий. В данном примере 00 означает, что красного не будет вообще. 80 указывает, что зеленый задействован наполовину, а ff означает полное включение синего цвета. То есть, мы получим тот же результат, что и при rgb (0, 128, 255).

Поначалу это может сбивать с толку, особенно если вы раньше никогда не работали с шестнадцатеричными числами. В привычной десятичной системе у каждого символа есть 10 значений от 0 до 9. В шестнадцатеричной – у каждого символа 16 возможных значений (

0-9 и a-f). Это и позволяет указывать цвета от 0 до 255 при помощи двух символов, 0 = ff. В рамках шестнадцатеричной системы, белый цвет обозначается как #ffffff, а черный – #000000. HEX-значения наиболее часто используются для указания цветов в CSS.

Названия цветов в CSS

Последний способ указания цветов в CSS заключается в использовании предопределенных названий конкретных цветов. W3C регулярно обновляет таблицу цветов CSS. Например, вместо #000000 можно использовать название black.

На «заре» интернета эти названия позволяли использовать небольшой неофициальный набор “безопасных для веб” цветов, которые точно поддерживались всеми доступными на тот момент браузерами.

На сегодняшний день одно из главных преимуществ данного подхода заключается в том, что эти названия цветов гораздо проще запомнить. Например, слово lightblue (светло-голубой) запомнить гораздо проще, чем его эквиваленты: #add8e6 или rgb (173, 216, 230).

Также стоит прочитать

Цвет замещающего текста | htmlbook.ru

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

<input placeholder=»Текст»>

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

Пример 1. Использование placeholder

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>placeholder</title>
  <style>
   body {background: #053f38; color: #98baba; }
   input[type="search"] { 
    padding: 3px;
    background: #333;
    color: #053f38;
    border: 1px solid #ccc;
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type="search" placeholder="Поиск по сайту" />
   <input type="submit" value="Искать"></p>
  </form>
</body>
</html> 

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder.

input::-moz-placeholder { color: red; }

В Safari и Chrome стиль текста меняется следующим образом.

input::-webkit-input-placeholder { color: red; }

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>placeholder</title>
  <style>
   body {background: #053f38; color: #98baba; }
   input[type="search"] { 
    padding: 3px;
    background: #333;
    color: #053f38;
    border: 1px solid #ccc;
   }
   input[type="search"]::-webkit-input-placeholder {
    color: #ccc;
   } 
   input[type="search"]::-moz-placeholder {
    color: #ccc;
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type="search" placeholder="Поиск по сайту" />
   <input type="submit" value="Искать"></p>
  </form>
</body>
</html>
 

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

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

html — Картинка вместо цвета текста css

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти