Как изменить цвет в таблице html
Перейти к содержимому

Как изменить цвет в таблице html

  • автор:

Изменение цвета фона таблицы HTML по нажатию клавишы и компонента type=»color»

Постараюсь описать кратко: По заданию требуется в таблице HTML добавить форму с кнопкой. Перед нажатием на кнопку пользователь выбирает цвет и номер одной ячейки. Все ячейки таблицы закрашиваются в этот цвет кроме выбранной. Попробовал реализовать выбор ячейки через таблицу кнопок и палитры color:

// И, соответственно, передаю id и name в функцию function MyFunc(id, name) < var Elements = new Array(); var SelectedColor = document.getElementByName("Color Picker"); for (var i = 1; i for (var i = 0; i < 12; i++) < if (id == Elements[i]) continue; document.getElementById(Elements[i]).style.color = SelectedColor.value; >>
Выберите ячейку: 

Выберите цвет и нажмите кнопку для изменения цвета фона всех ячеек кроме выбранной:

Проблема заключается в том, что у меня не выходит получить значение value компонента color и передать его как параметр в стили background-color для кнопок. Если подскажите и объясните в чем ошибка буду очень благодарен! P.S. В HTML и JS новичок

Отслеживать
24.2k 5 5 золотых знаков 35 35 серебряных знаков 68 68 бронзовых знаков
задан 1 окт 2020 в 13:51
ScreamOfSoul ScreamOfSoul

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Value нужно брать сразу, а не пытаться получить его у переменной. Ну и куча мелких ошибок, держите код и удачи в разбирательстве =)

function MyFunc(cell_name) < var Elements = []; var SelectedColor = document.getElementById("ColorPicker").value; for (var i = 1; i for (var i = 0; i < 12; i++) < if (cell_name == Elements[i]) continue; else document.getElementById(Elements[i]).style.backgroundColor = SelectedColor; >>
 Выберите ячейку: 

Выберите цвет и номер кнопки и нажмите кнопку для изменения цвета фона всех кнопок кроме выбранной:

Отслеживать
ответ дан 1 окт 2020 в 14:31
Инквизитор Инквизитор
5,955 1 1 золотой знак 7 7 серебряных знаков 25 25 бронзовых знаков
Спасибо большое, теперь все понятно!
1 окт 2020 в 14:51

= document.getElementById(«n» + i.toString()).id находим элемент по id, чтобы взять у него id ? А не проще ли просто = «n» + i ?)

1 окт 2020 в 15:00

проще. Но я оставил код достаточно грязным, чтобы можно было разобраться, сравнивая «до» и «после» =) Так бы я вообще сделал все иначе.

1 окт 2020 в 16:00

вы ж не добавили функционал для выбора неокрашиваемой кнопки, почему она у вас окрашивается? @Инквизитор

1 окт 2020 в 17:03

посмотрите внимательнее. в текстовом инпуте вводится номер кнопки, которой предстоит остаться неизменной. Если не ввести, или ввести что-то иное, чем номера с 1 по 12, окрасятся все.

2 окт 2020 в 11:58

  1. onclick=»MyFunc» — Такая запись в HTML, то же самое, что в JS:
element.onclick = function() < MyFunc >; 

Т.е. просто упоминание названия функции в коде, это ничего не делает. Её нужно вызывать через скобки MyFunc() , и передать туда параметры.

  1. getElementByName — не функция. Есть getElementsByName который возвращает коллекцию элементов, откуда можно взять первый [0] элемент.
  2. i.toString() + «n» — перепутали местами, во-вторых, число не нужно дополнительно приводить к строке, она и так станет строкой, если её добавляют к строке. Должно быть «n» + i
  3. Elements[i] — и так уже ранее полученная ссылка на HTML-элемент. Не нужно её дополнительно отправлять в document.getElementById(Elements[i])
  4. С большой бувы принято называть функции-конструкторы. Обычные переменные — с маленькой.

В общем-то, «на месте» можно исправть это так:

function MyFunc(id) < var Elements = new Array(); var SelectedColor = document.getElementsByName("Color Picker")[0]; for (var i = 1; i for (var i = 0; i < 12; i++) < if (id == Elements[i]) continue; Elements[i].style.backgroundColor = SelectedColor.value; >>
Выберите ячейку: 

Выберите цвет и нажмите кнопку для изменения цвета фона всех ячеек кроме выбранной:

Но если в коде появляются нумерованные id — значит что-то идет не так!) Нумерацию текстов кнопок тоже можно было бы сделать не руками, а циклом. И у вас не реализован выбор клетки. Чтобы не возиться с циклами и хранением / переключением цвета при выборе активной кнопки, легче привязать все цвета к CSS, а через JS управлять переключением соответствующих значений. Около того:

