Как изменить цвет текста в списке?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Изменить цвет фона списка и цвет текста в нём.
Решение
Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL, как показано в примере 1.
Пример 1. Цвет фона в списке
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Цвет списка</title> <style> ul { color: navy; /* Цвет текста */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ margin-left: 20px; /* Отступ слева */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Выделение цветом текста списка
При таком раскладе маркеры оказываются вынесенными за пределы цветной фоновой области. Поэтому для изменения вида фона следует использовать тег <div>, внутрь которого и добавить список. Все необходимые цвета при этом указываются для селектора DIV (пример 2).
Пример2. Цвет фона в списке
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html"> <html> <head> <meta charset="utf-8" /> <title>Цвет списка</title> <style type="text/css"> div { color: navy; /* Цвет текста */ background: #fc0; /* Цвет фона */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <div> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </div> </body> </html>
В данном примере к списку добавляется оранжевый цвет фона и устанавливается тёмно-синий цвет текста, как показано на рис. 2.
Рис. 2. Выделение цветом всей области списка
Расстояние от края цветового прямоугольника до текста регулируется свойствами margin и padding, добавляемые к селектору UL.
htmlbook.ru
Как изменить цвет текста при помощи 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.
Если не задавать никаких атрибутов для текста, любой браузер будет окрашивать цвет текста согласно своим настройкам.
Настройки задаются либо своим пользователем или задаются по умолчанию.
baseml.ru
HTML / CSS изменить цвет выделения для текста
Изменить цвет выделения текста при помощи HTML / CSS. Ниже размещено несколько способов для изменения цвета выделения всего текста на сайте/страницы и только для отдельного текста по классу и индификатору (id).
Изменить цвет выделения для всего текста на сайте:
<style>
::selection {color:#fff; background:#2BAECA;}
::-moz-selection {color:#fff; background:#2BAECA;}
::-webkit-selection {color:#fff; background:#2BAECA;}
</style>
color:#fff; — это цвет текста при выделении.
background:#2BAECA; — это цвет фона текста при выделении.
Для демонстрации выделите любой текст на данной веб-странице сайта.
Изменить цвет выделения для отдельного текста
Данным способом можно изменить цвет выделения для отдельного текста на странице, при помощи класса (class) в теге div текста. Чуть ниже размещён ещё один вариант с использованием индификатора (id) текста.
CSS стили для сайта или отдельной страницы:
<style>
div.red ::selection {color:#fff; background:#F25222;}
div.red ::-moz-selection {color:#fff; background:#F25222;}
div.red ::-webkit-selection {color:#fff; background:#F25222;}
</style>
HTML-исходник текста:
<divclass=»red»>
<span>Ваш текст</span>
</div>
Демо-пример (демонстрация по классу):
Изменить цвет выделения по индификатору (id)
CSS стили для сайта или отдельной страницы:
<style>
#wb_demo2 ::selection {color:#fff; background:#EAC030;}
#wb_demo2 ::-moz-selection {color:#fff; background:#EAC030;}
#wb_demo2 ::-webkit-selection {color:#fff; background:#EAC030;}
</style>
wb_demo2 — это индификатор (id) блока div с текстом.
Демо-пример (демонстрация по id):
Выделите этот текст для демонстрации цвета выделения текста по id.
dlod.ru
Как изменить цвет текста и фона в текстовом поле?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Установить цвет фона и текста для однострочного текстового поля формы.
Решение
Цвет фона элемента задается стилевым свойством background-color, а цвет текста с помощью color, эти свойства необходимо добавить к селектору INPUT. Поскольку тег <input> является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.
Пример 1. Цвет текста и фона в текстовом поле
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет текста и фона</title>
<style>
.colortext {
background-color: #ffe; /* Цвет фона */
color: #930; /* Цвет текста */
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text">
<input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля после добавления к нему стилей
В данном примере добавляется новый класс с именем colortext, он добавляется к тегу <input> с помощью конструкции.
Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу <input> в этом случае всегда добавляется атрибутtype. Используя запись INPUT[type=»text»] задаем стиль для всех элементов <input>, но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).
Пример 2. Использование селекторов атрибутов
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет фона и текста в поле</title>
<style>
INPUT[type="text"] {
background-color: navy;
color: #ffe;
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text">
<input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>htmlbook.ru
Цвет замещающего текста | 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.
htmlbook.ru
Как в HTML изменить цвет текста: теги и их параметры
Здравствуйте! Сегодня поговорим о программной верстке сайта, а точнее затронем очень узкий вопрос, связанный с цветами. Они имеют огромную роль на электронных страницах, так как влияют на удобство восприятия информации и поведенческие факторы.
В данной публикации посмотрим, как в HTML изменить цвет текста несколькими способами. Для этого можно использовать специальные теги и их атрибуты. В частности, опишу достаточно распространенные варианты.
Задание цвета в HTML
Текстовые блоки обычно заключаются в специальные «контейнеры». К ним можно отнести теги <p>, <h2>, <h3>, <div> и другие. Для наглядности покажу одну «конструкцию».
<div>
<h2>Заголовок публикации</h2>
<p>Первый абзац</p>
<h3>Подзаголовок публикации</h3>
<p>Второй абзац</p>
</div>
По умолчанию выставляется черная расцветка и для этого ничего не надо прописывать. Теперь давайте рассмотрим, как сделать текст цветным с помощью задания стиля.
<p style=”color:red”>
Такая конструкция делает конкретный абзац красным, то есть заданный параметр будет действовать от открывающего до закрывающего тега. А вот следующая конструкция позволит окрасить весь текст в вышеприведенном примере.
<div style=”color:red”>
Параметры red, black и другие применяются крайне редко. Обычно используют шестнадцатеричный код.
#000000 — черный.
#336600 — темно-зеленый.
#006699 — синий.
Вариант применения — <div style=”color:#336600”>
Кстати, таблицу с кодами разнообразных расцветок можете посмотреть здесь.
Делаем цветной текст через CSS
В CSS (таблица стилей) можно прописать, к примеру, конструкцию, представленную ниже.
h3{color:#006699;}
Знаете, в чем отличается данный способ от вышеупомянутого? На самом деле все достаточно просто. Первый способ позволял менять цвет для конкретного абзаца, заголовка или иного участка. В рассматриваемом сейчас случае цвет будет изменен для всех подзаголовков второго уровня на электронных страницах, к которым подключается данный файл CSS.
Рекомендации
Наиболее важная из них — не превращайте текст в «светофор». Обилие разнообразных цветов в одном материале может существенно усложнить удобство её восприятия. Очень высока вероятность, что это негативно отразиться на нормальном продвижении проекта.
Если взглянуть на ситуацию в общем, то стоит задуматься о дизайне сайта в целом. Какие из них считаются хорошими читайте здесь.
Как пример использования цветных сочетаний в текстовой публикации, просто посмотрите на текущую статью. Её основная цель — рассказать, как в языке HTML и CSS можно изменять цвет текста за счет задания тегов и параметров для них.
Именно поэтому визуально выделены только блоки с кодом, которые дают ответ на этот вопрос, и ссылки, которые ведут на страницы со вспомогательной информацией, прямо или косвенно относящейся к основной теме, то есть дополняют материал. Разумеется, это не единственное, что можно визуально подчеркнуть. Просто всё нужно стараться делать логично, аккуратно и красиво.
Статью завершаю и отмечу, что мой блог преимущественно посвящен теме нормальной работы в интернете. С различными способами стать немного богаче можете ознакомиться прямо сейчас. Оставайтесь на связи, проект регулярно обновляется. Так же можете подписаться на обновления Workip на электронную почту.
workip.ru