Викиучебник

CSS/Цвет: различия между версиями

Интерактивная навигация по истории
Следующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Новая страница: «Цвета могут быть определены для различных объектов. Этот текст включает ("<code>color: white</code>")...»
 
Нет описания правки
Строка 1:
Цвета могут быть определены для различных объектов. Этот текст включает ("<code>color: white</code>"), фон ("<code>background-color: white</code>"), и границы ("<code>border-color: gray</code>").
 
цвет текста (color: black), цвет фона (background-color: white) и цвет границы (border-color: gray).
 
Например, правило CSS, которое устанавливает для всех элементов h1 белый текст на красном фоне:
 
Например правило CSS, которое устанавливается дя всего {{HTML:element|h1}} элемент имеет белый текст на красном фоне:
<source lang="css">
h1 {
h1 { color: white; background-color: red; }
color: white;
background-color: red;
}
</source>
 
Методы спецификации цветов, обзор:
* Английские названия, такие как<code> color: white</code>
* Шестнадцатеричное значение RGB, такихтакие как <code>color: #ff0000</code>
* Десятичные RGB значения, например, <code>color: rgb(255, 0, 0)</code>
* Десятичные RGBA значения, такие как <code>color: rgba(255, 0, 0, 0.2)</code>
* HSL значение, например <code>color: hsl(120, 100%, 50%)</code>
* HSLA значение, например <code>color: hslhsla(0, 100%, 50%, 0.5)</code>
 
Спецификации цвета подробно изложены в следующих разделах.
 
Если вы установили какой-либо цвет в вашей веб-страницы, вы должны установить как фон и цвет текста для элемента body страницы. Представьте себе, если вы установите цвет текста на чёрный и не установите цвет фона. Пользователь установит цвет текста в жёлтый на чёрном фоне, довольно часто такая комбинация используется для пользователей с ослабленным зрением. Страница отображается с чёрным текстом на их чёрном фоне и непригодна для использования.
Спецификация цвета, подробно изложены в следующих разделах.
 
== Использование английских имён ==
Если вы установили какой-либо цвета в вашей веб-страницы, вы должны установить как фон и цвет текста для организма элемент страницы. Представьте себе, если вы установите цвет текста на черный и не установить цвет фона.Пользователь имеет свой предпочтительный цвет устанавливается в желтый текст на черном фоне, довольно часто используемая комбинация для пользователей с ослабленным зрением.Страница отображается с черным текстом на их черном фоне и непригодна для использования.
 
== Использование английских имен ==
Следующие 16 значений:
*aqua <div style="background-color: aqua; height: 1em; width: 4em;"></div>
Строка 37 ⟶ 44 :
*white <div style="background-color: white; height: 1em; width: 4em;"></div>
 
CSS не определяет точный оттенок, который следует использовать для именованных цветов. ИспользованиеИспользуйте RGB-значения, если точный оттенок имеет важное значение.
 
== Шестнадцатеричное значение RGB ==
 
<div style="text-align: center; float: right; margin: 0em 0em 1em 1em; background-color:white">
{| class="wikitable"
Строка 77 ⟶ 85 :
|}
</div>
 
Цвет можно задавать в шестнадцатеричном виде. Например:
 
<source lang="css">
h1 {
color: #ffffff;
}
</source>
 
Либо в сокращённой форме:
 
<source lang="css">
h1 {
color: #fff;
}
</source>
 
Первые два символа, идущие после #, обозначают красный, следующие два — зелёный, и последние два — синий.
 
== RGB форма записи ==
 
RGB — это сокращение от red(красный), green(зелёный) и blue(синий). Эти три цвета при смешивании создают все другие цвета на экране компьютера.
 
Существует два способа записи, которые нельзя смешивать:
 
числами от 0 до 255
 
<source lang="css">
h1 {
color: rgb(255, 255, 255);
}
</source>
 
или в процентах (%)
 
<source lang="css">
h1 {
color: rgb(100%, 100%, 100%);
}
</source>
 
Следующие три способа появились только в CSS3.
 
== RGBA запись ==
 
RGBA — это RGB с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0(прозрачность) до 1(непрозрачность).
 
Пример:
 
<source lang="css">
div {
background-color: rgba(0, 0, 0, 0.5);
}
</source>
 
== HSL запись ==
 
HSL — это цветовая модель, которая определяется тоном, насыщенностью и яркостью.
 
Пример:
 
<source lang="css">
div.red {
background-color: hsl(0, 100%, 50%);
}
div.green {
background-color: hsl(120, 100%, 50%);
}
div.blue {
background-color: hsl(240, 100%, 50%);
}
</source>
 
== HSLA запись ==
 
HSLA — это HSL с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0(прозрачность) до 1(непрозрачность).
 
Пример:
 
<source lang="css">
div.red {
background-color: hslа(0, 100%, 50%, 0.5);
}
</source>
 
[[Категория:CSS]]
Источник — https://ru.wikibooks.org/wiki/CSS/Цвет