create_table(); onclick_select_button(); onclick_change_colors(); /***/ function onclick_change_colors() < /*** При клике на "#btn" устанавливает новое значение для CSS-переменной --bg которая встроена в HTML-таблицу. От неё зависит цвет всех ячеек. ***/ let table = document.querySelector("#table"); let color = document.querySelector("#color"); document.querySelector("#btn").addEventListener("click", function() < table.setAttribute("style", "--bg: " + color.value); >); > function onclick_select_button() < /*** При клике на кнопку внутри таблицы, добавляет на эту кнопку класс-метку "active" К этому классу привязан background: red; у которого приоритет выше, чем у цветов всех остальных кнопок ***/ let table = document.querySelector("#table"); table.addEventListener("click", function(e) < if (e.target.tagName !== "BUTTON") return; let active = document.querySelector("#table button.active"); if (active) active.classList.remove("active"); // находит .active и удаляет у него этот класс e.target.classList.add("active"); // добавляет на текущую кликнутую кнопку >); > function create_table() < let table = document.querySelector("#table"); let cols = 4, rows = 3; let html = ""; for (let i = 0; i < rows; i++) < html += ""; for (let j = 0; j < cols; j++) < html += ""; > html += ""; > table.innerHTML = html; >
#table button < background-color: var(--bg); >#table button.active

Как изменить цвет текста в таблице html – html. , ,

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>… — указание цвета текста по имени.

<тег>… — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.

Пример изменения цвета текста

    Изменение цвета текста  
Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>… — указание цвета фона по имени.

<тег>… — указание цвета фона по коду.

Пример изменения цвета фона

    Изменение цвета фона  
Заголовок.

Параграф.

Жирный текст. Обычный текст.

Результат в браузере

Заголовок.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы добрались до темы цветов в HTML. Отмечу, что для управления цветом на веб-страницах в данный момент лучше использовать CSS, но иногда бывают такие ситуации, когда средства CSS недоступные (например, многие почтовые клиенты CSS не понимают). Поэтому будущему веб-мастеру просто необходимо изучить средства HTML, которые позволяют изменять цвет, например для того, чтобы делать яркие и красочные e-mail рассылки, которые будут привлекать внимание целевой аудитории сайта.

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Данная запись получилось довольно объемной, но из нее вы узнаете обо всех технических особенностях работы с цветом при помощи HTML. Начнем мы запись с того, что разберемся с вопрос: для чего нам нужно выделять цветом те или иные элементы HTML страницы. Затем мы поговорим про модель RGB, которая позволяет задавать цвета в HTML при помощи специальных кодов (попутно мы рассмотрим десятичные коды задания цвета и шестнадцатеричные значения HTML цветов). Также из данной записи вы узнаете про палитру цвета, а также поймете почему в HTML нет никакой палитры. И завершении этой публикации будут примеры изменения цвета фона, текста и ссылок.

Использование цветов в HTML

Страницы сайта были бы скучными и неинтересными без изображений, про работу с картинками изображениями в HTML мы говорили ранее и очень подробно. Но у изображений есть один существенный минус: каждое изображение – это дополнительный HTTP запрос к серверу и, соответственно, дополнительная нагрузка на хостинг.

Отмечу, что для оформления своего WordPress блога я не использовал ни одной картинки, макет полностью оформлен при помощи цвета. Как раз-таки про цвета в HTML мы сегодня с вами и поговорим . Цвета в HTML используются для разных целей, например, мы можем оформлять макеты сайта, выделяя те или иные HTML элементы страницы тем или иным цветом.

При помощи цвета мы можем акцентировать внимание наших посетителей на том или ином тексте или блоке сайта. Отметим, что состояние HTML ссылок так же определяется при помощи цвета таким образом, чтобы пользователь мог понять: на какую ссылку он уже нажимал, какую еще не посещал и на какой HTML странице он находится в данный момент.

Будьте аккуратны, используя цвета для оформления HTML документов, не все цвета сочетаются друг с другом и не каждый цвет будет приятен посетителям вашего сайта. Но об этих тонкостях вам лучше спросить у веб-дизайнеров, данная же статья поможет вам разобраться с техническими особенностями, позволяющими управлять цветом элементов HTML страниц.

Но вам не стоит забывать, что оформление должно быть отделено от содержимого, поэтому для манипуляции цветом на HTML страницах лучше использовать CSS, но об этом мы поговорим в другой публикации. Сейчас же мы посмотрим, какие средства есть в HTML для управления цветом на страницах сайта.

В отрасли IT для манипуляции цветом существует множество цветовых моделей. Самая широко распространённая модель представления цвета – это модель RGB. Про некоторые особенности данной модели мы поговорим здесь, а для более детального знакомства с RGB будет отдельная публикация. Ниже вы найдете список цветовых моделей, используемых в IT (не только в HTML и CSS):

  1. Модель RGB. Данная модель получила очень широкое распространение и, пожалуй, является одним из самых удобных и распространенных способов манипуляции цветом HTML элементов.
  2. Модель RGBA. Данная модель очень похожа на модель RGB, но включает в себя альфа-канал цвета. Особенность модели RGBA заключается в том, что она позволяет регулировать не только цвет HTML элемента, но и его прозрачность за счет наличия альфа-канала. Модель RGBA была добавлена в CSS3 и не поддерживается старыми браузерами.
  3. Модель HSL. Особенность модели HSL заключатся в том, что цвет мы задаем при помощи его параметров: оттенка, напыщенности и светлоты. Данная модель несколько более сложная в понимание, чем модель RGB.
  4. Модель HSLA. Данная модель очень похожа на модель HSL, но она так же, как и модель RGBA позволяет работать с альфа-каналом цвета, поэтому при помощи HSLA мы можем задавать не только цвет HTML элемента на странице, но и его прозрачность.
  5. Модель HSV (HSB). Данную модель не стоит путать с моделью HSL. Отметим, что первых четыре модели можно использовать в HTML или CSS для оформления веб-страниц, а вот модель HSV – нет. Модель HSV была разработана одним из основателей студии Pixar в 1978 году и очень похожа на HSL.
  6. Модель CMY или CMYK. Данная модель используется во всех цветных принтерах для печати. В основе модели CMYK лежит правило, заключающиеся в том, что печать происходит на белых листах бумаги. Любой цвет модели CMYK получается из смешения цветов Cyan (бледно-голубой, бирюзовый), Magenta (пурпурный) и желтого. У каждого цвета в модели CMY есть характеристика непрозрачности (количество краски), измеряющаяся в процентах. Но помимо трех перечисленных цветов, модель CMYK использует еще и черный цвет.

Все вышеперечисленные цветовые модели являются аппаратно-зависимыми, то есть если вы задаете цвет HTML элемента при помощи модели RGB или HSL, то нельзя с точностью утверждать, какой именно оттенок цвета увидит посетитель вашего сайта, так как мониторы у всех пользователей разные и передают они цвета по-разному. Также отметим, что в основе всех вышеперечисленных моделей лежит модель RGB и любой цвет, заданный в любой из моделей (кроме HSLA и RGBA из-за наличия альфа-канала), можно конвертировать в RGB.

Если говорить про аппаратно-независимые модели передачи цвета, то стоит отметить модель LAB. Итак, мы немного отвлеклись от работы с цветом в HTML, познакомившись с некоторыми цветовыми моделями. Отметим, что браузеры «понимают» только первых четыре модели: HSL, RGB, HSLA и RGBA. Поэтому цветом HTML элементов мы можем управлять только при помощи этих моделей.

Как формируется цвет HTML элемента: некоторые особенности модели RGB

Давайте разберемся с тем, как формируется цвет HTML элемента и с некоторыми особенностями модели RGB. Отметим, что про модель RGB, а также про другие модели, которые используются для оформления веб-страниц мы поговорим чуть позже в отдельных записях.

Итак, модель RGB расшифровывается, как Red, Green, Blue. В основе модели RGB лежит принцип аддитивности. Этот принцип заключается в том, что для получения какого-либо цвета происходит добавление цвета к черному. Для лучшего понимания представьте, что ваш экран – это черная стена и у вас есть три прожектора: первый светит красным цветом, второй светит зеленым, а третий синим. Яркость каждого прожектора вы можете регулировать при помощи линейки, на которой расположены цифры от 0 до 255. Соответственно, если вы установили для прожектора значение ноль, то он выключается и не светит, если значение 255, то прожектор дает максимально яркий цвет.

Пример того, как происходит создания цвета в модели RGB

Пример того, как происходит создания цвета в модели RGB

Таким образом получается, что если вы светите на одну и ту же точку красным и зеленым прожектором, то на черной стене вы заметите желтое пятно. Если комбинируете красный и синий, то получается пурпурный цвет, а если объединяете зеленый и синий, то световое пятно на черной стене будет цвета Cyan, но если вы направите все три прожектора на одну точку, то световое пятно будет белого цвета.

Описанный выше принцип лежит в основе модели RGB и применяется для манипуляции цветами в HTML элементов на странице в браузере.

HTML атрибуты для изменения цвета элементов: цвет фона элемента и цвет текста внутри элемента

Атрибуты в HTML используются для того, чтобы сделать элементы страницы уникальными. При помощи HTML атрибутов мы можем манипулировать цветом элементов:

  1. HTML атрибут color. Данный атрибут позволяет изменять цвет текста, находящегося внутри HTML элемента. Атрибут может принимать значения в виде называний HTML цветов и при помощи кодов модели RGB в шестнадцатеричной системе счисления и в десятичной системе счисления. Атрибут color – это уникальный HTML атрибут, который позволяет менять цвет текста внутри некоторых HTML элементов.
  2. HTML атрибут text. Данный атрибут является уникальным атрибутом тэга . Тэг вместе с тэгами и образуют структуру HTML документа. Если вы помните, то внутри контейнера размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы.
  3. HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
  4. HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу , чтобы изменить цвет ссылки, которую уже посетил пользователь.
  5. HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу . Атрибут alink меняет цвет активной HTML ссылки.
  6. HTML атрибут link. Атрибут link используется только вместе с тэгом и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.

Обратите внимание: использовать атрибуты для изменения цвета HTML элементов не рекомендуется, так как есть каскадные таблицы стилей, которые позволяют отделить оформление веб-страницы от его содержимого.

Использование десятичных кодов цвета в HTML

Итак, мы говорили о том, что прожектору можно задавать яркость цвета при помощи специальной линейки, на которой расположены пронумерованные рисочки от 0 до 255. А теперь посмотрим, как это нам поможет изменять цвет HTML элементов. Дело всё в том, что цвет текста внутри HTML элемента или цвет фона в HTML мы можем изменять при помощи десятичного кода следующим образом:

Если вы создадите HTML документ, в котором контейнер body будет описан, как в примере, то увидите:

  1. Цвет фона HTML документа стал зеленым: bgcolor=”rgb (0,255,0)”.
  2. Цвет текста HTML страницы станет синим: text=”rgb (0,0,255)”.
  3. Цвет HTML ссылки, которую пользователь не посещал, будет белым: link=”rgb (255,255,255)”.
  4. Цветы ссылки, которая открыта в данный момент, будет черным: alink=”rgb (0,0,0)”.
  5. А цвет HTML ссылки, которую уже посещали, будет красным: vlink=”rgb (255,0,0)”.

Обратите внимание: никто не запрещает вам регулировать «мощность прожектора» по своему усмотрению, вы можете задать HTML цвет, например, таким образом:

И получите цвет детской неожиданности. В этом и заключается особенность, гибкость и удобство модели RGB. Ваш монитор – черная стена, на которую светят прожекторы, а вы можете регулировать мощность этих прожекторов и создавать всевозможные цвета фона, текста и ссылки при помощи HTML атрибутов в десятичной системе счисления или, еще можно сказать: при помощи десятичных кодов цвета.

Семь цветов заданных при помощи десятичных кодов цвета модели RGB

Семь цветов заданных при помощи десятичных кодов цвета модели RGB

На самом деле неправильно говорить десятичные коды цвета в HTML, правильнее будет сказать десятичные коды цвета RGB, поскольку данная модель используется не только для оформления веб-страниц в HTML и CSS.

Шестнадцатеричные значения HTML цветов

Задавать цвет HTML элементам десятичными кодами модели RGB не очень удобно (и на данный момент не все браузеры поддерживают такой способ манипуляции цветом), так как запись будет не самая компактная, намного удобнее задавать цвет HTML элементам при помощи шестнадцатеричных значений. На рисунке ниже вы можете увидеть, как десятичные значения конвертируются в шестнадцатеричные.

Пример перевода десятичного кода цвета в шестнадцатеричный

Для тех, кто не знаком с шестнадцатеричной системой счисления, следует дать небольшое пояснение, чтобы вы без труда могли манипулировать цветом HTML элементов при помощи шестнадцатеричных кодов модели RGB. Во-первых, десятичная система счисления названа так потому, что любое число можно получить комбинацией десяти цифр (терминология важна: между числом и цифрой есть разница): 0, 1, 2, 3, 5, 6, 7, 8, 9.

В шестнадцатеричной системе счисления любое число можно записать при помощи комбинации шестнадцати цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Для простоты понимания можете считать, что a – это десять, а f – это пятнадцать. Например, число шестнадцать будет записано в шестнадцатеричной системе счисления следующим образом: 10. А число 255 будет записано, как ff.

А теперь давайте посмотрим, как мы можем задавать цвет HTML элементов при помощи шестнадцатеричных значений, повторим наш предыдущий пример, заменив десятичные коды цветов на их шестнадцатеричные аналоги:

Обратите внимание: запись цвета в HTML в шестнадцатеричном формате несколько компактнее, чем в десятичном, это первое. Второе: мощность каждого прожектора задается числами от 0 до 255. Для записи числа 255 требуется две цифры в шестнадцатеричном формате (ff = 250), поэтому яркость каждого канала цвета (наши прожекторы правильно называть цветовой канал, канал цвета) задается двумя цифрами от 0 до f.

Обратите внимание: яркость каждого канала цвета задается отдельно, но если представить, что это одно число, то максимально возможное число в шестнадцатеричной системе счисления модели RGB равно ffffff, оно даст нам белый цвет, а десятичной системе это: 16 777 215. Такое количество цветов и оттенков позволяет задать/использовать модель RGB. Это число получается из того, что у каждого цветового канала есть 256 значений яркости (от 0 до 255), соответственно: 256*256*256 = 16 777 215.

Шестнадцатеричные значения HTML цветов более компактны и наглядны, большинство веб-дизайнеров и верстальщиков для манипуляции цветом в HTML используют именно шестнадцатеричные значения, поэтому рекомендуем вам не привыкать к десятичной форме записи цвета, а сразу использовать шестнадцатеричную.

Понятно, что начинающему дизайнеру или верстальщику поначалу будет трудно ориентироваться в шестнадцатеричной форме записи цвета, поэтому практически любой графический редактор имеет так называемую палитру цвета, которая позволяет выбрать нужный цвет и получить его код для разных цветовых моделей в разных системах счисления.

Некоторые текстовые редактора, такие как Sublime Text 3, Notepad++ и Brackets имеют расширения-палитры, которые очень удобны, когда вы хотите быстро выбрать цвет и изменить его. Про IDE NetBeans в этом плане я ничего сказать не могу.

Имена цветов в HTML

HTML атрибуты в качестве значения могут принимать не только десятичные коды и шестнадцатеричные значения, но и специальные имена цветов. Изменять цвет HTML элементов при помощи его имени – не самая удачная затея. Во-первых, за именем цвета в HTML кроется код модели RGB, во-вторых, каждый браузер отображает цвет HTML элемента, заданный при помощи имени, по-разному, это зависит лишь от желания разработчиков браузера.

Поэтому использование имени цвета в HTML не рекомендуется. Модель RGB является аппаратно-зависимой, а цвет, заданный при помощи имени, зависит от браузера и даже его версии. Давайте попробуем задать цвет элементам HTML страницы при помощи имени:

Как вы понимаете, цветов и оттенков очень много. Тут стоит отметить, что HTML атрибуты не позволяют задать градиент, такая возможность есть в CSS, но об этом мы поговорим в другой записи. И для многих цветов в HTML есть имена. Таблицу именем цветов в HTML и их RGB коды вы можете найти на моем сайте.

Таблица базовых цветов в HTML: их имена и RGB коды

Таблица базовых цветов в HTML: их имена и RGB коды

Таблица сверху демонстрирует какой цвет получит HTML элемент, если вы зададите его при помощи имени. В этой таблице собраны 16 цветов и их имена, которые одобрены консорциумом W3C и должны отображаться одинаково в любом браузере. Но на самом деле в HTML можно использовать порядка 200 имен цвета, которые поддерживают основные браузеры, такие как: Opera, Chrome, Firefox, Safari, Internet Expllorer (на счет последнего данное утверждение очень спорное).

Палитра цвета в HTML

На самом деле в HTML нет никакой палитры цветов. Давайте вспомним определение слова палитра. Палитра – это небольшая тонкая дощечка четырехугольной или овальной формы, на которой художник смешивает краски и получает всевозможные цвета. Иногда в палитре делают отверстие для большого пальца, чтобы ее было удобно держать. Изображение палитры вы найдете ниже. Поэтому в HTML палитры нет.

Это пример палитры художника, на которой он смешивает краски и получает разные цвета и оттенки

Это пример палитры художника, на которой он смешивает краски и получает разные цвета и оттенки

Но в различных текстовых редакторах есть плагины палитры цвета, которые помогают быстро подобрать цвет HTML элемента. Также палитра цвета есть в графических редакторах, ведь дизайнеру не очень удобно и весело сидеть и высчитывать: какой цвет получится при той или иной яркости того или иного канал. На рисунке ниже вы можете увидеть простейшую палитру редактора Paint.

Простая цветовая палитра редактора Paint

Простая цветовая палитра редактора Paint

Отметим, что многие модули и плагины палитры цвета позволяют получить код цвета не только в формате RGB/RGBA, но и в формате других моделей. Запомните, что в HTML палитры нет, ну разве что вы художник до мозга костей и называете палитрой цвета HTML страницы те цвета, которые использовались для ее оформления (ведь иногда палитрой называют цвета, которые использует тот или иной художник, или цвета, которые использовались в создании той или иной картине).

Учимся изменять цвет текста в HTML

Мы получили очень много теории про цвета в HTML, давайте перейдем к практике и попробуем поработать с цветами HTML элементов. Перовое, что мы научимся делать – изменять цвет текста в HTML документе при помощи специальных атрибутов и тэгов. Откройте любой редактор и напишите в нем следующий код:

Цвет кнопки при наведении, отличный от класса в css

задача в том что у меня более 200 различных цветов. В вопросе написал про три.

27 сен 2017 в 19:21

@RusBolik значит 1) надо было задачу полностью описывать)) 2) тут значит скорее всего нужен js

