CSS HEX Colors
❮ Предыдущая Далее ❯
Шестнадцатеричный цвет указывается с помощью: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) шестнадцатеричные целые числа указывают компоненты цвет.
HEX Value
В CSS цвет может быть указан с помощью шестнадцатеричного значения в следующем виде:
# rrggbb
00 и ff (то же, что десятичное число 0-255).
Например, #ff0000 отображается красным цветом, потому что для красного установлено максимальное значение (ff), а для остальных — наименьшее значение (00).
Чтобы отображать черный цвет, установите все значения на 00, например: #000000.
Для отображения белого цвета установите все значения на ff, например это: #ffffff.
Поэкспериментируйте, смешав следующие шестнадцатеричные значения:
Пример
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa5 00
#6a5acd
Попробуйте сами »Оттенки серого часто определяются с использованием одинаковых значений для всех трех источников света: 2 #b4b4b4
#f0f0f0
#f9f9f9
Попробуйте сами »3-значное шестнадцатеричное значение
Иногда в исходном коде CSS можно увидеть 3-значный шестнадцатеричный код.
Трехзначный шестнадцатеричный код является сокращением для некоторых шестизначных шестнадцатеричных кодов.
Трехзначный шестнадцатеричный код имеет следующую форму:
# rgb
Где r, g и b представляют красный, зеленый и синий компоненты со значениями от 0 до f.
Трехзначный шестнадцатеричный код можно использовать только в том случае, если оба значения (RR, GG и BB) одинаковы для каждый компонент. Итак, если у нас есть #ff00cc, это можно записать так: #f0c.
Вот пример:
Пример
body {background-color: #fc9; /* то же, что и #ffcc99 */
}
h2 {
цвет: #f0f; /* то же, что и #ff00ff */
}
р {
цвет: #b58; /* то же, что и #bb5588 */
}
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
900 99 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools использует W3.CSS.
Базовый CSS: Цвета в CSS
Урок 5: Цвета в CSS
/en/basic-css/text-styling-in-css/content/
Цвета в CSS
По умолчанию все элементы HTML которые вы добавляете на свои веб-страницы, выглядят абсолютно черно-белыми. Хотя иногда это может быть именно то, к чему вы стремитесь, добавление цвета может добавить визуальный интерес к странице, а CSS упрощает изменение. Изменение цвета обоих text и backgrounds в элементах HTML могут иметь большое значение для того, чтобы сделать ваши веб-страницы более уникальными и удобочитаемыми.
Цвет текста
Будь то элемент или любой другой, текст, который вы добавляете на свою веб-страницу, по умолчанию будет черным .
color , чтобы установить цвет на любой, какой вы хотите, например:цвет: красный;
Например, рассмотрим простой элемент
Вот абзац.
Если бы вы загрузили это на веб-страницу, вы бы увидели черный текст на белый фон:
Допустим, вы хотите, например, сделать текст красным. Все, что вам нужно сделать, это добавить набор правил CSS , который использует объявление color с желаемым цветом в качестве значения:
p {
красный цвет;
} Если бы вы загрузили это на веб-страницу, вместо этого вы бы увидели красный текст:
Имейте в виду, что объявление color относится именно к тексту. Он не меняет фон, контуры или что-то еще. Если применить его к HTML-элементу, который не содержит текста, он ничего не сделает.
Цвет фона
Конечно, раскрашивать стоит не только текст.
Если вы хотите раскрасить остальную часть веб-страницы, например, части ваших HTML-элементов, которые не являются текстом, вам нужно будет использовать background-color Вместо объявления CSS. Выглядит это так:
background-color: black;
Например, давайте рассмотрим еще один простой элемент
Вот другой абзац
Опять же, если вы загрузите этот элемент на веб-страницу, вы увидите черный текст на белом фоне. Представьте, что вы хотите изменить это на белый текст на черном фоне. Сначала вы должны добавить свой набор правил с объявлением, чтобы сделать текст белым:
р {
белый цвет;
} Однако, если бы вы загрузили это, у вас был бы белый текст на белом фоне, так что вы бы ничего не увидели. Следующим шагом будет добавление объявления для изменения цвета фона:
p {
белый цвет;
цвет фона: черный;
} Если вы загрузите это на веб-страницу, вы увидите что-то вроде этого:
Пока что результаты могут показаться немного сжатыми, но вы узнаете больше об объявлениях CSS для управления размером фона и интервалами в следующих уроках.
Шестнадцатеричные коды
Все значения цвета и цвета фона, которые мы использовали до сих пор, представляли собой простых английских слов , таких как «красный» или «черный». Однако вы не можете определить каждый возможный цвет с помощью определенного слова. Чтобы указать именно тот цвет, который вы хотите, вам обычно нужно использовать шестнадцатеричные коды цветов, которые обычно называются
Шестнадцатеричный код представляет собой шестизначный ряд букв и цифр используется для определения точного цвета. Он отформатирован с числовым знаком в начале, например так:
#4C4C4C
Иногда вы также можете видеть трехсимвольные шестнадцатеричные коды , но они просто сокращены и в конечном итоге представляют собой полный шестизначный код. Например, #AA22DD можно сократить до #A2D .
Вы также можете использовать:
- Любое количество специализированных веб-сайтов для выбора цвета
- Инструменты, встроенные в такие программы, как Photoshop или Illustrator
Представьте, что вы сделали абзац с белым текстом на черном фоне, как мы делали ранее, но вам показалось, что фон слишком темный. Может быть, вы хотите, чтобы он был не совсем черным, а скорее темно-серым. Вы можете попытаться найти список названий цветов, которые распознает ваш браузер, и посмотреть, сможете ли вы выбрать одно из них — 9.
Набор правил и объявление будут в точности такими же, как то, что вы видели до сих пор , но вместо английского слова для значения вы должны использовать шестнадцатеричный код:
p {
белый цвет;
цвет фона: #5E5D5D;
} Если вы загрузите это на веб-страницу, вы увидите более светлый фон:
Значения английских слов, которые вы использовали, на самом деле всего сокращение браузера для шестнадцатеричных кодов . Например, вместо красного в качестве значения можно использовать #FF0000, чтобы получить тот же цвет.
Попробуйте!
Попробуйте добавить каждое из этих объявлений к входным данным ниже:
color: #FFF; цвет фона: #000;
Селектор для набора правил уже определен для вас и нацелен на абзац справа от него. После того, как вы попробуете эти объявления, попробуйте самостоятельно изменить некоторые значения
Например, попробуйте заменить некоторые названия цветов, например «зеленый» или «синий», или попробуйте найти шестнадцатеричный код вашего любимого цвета на сайте выбора цвета и введите его здесь. При использовании названия цвета, такого как «зеленый», не включайте знак номера. Например, цвет : #зеленый; неверный, поэтому следует использовать цвет : зеленый; Вместо .
Сделай сам!
Откройте файл styles.css в проекте GCF Programming Tutorials в текстовом редакторе и давайте добавим несколько новых объявлений цветов. Для лучшего понимания убедитесь, что вы действительно вводите этот код, а не копируете и вставляете его.
- Во-первых, давайте добавим общий цвет фона для страницы. Сначала его будет не так много видно, но позже он станет более заметен. Добавьте это к набору правил
body, который вы уже создали:background-color: #EEE;
- Мы также добавим фон ко всему элементу
div, который содержит весь текст обзора.
