background | htmlbook.ru
CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
Здесь:
<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background</title> <style type="text/css"> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div> Duis te feugifacilisi.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Пример 2
HTML5CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background</title> <style> body { background: url(images/hand.png) repeat-y, #fc0 url(images/bg-right.png) repeat-y 100% 0; } </style> </head> <body> </body> </html>
Объектная модель
[window. ]document.getElementById(«elementID»).style.background
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Как изменить цвет по умолчанию выделенного текста с помощью CSS
Содержание ¶
- Как изменить цвет шрифта при выделении текста
- Как изменить фоновый цвет при выделении текста
- Как изменить цвет тени при выборе текста
- Как изменить цвет полей Textarea и Input при выборе текста
- Как изменить цвет выбранного изображения
- Как создать разные эффекты выделения для одного и того же элемента на одной странице
- Как применить эффекты выделения для всей страницы
Каждый раз, когда пользователь выбирает текст для выделения, автоматически применяется какой-нибудь фоновый цвет, а иногда может меняться цвет текста. Если вы раньше не заметили этого, просто выделите это предложение, чтобы увидеть фоновый цвет текста.
Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!
Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.
Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.
Количество свойств, используемых с этим псевдоэлементом, ограничено. С помощью псевдоэлемента ::selection можно изменить значения только трех свойств (color, background-color и text-shadow). В этой статье мы покажем, каким будет эффект для каждого из этих свойств.
Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox (::-moz-selection).
Как изменить цвет шрифта при выделении текста¶
Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection. Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
. green::-moz-selection{
color: #8ebf42;
}
.green::selection{
color: #8ebf42;
background-color: initial;
}
.bg-green::-moz-selection{
background-color: #8ebf42;
}
.bg-green::selection{
background-color: #8ebf42;
}
.bg-transparent::-moz-selection{
color: #8ebf42;
background-color: transparent;
}
.bg-transparent::selection{
color: #8ebf42;
background-color: transparent;
}
.white-green::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
.white-green::selection{
color: #fff;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p>Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию.</p>
<p>Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон. </p>
<p>Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета.</p>
<p>Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет.</p>
</body>
</html>
Попробуйте сами!В этом примере фоновый цвет по умолчанию — это цвет данного сайта.
Как изменить фоновый цвет при выделении текста¶
Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.green::-moz-selection{
background-color: #8ebf42;
}
.green::selection{
background-color: #8ebf42;
}
.yellow::-moz-selection{
background-color: #ffcc00;
}
.
yellow::selection{
background-color: #ffcc00;
}
</style>
</head>
<body>
<p>Текст с фоновым цветом по умолчанию.</p>
<p>Выберите этот текст и увидите зеленый фон.</p>
<p>Выберите этот текст и увидите желтый фон.</p>
</body>
</html>
Попробуйте сами!В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».
Как изменить цвет тени при выборе текста¶
Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.
Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
. shadow2{
text-shadow: 1px 1px 1px;
}
.shadow3{
text-shadow: 1px 2px 4px #000;
}
.shadow4{
text-shadow: 1px 2px 4px;
}
.shadow1::-moz-selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
.shadow1::selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
#shadow2::-moz-selection{
text-shadow: none;
background: #fffae6;
}
.shadow2::selection{
text-shadow: none;
background: #fffae6;
}
.shadow3::-moz-selection{
text-shadow: 1px 1px 2px #222;
}
.shadow3::selection{
text-shadow: 1px 1px 2px #222;
}
.shadow4::-moz-selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
. shadow4::selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
</style>
</head>
<body>
<p>Выделите текст и увидите его тень.</p>
<p>Выделите текст, чтобы удалить его тень.</p>
<p>Выделите текст, чтобы он стал яснее.</p>
<p>Выделите текст, чтобы изменить цвет его тени.</p>
</body>
</html>
Попробуйте сами!Как изменить цвет полей Textarea и Input при выборе текста¶
Также возможно изменить цвет при выделении текста для полей <textarea> и <input>. Давайте рассмотрим пример с псевдоэлементом ::selection с элементами textarea и input:
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> input::-moz-selection{ color: #1c87c9; background-color: #eee; } input::selection{ color: #1c87c9; background-color: #eee; } textarea::-moz-selection{ color: white; background-color: #8ebf42; } textarea::selection{ color: white; background-color: #8ebf42; } </style> </head> <body> <p>Элемент input</p> <form><input type="text" value="Выделите этот input текст" /></form> <p>Элемент textarea</p> <textarea rows="5" cols="25">Выделите этот textarea текст</textarea> </body> </html>
Как изменить цвет выбранного изображения¶
Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:
Пример¶
Попробуйте сами! Как создать разные эффекты выделения для одного и того же изображения на одной странице<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> img { padding: 10px; } #img2::-moz-selection{ background-color: #d9d9d9; } #img2::selection{ background-color: #d9d9d9; } </style> </head> <body> <p>Здесь второе изображение при выделении становится серым.</p> <p>Выделите обе изображения, чтобы увидеть разницу.</p> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> </body> </html>
Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.
В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p.green::selection {
background: #8ebf42;
}
p.green::-moz-selection {
background: #8ebf42;
}
p.blue::selection {
background: #1c87c9;
}
p.blue::-moz-selection {
background: #1c87c9;
}
p.yellow::selection {
background: #ffcc00;
}
p.yellow::-moz-selection {
background: #ffcc00;
}
p.red::selection {
background: #ff6666;
}
p.red::-moz-selection {
background: #ff6666;
}
</style>
</head>
<body>
<p>Выберите текст, и он выделится зеленым цветом. </p>
<p>Выберите текст, и он выделится синим цветом.</p>
<p>Выберите текст, и он выделится желтым цветом.</p>
<p>Выберите текст, и он выделится красным цветом.</p>
</body>
</html>
Попробуйте сами!Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.
Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.¶
Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
::selection{
color: #fff;
background-color: #8ebf42;
</style>
</head>
<body>
<h4>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.</h4>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>
Попробуйте сами!::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.
Не рекомендуется полагаться на нестандартные функции CSS, если есть высокий риск, что веб-браузер может без предупреждения в любой момент удалить поддержку для неофициального CSS селектора или псевдоэлемента .
Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.
Глава 2 CSS
Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h2 крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.
CSS все меняет. CSS усаживает дизайнера в кресло водителя. Мы посвятим остаток книги рассказу о том, что можно делать с помощью CSS. А в этой главе начнем с ознакомления вас с основами написания таблиц стилей и основами совместного функционирования CSS и HTML для описания и структуры, и внешнего вида вашего документа.
Правила и таблицы стилей
Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.
Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!
h2 { color: green }
То, что вы видите, это простое правило CSS, содержащее одно объявление. Правило это заявление стилистического параметра одного элемента или нескольких. Таблица стилей это набор из одного или более правил, прилагаемых к HTML-документу. Правило выше устанавливает цвет всех заголовков первого уровня (h2). Давайте посмотрим, какой визуальный эффект оно могло бы произвести:
Figure 2.1
Теперь давайте тщательно разберем правило.
Анатомия правила
Правило состоит из двух частей:
- Селектора — части перед левой фигурной скобкой
- Объявления — части внутри фигурных скобок
Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект. В примере выше селектор это тег h2, а объявление «color: green». Следовательно, объявление повлияет на все элементы h2, то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т. д.)
Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»
Анатомия объявления
Объявление имеет две части, разделенные двоеточием:
- Свойство — часть перед двоеточием
- Значение — часть после двоеточия
Свойство это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.
Значение это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.
Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки ({ }) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.
Рисунок 2.2 Диаграмма правила.
Группирование селекторов и правил
При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их «от руки». К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.
Для примера, рассмотрите эти три правила:
h2 { font-weight: bold } h3 { font-weight: bold } h4 { font-weight: bold }
У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:
h2, h3, h4 { font-style: bold }
Это правило производит такой же эффект, как и первые три..
Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:
h2 { color: green } h2 { text-align: center }
В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5.)
Но этого же эффекта можно добиться быстрее, если сгруппировать объявления, которые относятся к одному и тому же селектору, в список, разделенный точками с запятой, вот так:
h2 { color: green; text-align: center; }
Все объявления быть внутри фигурных скобок. Точка с запятой разделяет объявления и может, но не должна также появляться в конце последнего объявления. Кроме того, для повышения удобочитаемости вашего кода, предлагаем размещать каждое объявление в отдельной строчке, как мы сделали здесь. (Браузерам все равно, они просто проигнорируют все лишние пробелы и переводы строк.)
Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется «приклеить» к своему документу HTML.
«Приклеивание» таблиц стилей к документу
Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:
- Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
- Применить таблицу стилей к отдельному тегу, используя атрибут style.
- Привязать внешнюю таблицу стилей к документу, используя элемент link.
- Импортировать таблицу стилей, испольхуя запись CSS @import.
В следующем разделе, мы обсудим первый метод: с использованием тега style. Атрибут style мы обсудим в главе 4 , «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы стилей».
«Склеивание» с использованием тега STYLE
Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2. 3 .
<HTML> <TITLE>Bach's home page</TITLE> <STYLE> h2, h3 { color: green } </STYLE> <BODY> <h2>Bach's home page</h2> <P>Johann Sebastian Bach was a prolific composer. Among his works are: <UL> <LI>the Goldberg Variations <LI>the Brandenburg Concertos <LI>the Christmas Oratorio </UL> <h3>Historical perspective</h3> <P>Bach composed in what has been referred to as the Baroque period. </BODY> </HTML>
Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h2 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style. (попробуйте)
Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.
Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.
Браузеры и CSS
Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C
Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!
Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts
Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.
Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.
Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.
Вспомните, что комментарии HTML начинаются с <!--
и заканчиваются на -->
. Вот кусочек предыдущего примерного кода, показывающий, как
писать таблицу стилей в комментарии HTML. Комментарий окружает
только содержимое контейнера style:
<HTML> <TITLE>Bach's home page</TITLE> <STYLE> <!-- h2 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>
В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.
Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):
<HTML> <TITLE>Bach's home page</TITLE> <STYLE TYPE="text/css"> <!-- h2 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>
Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.
Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.
Древовидные структуры и наследование
Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.
Давайте начнем с того, что посмотрим на документ-образец. :
<HTML> <TITLE>Bach's home page</TITLE> <BODY> <h2>Bach's home page</h2> <P>Johann Sebastian Bach was a <STRONG>prolific</STRONG> composer. Among his works are: <UL> <LI>the Goldberg Variations <LI>the Brandenburg Concertos <LI>the Christmas Oratorio </UL> </BODY> </HTML>
Древовидная структура этого документа выглядит так:
Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:
<STYLE TYPE="text/css"> h2, h3, P, LI { color: green } </STYLE>
Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body:
<STYLE TYPE="text/css"> BODY { color: green } </STYLE>
Поскольку прочие элементы наследуют свойства тега body, все они наследуют и зеленый цвет. (Рисунок 2.4 ).
Как вы уже заметили, наследование транспортное средство, которое распространяет стилистические свойства на потомков элемента. Поскольку тег body общий предок всех видимых элементов, body подходящий селектор для присваивания стилистических правил всему документу.
Аннулирование наследования
В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h2 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:
<STYLE TYPE="text/css"> BODY { color: green } h2 { color: navy } </STYLE>
Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:
Причина, по которой побеждает второе правило, в том, что оно более конкретное чем первое. Первое правило очень общее: оно влияет на все элементы страницы. Второе правило из всего документа влияет только на элементы h2, а, значит, оно более конкретно.
Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:
<STYLE TYPE="text/css"> h2 { color: navy } BODY { color: green } </STYLE>
CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»
Свойства, которые не наследуются
В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.
Скажем, вам нужно установить фоновое изображение для страницы. Это обычный эффект в Сети. В CSS можно написать:
<HTML> <TITLE>Bach's home page</TITLE> <STYLE TYPE="text/css"> BODY { background: url(texture.gif) white; color: black; } </STYLE> <BODY> <h2>Bach's <EM>home</EM> page</h2> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>
Свойство background «фон» имеет URL («texture. gif»), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:
В примере выше есть несколько вещей, о которых стоит рассказать подробнее:
- Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.
- Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
- Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.
А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.
Стандартные задачи в CSS
Присвоения цветов и фонов, как описано выше, среди наиболее частых задач, выполняемых CSS. Прочие общие задачи включают присвоение шрифтов и свободного места вокруг элементов. Этот раздел обеспечивает вам экскурсию по наиболее часто используемым свойствам CSS.
Частые задачи: шрифты
Начнем-ка со шрифтов. Если вам случалось пользоваться специальными приложениями для верстки, вы сможете разобраться в этой небольшой таблице стилей:
h2 { font: 36pt serif }
Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:
Свойство font это укороченное свойство для установки нескольких других свойств одновременно. Используя его, можно сократить свои таблицы стилей, и присвоить значения всем свойствам, которые оно заменяет. Если же выбрать подробную версию, пришлось бы установить каждое из них, чтобы получилось, как в примере вверху:
h2 { font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal; }
Иногда нужно всего лишь установить лишь одно из них. Например, вам нужно наклонить текст в некоторых элементах. Вот пример.:
UL { font-style: italic }
Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:
Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold:
UL { font-style: italic; font-weight: bold; }
Что выводит:
Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.
Частые задачи: поля
Установка свободных пробелов вокруг элементов основной инструмент в типографии. Вверху заголовка над этим абзацем есть интервал, немного меньший внизу его. У этого абзаца, напечатанного в книге, есть свободные промежутки слева и (немного меньше) справа. CSS можно использовать, чтобы определить, сколько расстояния должно быть вокруг различных видов элементов.
По умолчанию, ваш браузер знает совсем немного о том, как отображать раличные виды элементов в HTML. Например, он знает, что списки и содержание тегов blockquote печатаются с отступами, чтобы отделить их от основного текста. Как дизайнер, вы можете основываться на этих установках, одновременно определяя свои собственные детали. Давайте попробуем Давайте рассмотрим тег blockquote в качестве примера. Вот тестовый документ:
<HTML> <TITLE>Fredrick the Great meets Bach</TITLE> <BODY> <P>One evening, just as Fredrick the Great was getting his flute ready, and his musicians were assembled, an officer brought him a list of the strangers who had arrived. With his flute in his hand he ran over the list, but immediately turned to the assembled musicians, and said, with a kind of agitation: <BLOCKQUOTE>"Gentlemen, old Bach is come." </BLOCKQUOTE> <P>The flute was now laid aside, and old Bach, who had alighted at his son's lodgings, was immediately summoned to the Palace. </BODY> </HTML>
Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:
Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:
BLOCKQUOTE { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic; }
Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:
Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; }
Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).
Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; background: #EDB; }
Вот результат:
Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .
Стилистической проблемой в верхнем примере является то, что фоновый цвет едва покрывает цитируемый текст. Пространство вокруг цитаты область границ не запоняется цветом элемента. В CSS есть другой вид разделителей, называемый «padding» «заполнение пустотой», который и использует цвет элемента. В других Во всех других отношениях, свойства заполнения подобны свойствам границ: они добавляют промежутки вокруг элемента. Давайте добавим заполнение к цитате:
BLOCKQUOTE { margin: 1em 0em 1em 0em; font-style: italic; background: #EDB; padding: 0.5em; }
Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:
Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).
Частые задачи: ссылки
Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:
A:link { text-decoration: underline }
Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:
Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.
Селектор (A:link
) заслуживает
особого замечания. Вы, возможно, узнаете «A» как тег HTML, но
последняя часть нова. «:link» это один из так
называемых псевдо-классов CSS. Псевдо-классы используют, чтобы
наделить стилем элементы, основанные на информации извне самого
документа. К примеру, автор документа не может знать, перешли ли
по определенной ссылке или нет. Детально псевдо-классы
описываются в главе 4, а здесь мы лишь дадим
еще несколько примеров:
A:visited { text-decoration: none }
Это правило присваивает стиль посещенным ссылкам,
точно так, как A:link
присваивает стиль
непосещенным ссылкам. Вот пример посложнее:
A:link, A:visited { text-decoration: none } A:hover { background: cyan }
Последнее правило знакомит нас с новым псевдо-классом :hover. При условии, что пользователь перемещает указующее устройство (вроде мыши), определенный стиль будет приложен к элементу, когда пользователь двигает курсор над («зависает» над) ссылкой. Вот как это выглядит:
У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.
Слово о каскадах
Фундаментальной чертой CSS является то, что более чем одна таблица стилей может повлиять на представление документа. Эта черта известна как каскадность, потому что различные таблицы стилей считаются идущими сериями. Каскадность является фундаментальной чертой CSS, потому что мы знаем, что любой документ вполне вероятно может получить таблицы стилей из многих исотчников: браузера, дизайнера и, возможно, пользователя.
В последнем наборе примеров вы увидели, что цвет текста ссылок стал синим без конкретизации таблице стилей. Кроме того, браузерам известно, как форматировать содержимое тегов blockquote и h2 без явного указания. Все, что браузер знает о форматировании, хранится в его таблице стилей по умолчанию и совмещается с авторскими и пользовательскими таблицами стилей, когда документ отображается.
Мы годами знали, что дизайнеры хотят проектировать собственные таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят иметь возможность влиять на представление документов. С CSS они могут сделать это заполняя личную таблицу стилей, которая совместится с браузерной и дизайнерской таблицами. Все противоречия между различными таблицами стилей решаются браузером. Обычно, дизайнерская таблица стилей имеет высший приоритет в документе, затем пользовательская, потом браузерная по умолчанию. Однако пользователь может отметить, что правило очень важно, и тогда оно аннулирует любые авторские или браузерные стили.
Мы углубимся в детали каскадирования в главе 15, «Каскадирование и наследование». Перед этим, следует узнать многое о шрифтах, промежутках и цветах.
Применение цвета к элементам HTML с помощью CSS — HTML: язык разметки гипертекста
Эта статья представляет собой учебник, знакомящий с каждым из способов использования цвета CSS в HTML.
Использование цвета — фундаментальная форма человеческого самовыражения. Дети экспериментируют с цветом еще до того, как научатся рисовать руками. Может быть, поэтому цвет — одна из первых вещей, с которой люди часто хотят экспериментировать, когда учатся разрабатывать веб-сайты. С помощью CSS есть много способов добавить цвет к вашим HTML-элементам, чтобы создать именно тот вид, который вам нужен.
Мы собираемся коснуться большей части того, что вам нужно знать при использовании цвета, включая список того, что вы можете раскрасить, и какие свойства CSS задействованы, как вы описываете цвета и как на самом деле использовать цвета в таблицах стилей. и в скриптах. Мы также рассмотрим, как позволить пользователю выбирать цвет.
Затем мы закончим краткое обсуждение того, как разумно использовать цвет: как выбрать подходящие цвета, учитывая потребности людей с разными зрительными способностями.
На уровне элементов ко всему в HTML можно применить цвет. Вместо этого давайте посмотрим на вещи с точки зрения того, что нарисовано в элементах, например, текст, границы и так далее. Для каждого мы увидим список свойств CSS, которые применяют к ним цвет.
На фундаментальном уровне свойство color
определяет цвет переднего плана содержимого HTML-элемента, а свойство background-color
определяет цвет фона элемента.Их можно использовать практически для любого элемента.
Текст
При визуализации элемента эти свойства используются для определения цвета текста, его фона и любых украшений в тексте.
-
цвет
Цвет, используемый при рисовании текста и любых текстовых украшений (таких как добавление нижних или нижних линий, зачеркивание линий и т. Д.
-
цвет фона
Цвет фона текста.
-
тень текста
Настраивает эффект тени для применения к тексту. Среди вариантов тени — основной цвет тени (который затем размывается и смешивается с фоном на основе других параметров). Дополнительные сведения см. В разделе «Тени отбрасываемого текста» в разделе «Основные стили текста и шрифтов».
-
цвет текстового оформления
По умолчанию для оформления текста (например, подчеркивания, зачеркивания и т. Д.) В качестве цвета используется свойство
color
.Однако вы можете переопределить это поведение и использовать для них другой цвет с помощью свойстваtext-decoration-color
.-
цвет выделения текста
Цвет, используемый для выделения символов выделения рядом с каждым символом в тексте. Это используется в первую очередь при рисовании текста для языков Восточной Азии.
-
каре
Цвет, используемый при рисовании курсора (иногда называемого курсором ввода текста) внутри элемента.Это полезно только для редактируемых элементов, таких как
или элементов, для которых установлен атрибут HTML
contenteditable
.
Коробки
Каждый элемент представляет собой коробку с каким-либо содержимым, у которого есть фон и рамка в дополнение к любому содержимому, которое может иметь коробка.
- Границы
-
См. В разделе «Границы» список свойств CSS, которые можно использовать для установки цветов границ блока.
-
цвет фона
-
Цвет фона для использования в областях элемента, не имеющих содержимого переднего плана.
-
столбец-линейка-цвет
-
Цвет, используемый при рисовании линии, разделяющей столбцы текста.
-
цвет контура
-
Цвет, используемый при рисовании контура снаружи элемента. Этот контур отличается от границы тем, что для него не отведено место в документе (поэтому он может перекрывать другое содержимое).Обычно он используется как индикатор фокуса, чтобы показать, какой элемент будет получать события ввода.
Границы
Любой элемент может иметь границу. Граница базового элемента — это линия, проведенная по краям содержимого элемента. См. Свойства бокса в блочной модели, чтобы узнать о взаимосвязи между элементами и их границами, и статью «Стилизация границ с помощью CSS», чтобы узнать больше о применении стилей к границам.
Вы можете использовать сокращенное свойство border
, которое позволяет вам настроить все, что связано с рамкой, за один снимок (включая нецветные особенности границ, такие как ее ширина, стиль (сплошная, пунктирная и т. Д.)), и так далее.
-
цвет рамки
-
Задает один цвет, который будет использоваться для каждой стороны границы элемента.
-
цвет рамки слева
,цвет рамки справа
,цвет рамки сверху
ицвет рамки снизу
-
Позволяет установить цвет соответствующей стороны границы элемента.
-
цвет начала блока границы
ицвет конца блока границы
-
С их помощью вы можете установить цвет, используемый для рисования границ, ближайших к началу и концу блока, который окружает граница.В режиме письма слева направо (например, при написании на английском языке) граница начала блока — это верхний край, а конец блока — нижний. Это отличается от встроенного начала и конца, которые являются левым и правым краями (соответствуют тому, где каждая строка текста в поле начинается и заканчивается).
-
border-inline-start-color
иborder-inline-end-color
-
Позволяют раскрасить края границы, ближайшей к началу и концу начала строк текста внутри поля.Какая это сторона будет варьироваться в зависимости от свойств режима письма ,
направления
иориентации текста
, которые обычно (но не всегда) используются для настройки направленности текста в зависимости от отображаемого языка. Например, если текст поля отображается справа налево, тоborder-inline-start-color
применяется к правой стороне границы.
Другие способы использования цвета
CSS — не единственная веб-технология, поддерживающая цвет.В Интернете доступны графические технологии, которые также поддерживают цвет.
- API HTML Canvas
-
Позволяет рисовать двухмерную растровую графику в элементе
- SVG (масштабируемая векторная графика)
-
Позволяет рисовать изображения с помощью команд, которые рисуют определенные формы, узоры и линии для создания изображения. Команды SVG отформатированы как XML и могут быть встроены непосредственно в веб-страницу или могут быть размещены на странице с помощью элемента
- WebGL
-
Библиотека веб-графики — это API-интерфейс на базе OpenGL ES для рисования высокопроизводительной 2D- и 3D-графики в Интернете. См. Наше руководство по WebGL, чтобы узнать больше.
Чтобы представить цвет в CSS, вы должны найти способ перевести аналоговое понятие «цвет» в цифровую форму, которую может использовать компьютер. Обычно это делается путем разделения цвета на компоненты, например, сколько из каждого набора основных цветов смешивать вместе или насколько ярким сделать цвет.Таким образом, существует несколько способов описания цвета в CSS.
Для более подробного обсуждения каждого из типов значений цвета см. Ссылку на модуль CSS
.
Ключевые слова
Определен набор стандартных названий цветов, позволяющий использовать эти ключевые слова вместо числовых представлений цветов, если вы решите это сделать, и есть ключевое слово, представляющее точный цвет, который вы хотите использовать. Ключевые слова цвета включают стандартные основные и вторичные цвета (например, красный
, синий
или оранжевый
), оттенки серого (от черного
до белого
, включая такие цвета, как темно-серый
и светло-серый
) и множество других смешанных цветов, включая светло-зеленый
, васильковый
и rebeccapurple
.
Список всех доступных ключевых слов цвета см. В разделе «Ключевые слова цвета» в
.
Значения RGB
Существует три способа представления цвета RGB в CSS.
Шестнадцатеричное строковое представление
Шестнадцатеричная строка представляет собой цвет с использованием шестнадцатеричных цифр для представления каждого из компонентов цвета (красный, зеленый и синий). Он также может включать четвертый компонент: альфа-канал (или непрозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 и 0xFF) или, необязательно, как число от 0 до 15 (0x0 и 0xF).Все компоненты должны указываться с использованием одинакового количества цифр. Если вы используете однозначное обозначение, окончательный цвет вычисляется с использованием цифры каждого компонента дважды; то есть «#D»
становится «#DD»
при рисовании.
Цвет в шестнадцатеричной системе счисления всегда начинается с символа «#»
. После этого идут шестнадцатеричные цифры цветового кода. Строка нечувствительна к регистру.
-
"#rrggbb"
-
Определяет полностью непрозрачный цвет, красный компонент которого представляет собой шестнадцатеричное число
0xrr
, зеленый компонент —0xgg
, а синий компонент —0xbb
. -
"#rrggbbaa"
-
Задает цвет, красный компонент которого представляет собой шестнадцатеричное число
0xrr
, зеленый компонент —0xgg
, а синий компонент —0xbb
. Альфа-канал указан0xaa
; чем ниже это значение, тем более полупрозрачным становится цвет. -
"#rgb"
-
Задает цвет, красный компонент которого представляет собой шестнадцатеричное число
0xrr
, зеленый компонент —0xgg
, а синий компонент —0xbb
. -
"#rgba"
-
Задает цвет, красный компонент которого представляет собой шестнадцатеричное число
0xrr
, зеленый компонент —0xgg
, а синий компонент —0xbb
. Альфа-канал указан0xaa
; чем ниже это значение, тем более полупрозрачным становится цвет.
В качестве примера можно представить ярко-синий непрозрачный цвет как "# 0000ff"
или "# 00f"
.Чтобы сделать его непрозрачным на 25%, вы можете использовать "# 0000ff44"
или "# 00f4"
.
Функциональное обозначение RGB
Функциональная нотация RGB (красный / зеленый / синий), как и шестнадцатеричная строковая нотация, представляет цвета, используя их красный, зеленый и синий компоненты (а также, необязательно, компонент альфа-канала для непрозрачности). Однако вместо использования строки цвет определяется с помощью функции CSS rgb ()
. Эта функция принимает в качестве входных параметров значения красного, зеленого и синего компонентов и необязательный четвертый параметр — значение альфа-канала.
Допустимые значения для каждого из этих параметров:
-
красный
,зеленый
исиний
-
Каждое значение должно быть
<целое число>
значением от 0 до 255 (включительно) или<процент>
от 0% до 100%. -
альфа
-
Альфа-канал — это число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный). Вы также можете указать процент, где 0% совпадает с 0.0 и 100% то же, что и 1.0.
Например, ярко-красный цвет, непрозрачный на 50%, может быть представлен как rgb (255, 0, 0, 0,5)
или rgb (100%, 0, 0, 50%)
.
Функциональная нотация HSL
Дизайнеры и художники часто предпочитают работать с цветовым методом HSL (оттенок / насыщенность / яркость). В Интернете цвета HSL представлены с использованием функциональной нотации HSL. В остальном CSS-функция hsl ()
очень похожа на функцию rgb ()
.
На схеме ниже показан цветной цилиндр HSL. Оттенок определяет фактический цвет на основе положения на круговом цветовом круге, представляющем цвета видимого спектра. Насыщенность — это процентное значение расстояния между оттенком серого и максимально возможным количеством данного оттенка. По мере увеличения значения яркости (или яркости) цвет меняется от самого темного к самому яркому (от черного к белому). Изображение любезно предоставлено пользователем SharkD в Википедии, распространяется под лицензией CC BY-SA 3.0 лицензия.
Значение компонента оттенка (H) цвета HSL представляет собой угол от красного вокруг до желтого, зеленого, голубого, синего и пурпурного (снова заканчивающийся красным на 360 °), который определяет, каков базовый цвет. Значение может быть указано в любых единицах
, поддерживаемых CSS, включая градусы ( градусов,
), радианы ( рад,
), градиенты ( градусов,
) или повороты ( градусов,
). Но это не влияет на то, насколько ярким или тусклым, а также насколько ярким или темным будет цвет.
Компонент насыщенности (S) цвета определяет, какой процент окончательного цвета состоит из указанного оттенка. Остальное определяется уровнем серого, обеспечиваемым компонентом яркости (L).
Думайте об этом как о создании идеального цвета краски:
- Вы начинаете с базовой краски, которая имеет максимальную возможную интенсивность для данного цвета, например, самый интенсивный синий, который может быть представлен на экране пользователя. Это компонент оттенка (H): значение, представляющее угол вокруг цветового круга для яркого оттенка, который мы хотим использовать в качестве нашей основы.
- Затем выберите краску в оттенках серого, которая соответствует желаемой яркости цвета; это яркость. Вы хотите, чтобы он был очень ярким и почти белым, или очень темным и ближе к черному, или где-то посередине? Это указывается в процентах, где 0% — это идеально черный, а 100% — идеально белый. (независимо от насыщенности или оттенка). Между значениями — буквальная серая область.
- Теперь, когда у вас есть серая краска и совершенно яркий цвет, вам нужно смешать их вместе.Компонент насыщенности (S) цвета указывает, какой процент окончательного цвета должен состоять из этого идеально яркого цвета. Остальной окончательный цвет состоит из серой краски, которая представляет насыщенность.
Вы также можете дополнительно включить альфа-канал, чтобы сделать цвет менее 100% непрозрачным.
Вот несколько образцов цветов в нотации HSL:
таблица {
граница: сплошной черный 1px;
шрифт: 16px «Open Sans», Helvetica, Arial, без засечек;
граница-интервал: 0;
граница-коллапс: коллапс;
}
th, td {
граница: сплошной черный 1px;
отступ: 4px 6px;
выравнивание текста: слева;
}
th {
цвет фона: hsl (0, 0%, 75%);
}
<таблица>
Цвет в нотации HSL
Пример
HSL (90 градусов, 100%, 50%)
& nbsp;
hsl (90, 100%, 50%)
& nbsp;
hsl (0.15 витков, 50%, 75%)
& nbsp;
hsl (0,15 оборота, 90%, 75%)
& nbsp;
hsl (0,15 оборота, 90%, 50%)
& nbsp;
HSL (270 градусов, 90%, 50%)
& nbsp;
Примечание: Когда вы опускаете единицы измерения оттенка, предполагается, что они выражаются в градусах ( градусов,
).
Теперь, когда вы знаете, какие свойства CSS позволяют применять цвет к элементам и форматы, которые вы можете использовать для описания цветов, вы можете собрать их вместе, чтобы начать использовать цвет. Как вы могли видеть из списка в разделе «Вещи, которые могут иметь цвет», есть много элементов, которые можно раскрасить с помощью CSS. Давайте посмотрим на это с двух сторон: использование цвета в таблице стилей и добавление и изменение цвета с помощью кода JavaScript для изменения стилей элементов.
Указание цветов в таблицах стилей
Самый простой способ применить цвет к элементам — и как вы это обычно делаете — это указать цвета в CSS, которые используются при рендеринге элементов.Хотя мы не будем использовать все упомянутые ранее свойства, мы рассмотрим несколько примеров. Концепция одинакова везде, где вы используете цвет.
Давайте рассмотрим пример, начав с результатов, которых мы пытаемся достичь:
HTML
HTML-код, ответственный за создание приведенного выше примера, показан здесь:
Это первая коробка.
Это вторая коробка.
Это довольно просто, используя Волшебство происходит, как обычно, в CSS, где мы применяем цвета, определяющие макет для HTML выше. Мы рассмотрим CSS, чтобы создать приведенные выше результаты по частям, чтобы мы могли просматривать интересные части одну за другой. Класс Более интересным для нашего обсуждения здесь является использование свойства Наши два цветных поля имеют ряд общих свойств, поэтому теперь мы создаем класс Короче Модель Примечание: Когда вы пытаетесь показать его в Safari, он не будет отображаться должным образом.Поскольку Safari не поддерживает Наконец, класс Есть много ситуаций, в которых вашему веб-сайту может потребоваться разрешить пользователю выбирать цвет. Возможно, у вас есть настраиваемый пользовательский интерфейс или вы реализуете приложение для рисования. Возможно, у вас есть редактируемый текст, и вам нужно разрешить пользователю выбирать цвет текста. Или, возможно, ваше приложение позволяет пользователю назначать цвета папкам или элементам. Хотя раньше было необходимо реализовать собственное средство выбора цвета, теперь HTML обеспечивает поддержку браузеров, чтобы предоставить его для использования через элемент Элемент Давайте рассмотрим простой пример, в котором пользователь может выбрать цвет. По мере того как пользователь настраивает цвет, граница вокруг примера изменяется, чтобы отразить новый цвет. После завершения и выбора окончательного цвета отображается значение палитры цветов. Примечание: В macOS вы указываете, что завершили выбор цвета, закрыв окно выбора цвета. HTML здесь создает поле, содержащее элемент управления выбора цвета (с меткой, созданной с использованием элемента CSS устанавливает размер блока и некоторые базовые стили для внешнего вида.Граница также устанавливается шириной 2 пикселя и недолговечным цветом границы, благодаря приведенному ниже JavaScript ... Сценарий здесь обрабатывает задачу обновления начального цвета границы, чтобы он соответствовал значению средства выбора цвета. Затем добавляются два обработчика событий для обработки ввода от элемента Вход Событие изменения Правильный выбор цветов при разработке веб-сайта может оказаться непростым делом, особенно если у вас нет хороших знаний в области искусства, дизайна или хотя бы базовой теории цвета.Неправильный выбор цвета может сделать ваш сайт непривлекательным или, что еще хуже, сделать контент нечитаемым из-за проблем с контрастом или противоречивыми цветами. Что еще хуже, если использование неправильных цветов может привести к тому, что ваш контент станет совершенно непригодным для использования людьми с определенными проблемами зрения, особенно с дальтонизмом. Подобрать нужные цвета может быть непросто, особенно без обучения искусству или дизайну. К счастью, есть инструменты, которые могут вам помочь.Хотя они не могут заменить хорошего дизайнера, помогающего вам принять эти решения, они определенно могут помочь вам начать работу. Первый шаг - выбрать базовый цвет . Это цвет, который каким-то образом определяет ваш веб-сайт или его тематику. Так же, как мы ассоциируем зеленый цвет с напитком Mountain Dew, а синий цвет можно представить в связи с небом или океаном, выбор подходящего базового цвета для представления вашего сайта - хорошее место для начала.Есть много способов выбрать базовый цвет; несколько идей включают: Пытаясь выбрать базовый цвет, вы можете обнаружить, что расширения браузера, позволяющие выбирать цвета из веб-содержимого, могут оказаться особенно удобными. Некоторые из них даже специально разработаны для помощи в подобной работе. Например, веб-сайт ColorZilla предлагает расширение (Chrome / Firefox), которое предлагает инструмент «пипетка» для выбора цветов из Интернета. Он также может принимать средние значения цветов пикселей в областях различного размера или даже в выбранной области страницы. Примечание: Преимущество усреднения цветов может заключаться в том, что часто то, что выглядит как сплошной цвет, на самом деле представляет собой удивительно различное количество связанных цветов, которые используются совместно, смешиваясь для создания желаемого эффекта.Выбор только одного из этих пикселей может привести к получению цвета, который сам по себе выглядит неуместным. После того, как вы определились с основным цветом, существует множество онлайн-инструментов, которые помогут вам создать палитру подходящих цветов для использования вместе с основным цветом, применив теорию цвета к вашему базовому цвету для определения подходящих добавленных цветов. Многие из этих инструментов также поддерживают просмотр отфильтрованных цветов, чтобы вы могли увидеть, как они будут выглядеть для людей с различными формами дальтонизма.См. Раздел Цвет и доступность для краткого объяснения того, почему это важно. Несколько примеров (все бесплатные на момент последнего пересмотра этого списка): При разработке своей палитры не забудьте, что помимо цветов, которые обычно генерируются этими инструментами, вам, вероятно, также потребуется добавить некоторые основные нейтральные цвета, такие как белый (или почти белый), черный (или почти черный). , и некоторое количество оттенков серого. Примечание: Обычно гораздо лучше использовать наименьшее возможное количество цветов.Используя цвет для выделения, а не добавления цвета ко всему на странице, вы сохраняете удобочитаемость вашего контента, а цвета, которые вы действительно используете, имеют гораздо большее влияние. Полный обзор теории цвета выходит за рамки данной статьи, но доступно множество статей по теории цвета, а также курсы, которые можно найти в близлежащих школах и университетах. Пара полезных ресурсов по теории цвета: Онлайн-курс, который знакомит с такими понятиями, как цвет, как он воспринимается и как использовать цвета для выражения идей.Представлено художниками и дизайнерами Pixar. Статья в Википедии по теории цвета, которая содержит много полезной информации с технической точки зрения. На самом деле это не ресурс, который поможет вам с выбором цвета, но все же он полон полезной информации. Есть несколько причин, по которым цвет может быть проблемой доступности. Неправильное или неосторожное использование цвета может привести к появлению веб-сайта или приложения, которые часть вашей целевой аудитории не сможет использовать должным образом, что приведет к потере трафика, потере бизнеса и, возможно, даже к проблемам с общественностью.Поэтому важно тщательно продумать использование цвета. Вы должны провести хотя бы базовое исследование дальтонизма. Есть несколько видов; наиболее распространенной является красно-зеленая дальтонизм, из-за которой люди не могут различать красный и зеленый цвета. Есть и другие, от неспособности различать определенные цвета до полной неспособности вообще видеть цвет. Примечание: Самое важное правило: никогда не используйте цвет как единственный способ узнать что-то.Если, например, вы указываете успех или неудачу операции, изменяя цвет фигуры с белого на зеленый для успеха и красного на неудачу, пользователи с красно-зеленой дальтонизмом не смогут правильно использовать ваш сайт. Вместо этого, возможно, используйте и текст, и цвет вместе, чтобы каждый мог понять, что происходит. Дополнительные сведения о дальтонизме см. В следующих статьях: Рассмотрим быстрый пример выбора подходящей цветовой палитры для сайта.Представьте, что вы создаете веб-сайт для новой игры, действие которой происходит на планете Марс. Итак, давайте поищем в Google фотографии Марса. Там много хороших примеров марсианской окраски. Мы старательно избегаем мокапов и фотографий из фильмов. И мы решили использовать фотографию, сделанную одним из марсианских посадочных устройств, которые человечество припарковало на поверхности в течение последних нескольких десятилетий, поскольку действие игры происходит на поверхности планеты. Мы используем инструмент выбора цвета, чтобы выбрать образец цвета, который мы выбираем. С помощью пипетки мы определяем понравившийся нам цвет и определяем, что речь идет о цвете Выбрав основной цвет, нам нужно построить палитру. Мы решили использовать Paletton, чтобы подобрать другие цвета, которые нам нужны. Открыв Paletton, видим:
Затем мы вводим шестнадцатеричный код нашего цвета (
Теперь мы видим монохроматическую палитру, основанную на цвете, который мы выбрали с фотографии Марса. Если по какой-то причине вам нужно много родственных цветов, они, скорее всего, подойдут.Но что нам действительно нужно, так это акцентный цвет. Что-то, что появится рядом с основным цветом. Чтобы найти это, мы нажимаем на переключатель «добавить дополнительный» под меню, которое позволяет вам выбрать тип палитры (в настоящее время «Монохроматическая»). Paletton вычисляет подходящий цвет акцента; щелчок по цвету акцента в правом нижнем углу говорит нам, что это цвет
Если вас не устраивает предложенный вам цвет, вы можете изменить цветовую схему, чтобы увидеть, что вам больше нравится.Например, если нам не нравится предложенный зеленовато-синий цвет, мы можем щелкнуть значок цветовой схемы Triad, который представляет нам следующее:
Серо-синий в правом верхнем углу выглядит неплохо. Нажав на нее, мы обнаружим, что это
Теперь у нас есть основной цвет и наш акцент.Вдобавок к этому у нас есть несколько дополнительных оттенков каждого, на случай, если они нам понадобятся для градиентов и тому подобного. Затем цвета можно экспортировать в несколько форматов, чтобы вы могли их использовать. Когда у вас есть эти цвета, вам, вероятно, все равно нужно будет выбрать подходящие нейтральные цвета. Обычная практика дизайна - попытаться найти золотую середину, где контраст будет достаточно, чтобы текст был четким и читаемым, но не настолько контрастным, чтобы он стал резким для глаз. Так или иначе легко зайти слишком далеко, поэтому обязательно получайте отзывы о своих цветах после того, как вы выбрали их и у вас есть доступные примеры их использования.Если контраст слишком низкий, ваш текст будет размываться фоном, оставляя его нечитаемым, но если ваш контраст слишком высок, пользователь может счесть ваш сайт ярким и неприятным для просмотра. То, что хорошо смотрится на экране, может выглядеть совсем иначе на бумаге. Кроме того, чернила могут быть дорогими, и если пользователь печатает вашу страницу, ему не обязательно нужны все фоны и тратить драгоценные чернила, когда все, что имеет значение, - это сам текст.Большинство браузеров по умолчанию удаляют фоновые изображения при печати документов. Если ваши фоновые цвета и изображения были тщательно выбраны и / или имеют решающее значение для полезности контента, вы можете использовать свойство CSS Значение по умолчанию: Вы можете установить Примечание: Однако нет никакой гарантии, что
<"tag" bgcolor = "Имя_цвета | Номер RGB | Шестнадцатеричный номер">
Примеры: В следующих примерах атрибут Пример 1: Используйте атрибут
Выход: Пример 2: Используйте атрибут
Выход: Пример 3: В следующем примере используется атрибут
Выход: Написание писем может быть очень утомительным занятием.Несмотря на то, что дизайнеры электронной почты используют ту же технологию, что и традиционные веб-дизайнеры, результаты наших решений по кодированию не всегда такие, как предполагалось. Одной из самых неприятных проблем может быть цвет фона в электронной почте. В сети свойство CSS background-color и сокращенное свойство background практически пуленепробиваемы. Многие дизайнеры электронной почты применяют тот же подход к цвету фона в электронной почте, что часто приводит к плачевным результатам. Итак, как лучше всего использовать цвета фона в электронной почте? В этой статье мы рассмотрим несколько вариантов, прежде чем выбрать лучший подход. Обычно фоновые цвета применяются к нескольким общим элементам HTML: body , table , td , div и a . В зависимости от вашего опыта и стиля кодирования вы можете использовать один из шести различных способов применения цвета фона к элементам в вашем письме: В то время как некоторые дизайнеры, работавшие с первых дней Интернета, могут использовать названия цветов (например, васильковый или чертополох), большинство дизайнеров сегодня полагаются либо на шестнадцатеричные коды, либо на значения RGB. Использование трехзначного шестнадцатеричного кода - популярный метод в веб-дизайне. Он делает код короче и легче читается, что может быть полезно, когда вы смотрите на сотни строк CSS. Однако после тестирования трехзначные шестнадцатеричные цвета оказались ужасным решением для дизайнеров электронной почты. При использовании в тегах table или td трехзначные шестнадцатеричные значения часто не анализируются должным образом, что приводит к черному или синему фону во многих почтовых клиентах, независимо от того, какой цвет был изначально указан. Хотя трехзначные шестнадцатеричные коды являются идеальным решением для многих веб-дизайнеров, несоответствия в рендеринге между клиентами делают этот метод недопустимым для дизайнеров электронной почты. Значения RGB не намного лучше, в результате получается несколько прекрасных оттенков зеленого (несмотря на указание значений для белого и серого): В некоторых случаях значения RGB, используемые с атрибутом HTML bgcolor, вообще не отображались. Естественно, поскольку значения RGB не работают, их еще более полезный родственник RGBA имеет еще меньше поддержки в дизайне электронной почты. Оказывается, самый надежный способ кодирования фоновых цветов - использовать атрибут HTML bgcolor с шестизначным шестнадцатеричным кодом в таблице и td level: Конечно, здесь задействованы десятки факторов. В зависимости от конкретной структуры почтовых клиентов, используемых вашей аудиторией, CSS background-color с 6-значным HEX-кодом также очень надежен.Атрибут HTML bgcolor имеет лучшую поддержку по всем направлениям. Хотя некоторые методы работают согласованно с определенными элементами, придерживаться одной стратегии цвета фона проще, чем пытаться сохранить определенные причуды цвета фона. Для простоты здесь используются старые коды HTML и 6-значные HEX-коды. Статья изначально была опубликована в блоге Litmus как «Лучший способ кодирования фоновых цветов для электронной почты в формате HTML». Надежные электронные письма в формате HTML Эта страница содержит код цвета фона таблицы HTML.Это HTML-коды для указания или изменения цвета фона ваших таблиц в вашем блоге или на веб-странице. В HTML цвет фона таблицы задается с помощью каскадных таблиц стилей (CSS). В частности, вы используете свойство CSS Чтобы изменить цвет фона всей таблицы, используйте свойство
<таблица>
Чтобы изменить цвет фона строки таблицы, вы применяете тот же код, но к рассматриваемой строке таблицы (т.е. тег Здесь мы также используем
<таблица>
Чтобы изменить цвет фона отдельной ячейки таблицы, вы применяете тот же код, но к рассматриваемой ячейке таблицы (т.е. тег
<таблица>
В приведенных выше примерах для установки свойств CSS используются встроенные таблицы стилей.Это только потому, что это упрощает демонстрационные цели. Я настоятельно рекомендую вам использовать класс CSS, определенный во внешней таблице стилей, для установки ваших стилей. Даже встроенные таблицы стилей обычно лучше встроенных. Вот пример установки цвета фона таблицы и других свойств с помощью класса CSS.
Мой любимый камень теряет.
При кодировании цвета переднего плана (цвета текста) термин цвет используется для указания свойства CSS. Это отличается от цвета фона, в котором используется переносимый термин background-color .
В следующем примере кода показано, как установить цвета переднего плана и фона для всей веб-страницы:
Теперь вы знаете, как добавить цвет текста и цвет фона на веб-страницу.Вы можете применить свойства color и background-color к любому элементу HTML, хотя это не имеет большого смысла для некоторых элементов, а нечетное использование может поддерживаться не всеми браузерами. Обычно используются абзацы, подразделения, интервалы, таблицы, ячейки данных таблиц, заголовки и, конечно же, элемент body, как показано выше.
Как и в случае с любым CSS, вы также можете добавить цвет и цвет фона к любому элементу, используя встроенные и встроенные стили, а также через внешнюю таблицу стилей.Чтобы убедиться, что вы понимаете концепцию, хорошо добавьте цвета переднего плана и фона к еще нескольким селекторам, чтобы использовать селектор тела из предыдущего примера:
содержание
Вау, это был красочный урок.
Программа редактирования HTML Adobe Dreamweaver позволяет создавать информационные бюллетени, веб-сайты и все остальное, что использует код HTML.Хотя большая часть дизайна выполняется с помощью HTML-кодирования, есть некоторые настройки, которые вы можете изменить через пользовательский интерфейс программы. Одним из таких параметров является цвет фона проекта, который можно изменить в меню «Свойства страницы». Чтобы установить фон для конкретного проекта, необходимо сначала открыть проект в программе Dreamweaver. Дважды щелкните значок программы «Adobe Dreamweaver», чтобы запустить программу. Щелкните меню «Файл» и выберите «Открыть»... ". Найдите файл проекта Dreamweaver на жестком диске компьютера и дважды щелкните файл, чтобы открыть проект в Dreamweaver. Dreamweaver имеет три различных режима просмотра:« Код »,« Разделить » и представление «Дизайн». Представление «Код» позволяет вам увидеть код вашего проекта, представление «Дизайн» позволяет увидеть получившийся дизайн, а представление «Разделить» позволяет вам видеть оба. Чтобы изменить цвет фона вашего проекта , вам необходимо просмотреть свой проект в режиме просмотра «Дизайн».Для этого щелкните вкладку «Дизайн» в верхней части окна программы Dreamweaver. В представлении «Дизайн» вы должны получить доступ к странице «Свойства страницы», чтобы изменить фон. Щелкните фон страницы, чтобы открыть вкладку «Свойства» в нижней части окна программы Dreamweaver. Нажмите кнопку «Свойства страницы ...» на этой вкладке, чтобы открыть окно «Свойства страницы». Когда вы находитесь в меню «Свойства страницы», вы, наконец, можете установить цвет фона страницы.Щелкните параметр «Внешний вид (HTML)», а затем квадрат справа от заголовка «Фон». Выберите цвет фона, который вы хотите использовать, из цветовой палитры. Кроме того, вы можете ввести цветовой код в поле справа от заголовка «Фон». Нажмите кнопку «Применить», а затем кнопку «ОК», чтобы сохранить изменения. Ссылки Писатель Биография Александр Пуарье начал профессионально писать в 2005 году. Он работал главным редактором литературного журнала "Каллиопа", получив две награды APEX Awards за выдающиеся публикации.Пурер окончила Тихоокеанский университет со степенью бакалавра искусств по английскому языку. / ru / базовый CSS / стиль текста в CSS / контент / По умолчанию все HTML-элементы, которые вы добавляете на свои веб-страницы, отображаются полностью черно-белыми. Хотя иногда это может быть именно то, что вам нужно, добавление цвета может добавить к странице много визуального интереса, а CSS упрощает изменение. Изменение цвета текста и фона в элементах HTML может иметь большое значение для того, чтобы сделать ваши веб-страницы более уникальными и удобочитаемыми. Будь то элемент Например, рассмотрим простой элемент Вот абзац. Если бы вы загрузили это на веб-страницу, вы бы увидели черный текст на белом фоне: Допустим, вы хотите, например, сделать текст красным. Все, что вам нужно сделать, это добавить набор правил CSS , который использует объявление Если бы вы загрузили это на веб-страницу, вместо этого вы бы увидели красный текст: Имейте в виду, что объявление Конечно, раскрашивать стоит не только текст. Если вы хотите раскрасить остальную часть веб-страницы - например, части ваших HTML-элементов, не являющиеся текстом - вам нужно вместо этого использовать объявление CSS Например, рассмотрим другой простой элемент Вот другой абзац Опять же, если бы вы загрузили этот элемент на веб-страницу, вы бы увидели черный текст на белом фоне.Однако представьте, что вы хотите изменить это положение на белый текст на черном фоне. Сначала вы должны добавить свой набор правил с объявлением, чтобы текст был белым: Если бы вы его загрузили, у вас был бы белый текст на белом фоне, так что вы бы ничего не увидели. Следующим шагом будет добавление объявления для изменения цвета фона: Если вы загрузите это на веб-страницу, вы увидите что-то вроде этого: Результаты могут показаться немного скудными, но вы узнаете больше объявлений CSS для обработки размера фона и интервалов в последующих уроках. Все значения цвета и фона, которые мы использовали до сих пор, представляют собой простых текстовых английских слов , таких как «красный» или «черный». Однако вы не можете определить каждый возможный цвет конкретным словом. Чтобы указать именно тот цвет, который вам нужен, обычно необходимо использовать шестнадцатеричные коды цветов, которые обычно называются шестнадцатеричными кодами ( шестнадцатеричный сокращенно от шестнадцатеричный ). Шестнадцатеричный код - это серия из шести символов , состоящая из букв и цифр , используемая для определения точного цвета.Он отформатирован со знаком числа в начале, например: Иногда вы также можете встретить трехзначный шестнадцатеричный код , но это всего лишь сокращение и в конечном итоге представляет собой полный шестизначный код. Например, Существует логика, по которой буквы и цифры складываются в какой цвет, но шестнадцатеричные коды, как правило, - это не то, что можно запомнить и сразу вспомнить .Вместо этого существует широкий спектр инструментов для выбора цвета, которые могут помочь вам найти цвет, который выглядит так, как вы хотите, а затем подсказать вам применимый шестнадцатеричный код. Например, если вы введете в Google «палитру цветов», вы найдете простой вариант, встроенный в результаты: Вы также можете использовать: Представьте, что вы создали абзац с белым текстом на черном фоне, как мы это делали ранее, но вы подумали, что фон слишком темный. Может быть, вы хотите, чтобы он был не совсем черным, а скорее темно-серым.Вы можете попытаться найти список названий цветов, которые ваш браузер распознает, и посмотреть, сможете ли вы выбрать один из них - Набор правил и объявление будут точно такими же, как то, что вы видели до сих пор , но вместо английского слова для значения вы должны использовать шестнадцатеричный код: Если вы загрузили это на веб-страницу, вы увидите более светлый фон: Значения английских слов, которые вы использовали, на самом деле являются сокращением браузера для шестнадцатеричных кодов .Например, вместо использования красного в качестве значения вы можете использовать # FF0000, чтобы получить тот же цвет. Попробуйте добавить каждое из этих объявлений во входные данные ниже: Селектор для набора правил уже определен для вас и нацелен на абзац справа от него. После того, как вы попробуете эти объявления, попробуйте самостоятельно изменить некоторые значения . Например, попробуйте заменить некоторые названия цветов, такие как «зеленый» или «синий», или попробуйте найти шестнадцатеричный код своего любимого цвета на сайте выбора цвета и введите его здесь. При использовании названия цвета, такого как «зеленый», не включайте цифровой знак. Например, Откройте файл styles.css в своем проекте GCF Programming Tutorials в текстовом редакторе, и давайте добавим несколько новых объявлений цветов. Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его. Если вы загрузите файл index.
) в каждом поле.
CSS
.wrapper {
ширина: 620 пикселей;
высота: 110 пикселей;
маржа: 0;
отступ: 10 пикселей;
граница: сплошная, средняя бирюза, 6 пикселей;
}
.wrapper
используется для назначения стилей объекту
ширины
и высоты
, а также его поля
и заполнения .
border
для установления границы вокруг внешнего края элемента.Эта граница представляет собой сплошную линию шириной 6 пикселей и имеет цвет , средний бирюзовый цвет
. .box
, который определяет эти общие свойства:
.box {
ширина: 290 пикселей;
высота: 100 пикселей;
маржа: 0;
отступ: 4px 6px;
шрифт: 28px "Marker Felt", "Zapfino", курсив;
дисплей: гибкий;
justify-content: center;
align-items: center;
}
.box
устанавливает размер каждого поля, а также конфигурацию шрифта, используемого в нем. Мы также используем CSS Flexbox, чтобы легко центрировать содержимое каждого поля. Мы включаем режим flex
, используя display: flex
, и устанавливаем justify-content
и align-items с
на center
. Затем мы можем создать класс для каждого из двух блоков, который определяет свойства, различающиеся между ними.
.boxLeft {
плыть налево;
цвет фона: rgb (245, 130, 130);
контур: 2px сплошной темно-красный;
}
.Класс boxLeft
, который хитроумно используется для стилизации поля слева, перемещает поле влево, а затем устанавливает цвета:
на
rgb (245, 130, 130)
.
, контур вообще не влияет на макет; он рисует поверх всего, что может оказаться за пределами рамки элемента, вместо того, чтобы освобождать место, как это делает граница
.Этот контур представляет собой сплошную темно-красную линию толщиной в два пикселя. Обратите внимание на использование ключевого слова darkred
при указании цвета. цвета
будет унаследовано от ближайшего содержащего его элемента, который его определяет. По умолчанию это черный цвет.
.boxRight {
float: right;
цвет фона: hsl (270 градусов, 50%, 75%);
Контур: 4px пунктирная rgb (110, 20, 120);
цвет: hsl (0град, 100%, 100%);
текст-оформление: подчеркивание волнистым # 88ff88;
тень текста: 2px 2px 3px черный;
}
text-decoration: подчеркивание волнистым # 88ff88
. .boxRight
описывает уникальные свойства прямоугольника, нарисованного справа. Он настроен таким образом, чтобы поле перемещалось вправо, чтобы оно отображалось рядом с предыдущим полем. Затем устанавливаются следующие цвета:
устанавливается с использованием значения HSL, указанного с помощью hsl (270deg, 50%, 75%)
. Это средний фиолетовый цвет. прямоугольника
используется для указания, что прямоугольник должен быть заключен в пунктирную линию толщиной четыре пикселя, имеющую более глубокий фиолетовый цвет ( rgb (110, 20, 120)
). color
значения hsl (0deg, 100%, 100%)
. Это один из многих способов указать белый цвет. text-decoration
. text-shadow
.Его параметр цвет
установлен на черный
.
, используя «цвет»
в качестве значения его атрибута type
.
представляет цвет только в шестнадцатеричной системе счисления, описанной выше. Пример: выбор цвета
HTML
) и пустой элемент абзаца (
), в который мы выведем текст из нашего JavaScript. код.
CSS
#box {
ширина: 500 пикселей;
высота: 200 пикселей;
граница: 2px сплошной RGB (245, 220, 225);
отступ: 4px 6px;
шрифт: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}
JavaScript
.
пусть colorPicker = document.getElementById ("colorPicker");
let box = document.getElementById («коробка»);
пусть output = document.getElementById («вывод»);
box.style.borderColor = colorPicker.value;
colorPicker.addEventListener ("ввод", функция (событие) {
box.style.borderColor = event.target.value;
}, ложный);
colorPicker.addEventListener ("изменение", функция (событие) {
output.innerText = "Цвет установлен на" + colorPicker.value + ".";
}, ложный);
Событие
отправляется каждый раз, когда значение элемента изменяется; то есть каждый раз, когда пользователь настраивает цвет в палитре цветов.Каждый раз, когда приходит это событие, мы устанавливаем цвет границы поля в соответствии с текущим значением средства выбора цвета.
получено, когда значение палитры цветов завершено. Мы отвечаем установкой содержимого элемента
с идентификатором «output»
на строку, описывающую окончательно выбранный цвет. Выбор подходящих цветов
Базовый цвет
Реализация палитры
Ресурсы по теории цвета
Цвет и специальные возможности
Пример оформления палитры
# D79C7A
, который представляет собой подходящий ржавый оранжево-красный цвет, столь стереотипный для поверхности Марса. D79C7A
) в поле «Базовый RGB» в нижнем левом углу инструмента: # 508D7C
. # 556E8D
. Этот цвет будет использоваться в качестве основного цвета, чтобы его можно было использовать с осторожностью, чтобы выделить вещи, например, в заголовках или при выделении вкладок или других индикаторов на сайте: Цвет, фон, контраст и печать
color-adjust
, чтобы сообщить браузеру, что он не должен вносить изменения в внешний вид контента. , регулировка цвета,
, , экономия,
, указывает, что браузеру разрешено вносить изменения внешнего вида, которые он считает необходимыми, чтобы попытаться оптимизировать разборчивость и / или экономичность печати содержимого, учитывая тип устройство вывода, на которое отрисовывается документ. color-adjust
to точный
, чтобы сообщить браузеру, что элемент или элементы, на которых вы его используете, были разработаны специально для наилучшей работы с цветами и изображениями, оставленными как есть. С этим набором браузер не будет вмешиваться в внешний вид элемента и будет рисовать его, как указано в вашем CSS. color-adjust: точный
приведет к тому, что ваш CSS будет использоваться точно так, как указано.Если браузер предоставляет пользовательские настройки для изменения вывода (например, флажок «Не печатать фоны» в диалоговом окне печати), это переопределяет значение настройки цвета
. - javatpoint
Синтаксис
javaTpoint
<центр>
Язык гипертекстовой разметки
Проверить это сейчас
javaTpoint
<центр>
<таблица>
№ рулона
Имя
101
Абхай
102
Четан
103
Мэнприт
104
Ракеш
105
Сумит
Проверить это сейчас
Поддержка браузера
цветов фона в электронной почте HTML> Litmus
Фоновые изображения и CSS в электронном письме в формате HTML
Создание надежного электронного письма в формате HTML
Полное руководство по CSS
Цвет фона таблицы HTML
background-color
, чтобы установить цвет фона для вашей таблицы. Вы также можете указать отдельный цвет фона для строк и ячеек таблицы, если хотите. Цвет фона для всей таблицы
background-color
против тега table
.
Заголовок таблицы
Заголовок таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Цвет фона строки таблицы
tr
). border-collapse: collapse;
, чтобы обрушить границу.
Заголовок таблицы
Заголовок таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Цвет фона отдельной ячейки
td
или тег th
, в зависимости от того, является ли ячейка нормальной строкой данных таблицы или частью заголовка таблицы).
Заголовок таблицы
Заголовок таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Использование классов
Заголовок
Заголовок
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Ячейка таблицы
Как установить цвет фона и переднего плана на веб-странице
Doohickey
тело {цвет: # DAD9C2;
цвет фона: # 4D3722;}
Благодаря этому во внешней таблице стилей любая веб-страница, связанная с этой таблицей стилей, будет иметь текст, отображаемый темно-коричневым цветом на кремовом фоне, если только он не был переопределен встроенным или встроенным стилем или пользовательской таблицей стилей.
Встроенные или внешние стили
h2 {color: # D77BA9;}
h3 {background-color: # E97443;}
Встроенный стиль
В первом примере Айв изменил цвет текста для элемента заголовка h2. Во втором примере я изменил цвет фона для элемента заголовка h3.В последнем примере я использовал правило встроенного стиля, чтобы изменить цвет фона абзаца на «бурливуд».
Почти информационный бюллетень
Изменение списка хостов. Скоро опубликую новую форму подписки.
Знаете ли вы ...
На сайте участника есть около 100 соответствующих стандартов HTML и CSS руководств, 31 удобная справочная таблица, перепечатываемый контент, веб-графика, эксклюзивные шрифты, бесплатное программное обеспечение, бесплатные электронные книги и многое другое? И все это менее чем за 9 центов в день! [ Подробности ]
Как сделать фоновый рисунок цветным в Dreamweaver | Small Business
Откройте проект
« Дизайн »
Доступ к свойствам страницы
Установка цвета фона
Базовый CSS: цвета в CSS
Цвета в CSS
Цвет текста
, элемент
или любой другой, текст, который вы добавляете на свою веб-страницу, будет черным по умолчанию . Если вы хотите изменить цвет вашего текста, вы можете использовать объявление CSS color
, чтобы установить любой цвет, который вы хотите, например: цвет: красный;
:
цвета
с желаемым цветом в качестве значения: p {
красный цвет;
}
color
относится конкретно к тексту.Он не меняет фон, очертания или что-то еще. Если применить его к элементу HTML, не содержащему текста, он ничего не сделает. Цвет фона
background-color
. Выглядит это так: цвет фона: черный;
:
p {
цвет белый;
}
p {
цвет белый;
цвет фона: черный;
}
Шестнадцатеричный код
# 4C4C4C
# AA22DD
можно сократить до # A2D
. darkgray
, может быть, - но более точный способ получить именно то, что вам нужно, - это использовать шестнадцатеричный код. p {
цвет белый;
цвет фона: # 5E5D5D;
}
Попробуй!
цвет: #FFF;
цвет фона: # 000;
color: #green;
неверен, поэтому следует использовать цвет : зеленый;
вместо этого.
Сделай сам!
body
, который вы уже создали: background-color: #EEE;
div
, который содержит весь текст обзора. В конце концов у нас будет более одного div
на странице, поэтому давайте создадим новый набор правил, который будет использовать класс, который мы добавили в качестве селектора:.рассмотрение {
цвет фона: белый;
}
#header
, поэтому мы можем просто добавить туда следующие объявления: background-color: # 333;
цвет белый;
button
, так что продолжайте и добавьте эти объявления к этому: color: white;
цвет фона: # 28A745;