27 сен 2017 в 19:22

Алексей, может подскажите. Я в js скриптах полный ноль

27 сен 2017 в 19:24

@RusBolik тут зависит всё от исходных данных. что это за кнопки, откуда берутся, генерируются ли через PHP или это статичная разметка, какова в целом задача и пр. Чтобы посоветовать нужно больше входных данных. Например если генерируются кнопки, то самый простой вариант — писать атрибут data к ним с прикрепленным к ним цветом и уже при наведении брать оттуда цвет. Будет некий модифицированный вариант вот такого плана: jsfiddle.net/ohk18qda . но без полного конкретного описания сказать нельзя. Ну и т.к. это будет другой вопрос по js — придется задавать его снова))

Как изменить цвет ячейки в зависимости от значения в Excel?

В этой статье вы найдете 13 примеров как изменить цвет фона ячеек в зависимости от значения в Excel. Кроме того, вы узнаете, как использовать формулы Excel для изменения цвета пустых ячеек или ячеек с ошибками в формулах.

Цвет заливки

Всем известно, что изменить цвет фона отдельной ячейки или диапазона данных в Microsoft Excel легко, просто нажав кнопку « Цвет заливки »

. Но что, если вы хотите изменить цвет фона всех ячеек с определенным значением? Более того, что если нужно, чтобы он изменялся автоматически вместе с изменениями значения ячейки? Далее в этой статье вы найдете ответы на эти вопросы и получите несколько полезных советов, которые помогут вам выбрать правильный метод для каждой конкретной задачи.

