Цвета | CSS
Выделение цветом участка текста — распространённый способ привлечь внимание пользователя на странице. Различные рекламные баннеры так и норовят сообщить нам о невероятной скидке, или что предложение закончится сегодня. Так же такое выделение может обозначать важную информацию, которая обязательно должна быть прочитана.
Используя CSS можно устанавливать цвет текста как для всей странице, так и для небольшого участка. Это определяется селектором, который будет выбран. Сам же цвет устанавливается с помощью свойства color, значением которого является цвет.
В этом уроке цвет будет записан в формате HEX — это шестнадцатеричное представление цвета, где #ffffff означает белый цвет, а #000000 чёрный. Для удобства, в конце урока, будет оставлена ссылка на портал, где можно выбрать любой цвет и получить его значение в формате HEX. Подробнее про цветовые модели в CSS будет рассказано в одном из следующих уроков.
Создадим параграф и выделим в нём одно слово. Для этого обернём в строчный тег <span> и дадим произвольный класс, с помощью которого и будем выбирать элемент в CSS:
<p><span>Внимание!</span> Важная информация</p>
.info {
color: #5263f3;
}
Внимание! Важная информация
Чтобы установить цвет текста для всей страницы можно использовать селектор body. Свойство color является наследуемым, поэтому цвет будет установлен для всех текстовых элементов:
body {
color: #333333;
}
Задание
В редакторе добавьте элемент <span> с классом violet и установите для него цвет равный #9400d3. Для подключения стилей воспользуйтесь тегом <style>.
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код.
Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Обычно нам нужно несколько дней для внесения правок.Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
background-color — цвет фона | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).
Обратите внимание, что по умолчанию фон не наследуется от родительского элемента, однако дочерние элементы, благодаря прозрачности своего фона (задано по умолчанию), будут содержать часть фона родительского элемента.
Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона. Все доступные названия цветов, их шестнадцатеричные значения и визуальное отображение оттенка вы можете посмотреть в таблице цветов.
Примечание: если добавить свойство background-color к тегу <body>, цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега <html>, то фон элемента <body> будет заполнять только область с содержимым, если оно есть.
Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.
| Значение по умолчанию: | transparent |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object. style.backgroundColor=»#00FF00″ |
Синтаксис
background-color: цвет|transparent|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| цвет | Цвет фона можно установить различными способами: указать имя цвета, использовать шестнадцатеричные значения, с помощью синтаксиса rgb (rgba) или hsl (hsla). |
| transparent | Указывает, что фон будет прозрачным. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
background-color:
red
blue
#000000
#ff9900
rgb(255,255,255)
rgb(255,130,255)
transparent
div {
border-style: solid;
}
Более приятная цветовая палитра для Интернета.
Цвета — более приятная цветовая палитра для Интернета.Более приятная цветовая палитра для Интернета.
Создание скинов для ваших прототипов стало проще — colors.css — это коллекция классов скинов, которые можно использовать при создании прототипов в браузере. 647B уменьшены и заархивированы.
Военно-морской #001f3f
Синий #0074D9
Аква #7FDBFF
бирюзовый #39CCCC
ПУРПУРНЫЙ #B10DC9
#F012BE темно-бордовый #85144b
КРАСНЫЙ #FF4136
АПЕЛЬСИН #FF851B
ЖЕЛТЫЙ #FFDC00
ОЛИВКОВЫЙ #3D9970
ЗЕЛЕНЫЙ #2ECC40
ЛАЙМ #01FF70
ЧЕРНЫЙ #111111
СЕРЫЙ
СЕРЕБРЯНЫЙ #ДДДДДД
БЕЛЫЙ #FFFFFF
Для сравнения
Blue
Aqua
Тил
Олив.
0081 OrangeRED
Maroon
Fuchsia
Purple
SILLIN
Включает классы для установки цвета текста и/или границы.
Фиолетовый
Фуксия
Бордовый
Желтый
Оранжевый
Серебристый
/*
Используется в сочетании с базовым классом границы
то есть что-то вроде
.border { стиль границы: сплошной; ширина границы: 1px; }
*/
.border--aqua {border-color:#7FDBFF;}
.border--черный {border-color:#000000;}
.border -- blue { цвет границы:#0074D9;}
.border--фуксия {border-color:#F012BE;}
.border--зеленый {border-color:#2ECC40;}
.border--lime {border-color:#01FF70;}
.border--бордовый {border-color:#85144B;}
.border--navy {border-color:#001F3F;}
.border--olive {border-color:#3D9970;}
.border -- оранжевый { цвет границы:#FF851B;}
.border--purple {border-color:#B10DC9;}
.border--red {граница-цвет:#FF4136;}
.border--silver {border-color:#DDDDDD;}
. border--grey {граница-цвет:#AAAAAA;}
.border--бирюзовый { border-color:#39CCCC;}
.border--white {border-color:#FFFFFF;}
.border--желтый {border-color:#FFDC00;}
border--grey {граница-цвет:#AAAAAA;}
.border--бирюзовый { border-color:#39CCCC;}
.border--white {border-color:#FFFFFF;}
.border--желтый {border-color:#FFDC00;}
Легко установить цвет встроенных элементов SVG, прикрепив класс темы оформления, как показано ниже.
Легко задайте цвет обводки встроенных элементов SVG, прикрепив класс темы оформления, как показано ниже.
Хотите использовать их в проекте?
Установить с помощью npm
npm install --save-dev colors.css
Установить gem
gem install clrs
Ссылка на файл в заголовок вашего документа
amazonaws.com/colors-css/2.2.0/colors.min.css">
Хотите использовать эти цвета в Photoshop, Illustrator, Gimp или Inkscape? Загрузите один из этих образцов.
colors-css.aco (Photoshop) colors-css.ase (Illustrator) colors-css.gpl (Gimp/Inkscape)
Используйте цвета ответственно Посмотрите эти 90 примеров A11Y соответствующие сочетания цветов.
Как определить цвета как переменные в CSS?
Если в вашей системе установлен Ruby, вы можете сделать это:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
Это было сделано для Rails, но см. ниже, как изменить его, чтобы он работал отдельно.
Вы можете использовать этот метод независимо от Rails, написав небольшой скрипт-оболочку Ruby.
который работает в сочетании с site_settings.
rb и учитывает ваши CSS-пути, и
который вы можете вызывать каждый раз, когда хотите повторно сгенерировать свой CSS (например, во время запуска сайта)
Вы можете запустить Ruby практически в любой операционной системе, поэтому он должен быть достаточно независимым от платформы.
напр. wrapper: generate_CSS.rb (запускайте этот скрипт всякий раз, когда вам нужно сгенерировать свой CSS)
#/usr/bin/ruby # желательно Ruby 1.9.2 или выше require './site_settings.rb' # при условии, что ваш файл site_settings находится на том же уровне CSS_IN_PATH = File.join (ПУТЬ К ВАШЕМУ ПРОЕКТУ, 'входные файлы css') CSS_OUT_PATH = File.join(ПУТЬ К ВАШЕМУ ПРОЕКТУ, 'статический', 'таблицы стилей') Site.generate_CSS_files (CSS_IN_PATH, CSS_OUT_PATH)
метод generate_CSS_files в site_settings.rb затем необходимо изменить следующим образом:
модуль Сайт # ... см. ссылку выше для полного содержания # Модульный метод, который генерирует ВЫХОДНОЙ CSS-файл *.
css для каждого ВХОДНОГО CSS-файла *.css.in, который мы находим в нашем каталоге CSS
# замена любого упоминания о цветовых константах, например. #SomeColor# с соответствующим цветовым кодом, определенным в Site::Color.
#
# Мы будем генерировать файлы CSS только в том случае, если они удалены или входной файл новее/изменен
#
def self.generate_CSS_files(input_path = File.join(Rails.root.to_s, 'общедоступный', 'таблицы стилей') ,
output_path = File.join(Rails.root.to_s, 'общедоступный', 'таблицы стилей'))
# предполагая, что все ваши файлы CSS находятся в папке "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '')) ))
# если выходной файл CSS не существует или входной файл CSS новее, чем выходной файл CSS:
if (! File.exists?(filename_out)) || (File.stat(имя_файла_in).mtime > File.stat(имя_файла_out).mtime)
# в этом случае нам нужно создать новый выходной файл CSS:
помещает "обработка #{filename_in}\n --> создание #{filename_out}"
out_file = File.