Ранее мы уже рассмотрели, как создать правило условного форматирования. Рекомендую ознакомиться с этим материалом. Ссылку на него вы также можете найти в конце этой статьи.

А сейчас на простых примерах мы рассмотрим, как в Excel можно автоматически выделить цветом интересующие нас данные.

Цветовые шкалы и гистограммы.

Ваши показатели в таблице могут быть гораздо более наглядными, если сопроводить их диаграммой. Просто выберите необходимый стиль, как это показано на рисунке ниже.

гистограмма как вариант условного форматирования ячеек

Думаю, с настройками вы сами разберетесь, несмотря на их большое количество. Но согласитесь, что получается весьма информативно и красиво. Гораздо легче ориентироваться в большом количестве цифр.

Еще одна полезная возможность – использование цветовой шкалы. Здесь вы можете установить, как будет меняться оттенок фона по направлению от меньшего к большему.

изменение цвета ячейки в зависимости от значения ячейки excel

Чем более насыщенный и темный фон, тем больше число в таблице. Как видите, здесь легко определить, какие товары и когда продаются лучше всего.

Как можно использовать значки в ячейках?

А вот еще один интересный вариант, при помощи которого можно наглядно показать динамику изменений показателей. К примеру, у нас есть отчет о состоянии исполнения каких-то проектов или заданий. Как обычно, выполнение показано в процентах. Можно попробовать этим процентам придать больше наглядности.

как добавить значки в ячейку по условию

Итак, вновь переходим в меню. Думаю, мы это уже умеем делать ��. Далее выбираем первый пункт (1) – форматировать на основании значений. Далее в меню «Стиль формата» (2) ищем пункт «Наборы значков». Выберите тот набор, который вам больше нравится. (3) Далее устанавливаем правила для каждого значка. Думаю, здесь для вас ничего сложного не будет. Я установил границы в 25,50 и 75 процентов (4). Здесь же вы можете выбрать индивидуальное оформление каждого значка.

Результат вы видите на картинке вверху. При желании можете активировать соответствующий чекбокс, чтобы показывать только значок без числа.

Как выделить цветом с ячейки с текстом?

Если нам нужно изменить цвет ячейки в зависимости от того, содержится в ней текст или число? Действуем по прежней схеме.

как изменить цвет ячейки с текстом

Выделяем A1:B10, затем щелкнем на вкладке Главная — – Создать правило – Использовать формулу.

Она будет выглядеть так:

Функция ЕТЕКСТ проверяет на наличие именно текста. Если условие выполнено, клетка будет закрашена.

Просто, не правда ли?

Изменяем цвет ячеек с числами.

Как закрасить ячейку с числом по условию? Мы должны изменить цвет ячейки в зависимости от значения в определенной клетке таблицы Эксель.

Естественно, действуем по стандартной схеме: выделяем область форматирования, затем используем выражение:

закрасить ячейки с числами по условию

формулу СЧЕТЕСЛИ. Результатом может быть только ноль или единица. А единица соответствует логическому ИСТИНА. Вот тогда-то и применяется установленный нами формат (в нашем случае – белый шрифт на синем фоне). И так перебираем все содержимое нашего диапазона.

Подобное выделение можно производить по столбцу, чтобы привлечь внимание к определенным цифрам (например, процент выполнения плана продаж). И, что важно, условие можно менять динамически – для этого не нужно корректировать никакие формулы, достаточно просто изменить текст условия в нужной клетке таблицы (в нашем случае — в A1).

Изменение цвета ячейки по ее начальным буквам.

При помощи этой функции даже можно организовать своего рода поиск по словам в таблице. Чаще всего фамилию мы ищем по начальным буквам. Сделаем так, чтобы позиции с текстом, начинающимся с определенных букв, подсвечивались.

как закрасить ячейку по начальным буквам

Определим, где мы будем выделять найденное – в A3:F19. Далее в правиле условного форматирования используем выражение:

Поясним, как это работает. В A1 находится условие поиска – первые несколько букв слова. При помощи формулы ДЛСТР($A$1) определяем длину этой строки, то есть сколько букв в ней. Затем при помощи функции ЛЕВСИМВ в каждой из ячеек нашего диапазона берем рассчитанное ранее количество букв начиная с первой слева, и сравниваем с A1. То есть, «отрезаем» слева кусочек такой же длины, как А1, и сравниваем с ним. Если есть совпадение, тогда выделяем их.

Как видите, совершенно не сложно, но может быть достаточно полезным.

Выделяем ячейки, содержащие более 1 слова.

Немного усложним предыдущее задание. Первоначальный порядок действий – то же, что и ранее. Вся хитрость заключается в применении специальной формулы, при помощи которой мы выделим текст, состоящий более чем из 2 слов.

Правило условного форматирования здесь будет такое:

Разберем, как это работает. Логика здесь не сложная:

изменить цвет ячейки, в которой больше 1 слова

  1. Между словами всегда есть пробелы.
  2. Но, поскольку пробелы в начале и в конце текста нам не нужны, избавляемся от них при помощи функции СЖПРОБЕЛЫ(А1).
  3. Подсчитаем количество символов в получившемся в п.2 тексте при помощи ДЛСТР. Запишем ДЛСТР(СЖПРОБЕЛЫ(A1)).
  4. Удалим все пробелы из текста при помощи функции ПОДСТАВИТЬ, которая заменит пробел на пустой символ “”, то есть фактически удалит его: ПОДСТАВИТЬ(A1;» «;»»)
  5. Считаем количество символов в тексте, получившемся в п.4, используя функцию ДЛСТР: ДЛСТР(ПОДСТАВИТЬ(A1;» «;»»)).
  6. Сравниваем результаты, получившиеся в п.3 и п.5 путем их вычитания. Если результатом будет ноль, значит текст состоял из одного слова. Если получится число больше нуля, значит, были пробелы между словами. И, следовательно, текст состоял более чем из одного слова.

Что нам и было необходимо. Их и закрасим.

Выделение лишних пробелов.

Еще один небольшой лайфхак для проверки правильности ввода данных. Довольно распространенная проблема – лишние пробелы в начале или в конце текста. Это затрудняет поиск нужной информации, ее группировку и сравнение данных. Лишний пробел незаметен, но на самом деле это уже иной текст. В результате может появиться насколько одинаковых с виду, но на самом деле разных наименований товаров и т.п.

Итак, давайте постараемся указать на подобные неточности обычным для нас способом – изменением внешнего вида.

выделить ячейки с лишними пробелами

Поскольку проверять мы будем в D4,D6, D8 и D10, выделим их и правило форматирования запишем в виде формулы

Функция СЖПРОБЕЛЫ убирает из текста начальные и конечные пробелы. И если после такого «сжатия» оказалось, что текст «до» не совпадает с текстом «после», значит, имеются лишние пробелы в начале или в конце. Такие данные и будут соответствующим образом помечены.

Достаточно просто, но весьма полезно.

Подсветка дат и сроков.

Довольно часто приходится выделять определенные даты, чтобы, к примеру, не пропустить предстоящие мероприятия, подготовить будущие отгрузки и т.д. И, конечно же, нужно делать это при помощи программы, а не вручную.

Начнем с простого способа. У нас имеется множество дат, из которых нам нужно выбрать и выделить те, которые принадлежат к прошлому месяцу. Для этого, как и ранее, выбираем инструмент — Правила выделения ячеек – Дата. И далее из раскрывающегося списка выбираем нужную нам опцию, а также стиль оформления.

как закрасить ячейку по дате

Все достаточно просто, но список вариантов здесь весьма ограничен. Поэтому попробуем второй, более сложный, но зато и более универсальный способ. Как вы уже, наверное, догадались, вновь будем использовать формулы.

выделение строки в зависимости от даты в ячейке

Итак, обратите внимание на дату отгрузки.

Если она в прошлом и товар уже поставлен – можно не волноваться. Если она в будущем – значит, мы должны держать вопрос на контроле и не забыть организовать поставку к указанному сроку. И, наконец, если дата отгрузки совпадает с сегодняшней или с завтрашней, то надо бросать все дела и заниматься именно этой партией в данный момент (наивысший приоритет).

Таким образом, мы имеем 3 группы условий, которые сразу же запишем в виде правил условного форматирования:

  1. Сегодняшняя или завтрашняя дата (1):
  • Будущая дата (2):
  • Прошедшая дата – все остальные.

Обратите внимание на порядок следования формул. Формула, находящаяся выше, имеет более высокий приоритет, поскольку выполняется раньше. Поэтому мы в начале выделяем только сегодняшнюю и завтрашнюю даты, затем – все остальные в будущем. Если ваш файл выглядит не так, как на рисунке, при помощи клавиш «вверх-вниз» (3) просто измените порядок расположения условий.

Ну а с датами, которые уже прошли, мы просто ничего не делаем. Они остаются «естественного» цвета.

И еще один пример. Выделим выходные дни.

выделение цветом выходных дней

В столбце А нашей таблицы находятся даты. Выделяем все их при помощи мыши, затем уже знакомым нам способом используем формулу для определения условия форматирования.

Давайте разбираться, как это работает.

Если клетка пустая, то возвращаем ЛОЖЬ и не меняем ее вид. В этом нам поможет функция ЕПУСТО, которая станет условием в функции ЕСЛИ.

=ЕСЛИ(ЕПУСТО(A1);ЛОЖЬ;[условие если не пустая])

В случае, коли она не пустая, тогда проверяем выполнение одного из двух условий:

ДЕНЬНЕД(A1;2)=6 и ДЕНЬНЕД(A1;2)=7

Функция ДЕННЕД с аргументом 2 помогает нам определить номер дня недели по дате. 6 и 7 день – выходные в привычном для нас исчислении (суббота и воскресенье).

Объединяем эти два выражения при помощи ИЛИ, что означает, что нам достаточно выполнения хотя бы одного из них. Получается

В итоге, выходные дни будут выделены так, как мы определим при помощи кнопки Формат.

Чтобы перепроверить себя, давайте используем столбец В. В B1 запишите формулу =А1 и скопируйте ее вниз для всех дат. Первоначально получится копия столбца А.

Чтобы не усложнять таблицу формулами, давайте используем формат чисел, чтобы как-то иначе представить эти даты.

формат представления даты

Выделите их и нажмите комбинацию клавиш CTRL и 1. В появившемся окне выберите «Все форматы» и в поле «Тип» впишите 4 латинских буквы d (как на рисунке). И вот у вас дата преобразована в день недели без всяких формул!

И, как можете сами убедиться, что нами выделены именно субботы и воскресенья.

Как скрыть содержимое ячейки по условию?

Частенько при заполнении различных форм необходимо дождаться полного ввода всех данных, и только после этого показывать результат. Это можно сделать при помощи логических выражений и функции ЕСЛИ, когда вычисления будут выполняться только при определенном условии.

Разберем небольшой пример:

Итог появляется только тогда, когда заполнены все клетки. И вот как сделана строка итогов:

Как скрыть содержимое ячейки по условию

Обратите внимание, что изначально применен белый шрифт на белом фоне. А затем после заполнения данных по всем кварталам мы его изменим, чтобы число стало видимым.

Для диапазона B6:C6 установите желаемый фон ячеек, а цвет шрифта установите на «Авто» либо принудительно установите белый.

Формула правила форматирования:

просто подсчитывает количество чисел в диапазоне. Если введены все четыре, то изменится оформление итогов и они станут видны. А в обычном состоянии вы их просто не увидите из-за белого цвета шрифта.

Подсветка ячеек с формулами.

Рассмотрим еще один подход, который поможет проконтролировать правильность ввода данных. Предположим, у нас есть числовые данные. Необходимо проверить, не получены ли какие-либо из них при помощи формул, поскольку все они должны быть введены вручную.

выделение цветом ячеек с формулами

Проверим наличие формулы в ячейке при помощи функции ЕФОРМУЛА (ISFORMULA).

Обратите внимание, что абсолютные ссылки здесь не нужны.

В результате клетки, содержащие формулы, будут выделены.

Возможно, больший интерес представляет альтернативный вариант этой формулы, который позволит выделить места, где руками введены какие-то цифры или текст без использования формул.

Используем функцию НЕ (NOT), которая изменит логический результат на противоположный:

форматировать цветом ячейки без формул

Теперь мы выделили области, где нет формул, а данные просто введены вручную. Возможно, это будет полезно в таблицах с большим количеством формул и ссылок. И если одна из них будет заменена числом, то при последующем изменении данных в таблице многие расчеты окажутся неверными.

Чтобы попытка пользователя заменить формулу числом была быстро обнаружена, такой метод подойдет очень неплохо.

Выделение пустых ячеек либо с ошибками.

В MS Excel цвет ячейки бывает полезно изменить не только в зависимости от значения, но и если никакого значения нет либо вовсе возникла какая-то ошибка. Часто бывает необходимо, чтобы на подобные случаи в таблице было обращено особое внимание. В особенности это касается ошибок. Сделать это достаточно просто.

Выделяем всю таблицу, и затем вновь используем формулу в правиле условного форматирования. Нам будут нужны две функции: ЕОШИБКА (IsError) и ЕПУСТО (IsBlank).

Можно создать два условия:

Либо объединить их в одно при помощи ИЛИ:

Естественно, диапазоны здесь вы указываете свои.

Нажмите кнопку «Формат» и выберите подходящий для вас вариант оформления.

Подсветка недопустимых значений.

Когда часто приходится вводить в таблицу повторяющиеся данные, то обычно прибегают к помощи выпадающего списка.

Можно применить защиту листа и запретить вводить какие-либо данные в определенные позиции. Однако, можно просто закрасить клетку, в которую введено неверное значение. Так мы подадим сигнал пользователю о том, что информация записана с ошибкой.

Для этого нам в первую очередь понадобится список допустимых значений. Думаю, лучше его разместить на отдельном листе рабочей книги, чтобы он не мешал основным данным и при этом всегда был под рукой. Назовем этот лист City и запишем там допустимые названия городов. Вот примерно так:

Итак, на втором листе City есть список допустимых названий.

Мы должны изменить цвет D5 на красный, если выполняется 2 условия:

1. значение не совпадает с допустимыми;

2. она не пустая.

Чтобы проверить первое условие, в правиле условного форматирования можно использовать функцию СЧËТЕСЛИ (COUNTIF).

Она определяет, сколько раз записанное значение встречается в эталонном списке. Если ноль раз, то значит его там нет, и то, что введено, является недопустимым, нужно исправить.

Чтобы проверить второе условие, используем функцию ЕПУСТО (ISBLASNK), которая проверяет, является ли ячейка пустой, либо там что-то записано.

Но это проверка на то, что она пустая. Чтобы сделать проверку на то, что непустая, используем функцию НЕ (NOT). Она меняет результат выполнения логической функции на противоположное: ИСТИНА на ЛОЖЬ и наоборот. Выглядит проверка «от обратного» так:

и чтобы оба эти условия выполнялись, объединим их функцией И (AND)

выделить цветом ячейку с недопустимым значением

Если мы введем в D5 правильное название, заливка красным исчезнет.

Хороший способ, чтобы контролировать правильность ввода. Но как по мне, то выпадающий список для контроля правильности ввода будет получше. Рекомендую:

Меняем вид ячейки в зависимости от прочих ячеек.

До сих пор мы разбирали, как изменить оформление во связи с информацией в самой ячейке таблицы. А если нам необходимо изменить цвет или заливку ячейки в Excel в зависимости от того, как меняются данные в соседних клетках?

Давайте разберем еще один интересный вариант выделения столбца в таблице. Итак, у нас есть данные о заказах от нескольких покупателей в течении года.

форматирование ячейки в зависимости от других ячеек

Обратите внимание: в первую строку мы вводим именно даты, а не пишем руками название месяца и года. Затем применяем к B1:M1 специальный формат представления даты.

Для этого выделите этот диапазон при помощи мыши и затем в меню Главная – Число – Формат откройте выпадающий список с всевозможными форматами. Выберите последний пункт «Другие числовые форматы». Откроется окно, как показано на картинке. Или же просто нажмите комбинацию клавиш CTRL+1.

Слева в окошке «Числовые форматы» выберите в самом низу «все форматы». И затем в поле «Тип» впишите:

mmmm yyyy

Нажимаем ОК и получаем новый формат даты.

Теперь давайте выделим текущий месяц.

Выбираем все столбцы нашей таблицы с датами. В данном случае это диапазон B2:M6. Затем открываем уже знакомое нам меню функции «Условное форматирование».

условное форматирование по дате

Вновь используем формулу, чтобы определить условия:

Кстати, текущий месяц на момент написания этого материала – декабрь, то есть 12-й.

Обратите внимание на то, что используется абсолютная ссылка на первую строку, в которой записаны даты из каждого месяца. И если месяц из этой даты соответствует номеру текущего месяца, то этот столбец мы закрасим в голубой.

Теперь пойдем дальше, к более сложной задаче. Проверим в каждой из строк таблицы, были ли у покупателя заказы в последние 3 месяца. Если заказов не было, то имя такого покупателя выделим.

Посмотрите, как это будет выглядеть в декабре.

Изменять заливку мы будем в A2:A6. Но проверять выполнение условия будем в диапазоне B2:M6.

Итак, выделяем мышью A2:A6 и открываем меню – Создать правило – Использовать формулу.

Здесь при помощи функции СМЕЩ (OFFSET) мы получаем диапазон данных нужного месяца, смещаясь от ячейки А2 справо на число столбцов, определяемое текущей датой.

Сразу заметим, что можно вместо функции ТДАТА() использовать СЕГОДНЯ(). Обе они возвращают текущую дату, только ТДАТА еще возвращает и время.

Как видите, для подсчета количества заказов мы использовали функцию СЧЕТЕСЛИ. В качестве первого аргумента ей нужно указать диапазон, а в качестве второго – условие. И она подсчитает, сколько раз в указанном диапазоне данных выполнялось это условие.

В качестве условия используем “>0”, поскольку, если заказ был, то какая-то сумма должна быть по нему указана. Кстати, не забудьте это условие заключить в двойные кавычки, чтобы не было ошибки.

Теперь разберемся с первым условием. Для наглядности запишем его здесь:

Чтобы возвратить диапазон данных, используем функцию СМЕЩ. Схема ее работы показана на рисунке выше. Перво-наперво нужно указать начальную точку, с которой мы начнем все действия. Пусть это будет $A2. Вновь мы делаем абсолютную ссылку на столбец, чтобы при проверке условия следующей была A3, затем A4 и так далее.

Далее мы должны указать, на сколько строк вниз нужно опуститься. Поскольку нас интересует текущая строка, то ставим 0.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *