Андрей Аверьков

Цвета html. Все что надо знать и как применять

Цвета html. Все что надо знать и как применять

Цвета html. Все что надо знать и как применять

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

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

В этой статье:

  1. Способы применения и изменения цветов.
  2. Теги для фона, шрифта и других тегов html.
  3. Инструменты для применения цветов в помощь.
  4. Как копировать цвета с других сайтов.
  5. Как поменять цвета на имеющейся странице.
  6. Как выделить цветом шрифт в строке (предложении).
  7. Таблица цветов в одном месте.

Способы применения и изменения цветов

Есть 3 (три) способа, по крайней мере применяемых мной, которые вы можете использовать для задания цветом тот или иной отрезок вашего текста. Независимо от того, это одно слово или целое предложение.

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

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

Третий способ, - использовать готовые библиотеки цветов, которые применяются, например, в фреймворке Bootstrap.

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

Если использовать первый способ и только лишь возможности html, открываете например, редактор Блокнот и пишите следующую конструкцию:

цвета html рисунок 1

Где тег <font> определяет цвет для слова "Предположим". Данный тег пришел из HTML4, однако браузеры все еще его поддерживают.

К тому же в Интернете огромное количество страниц, которые были созданы 10, 15 и более лет назад на основе HTML4.

Если использовать второй способ, то на данный момент я использую программу Adobe Dreamweaver, в которой не только легко обучаться разным языкам верстки, но и задавать разные свойства контенту.

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

цвета html при выборе цвета

Далее выбираете “color” и открывается дополнительное окно с выбором цвета.

выбираем color в дополнительном окне

Передвигаете ползунок на нужный вам цвет, и нажимаете клавишу “Enter” на клавиатуре ПК.

Третий способ, - использование фреймворка Bootstrap.

Эта целый набор инструментов, который позволяет существенно сократить время создания веб-страницы.

В Bootstrap есть также и собственный набор цветов, который определяется стилями.

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

Вы можете задать цвет для определенного слова и оно моментально изменит цвет на нужный вам.

Названия цветов Bootstrap: “danger” (красный), “warning” (желтый), “success” (зеленый), “primary” (синий), “secondary” (серый), “info” (светло-синий), “dark” (черный), “light” (светло-серый).

Например, вы хотите изменить цвет кнопки на вашей странице.

Вам достаточно прописать в коде html специальный стиль, а также название цвета (см.рис.ниже). Причем к кнопке применится не только красный цвет, но и эффект при наведении.

специальный стиль и назнвание

Теги для фона, шрифта и других тегов html

К каждому тегу html вы можете придать определенный фон, а для шрифта цвет и т.д.

Изменение фона

Главный тег html - это “body”, внутри которого располагается весь видимый контент страницы. Соответственно придав определенное значение цвета для этого тега, вы повлияете на всю страницу сайта.

Воспользуемся той же программой Adobe Dreamweaver и изменим цвет страницы.

изменение цвета кода в программе

Переходите в тег <body> и внутри скобок сразу после слова body пишите “bgcolor”. Это означает, что вы назначаете цвет для всей страницы.

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

В результате при выборе данного цвета и нажатии на клавишу “Enter” страница станет вот с таким светло-синим фоном…

выбор цвета кода html

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

Тем не менее, это только один из вариантов написания кода цвета, т.к. один и тот же цвет можно написать в разных цветовых моделях.

вариант написания кода цвета html

Например, тот же цвет, который вы указали для тега “body” можно прописать и:

  1. rgba(178,203,221,1.00)
  2. hsla(205,39%,78%,1.00)

При нажатии на соответствующие кнопки, программа сама пропишет этот код в окошке. Мы применили, в данном случае, модель “Hex”.

То же самое касается и других тегов html.

Изменение тегов шрифта и других тегов

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

Блочные теги это: заголовки, абзацы, таблицы, блоки.

Строчные теги это те, которые применяются непосредственно к тексту, а также к другим некоторые тегам. Например, - полужирность, наклон, подчеркивание, ссылки и т.д.

Как я и сказал выше, к каждому тегу вы можете придать определенный цвет. В примере, который мы рассматривали с самого начала, мы как раз и применили красный цвет к строчному тегу “font” для слова “Предположим”.

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

Например, возьмем все то же предложение, которое использовали ранее. Но теперь добавить еще и стиль.

Стиль пишется так: “style”

Таким образом, не “заморачиваясь” на цифровых кодах цвета, вы можете просто написать названия этих цветов, как например вы сделали это в первом примере, когда задавали красный цвет.

Итак, для изменения цвета вы можете применять названия…

  • Красный цвет - red
  • Зеленый - green
  • Белый - write
  • Желтый - yellow
  • Черный - black
  • Синий - blue, и т.д.

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

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

цвета кода html

В данном примере достаточно прописать стиль, написать “color:” и программа Adobe Dreamweaver сама предоставит вам выбор для назначения цвета.

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

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

предустановленное название цвета

Инструменты для применения цветов в помощь

Мой инструмент №1

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

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

Первая программа, которую использую лично я, как вы поняли, это Adobe Dreamweaver.

программа Adobe Dreamweaver

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

Все действия для назначения цветов, которые мы с вами рассмотрели выше, я делал как раз в этой программе.

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

Подробности курса здесь…

Второй инструмент для быстрого определения и назначения цвета к тегам html

Второй инструмент - это программа “FastStone Capture”.

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

программа для определения цвета html

Самое главное, в программе есть горячие клавиши, по нажатию на которые вызывается тот или иной инструмент программы.

Т.е. достаточно нажать на определенную клавишу на клавиатуре, и появится “пипетка”. Далее, с помощью нее вы наводите на любой цвет вашего экрана, нажимаете левой кнопкой мышки и, - код цвета скопирован.

У вас появляется окно, в котором вы можете скопировать код цвета и затем вставить в нужное место вашей страницы.

Как копировать цвета с других сайтов

Здесь, я думаю, вопросов уже не должно быть.

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

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

Например, вы хотите не просто скопировать html код цвета на определенном сайте, а и удостовериться, что это именно тот цвет.

Для этого можно использовать тот же браузер Google Chrome.

Рассмотрим копирование цвета на примере моей страницы “Одностраничник в Adobe Dreamweaver без знаний HTML”.

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

У вас появится контекстное меню в котором нажимайте на строку “Просмотреть код” (см.рис.ниже)

контекстное меню для показа кода элемента страницы

Затем у вас появится специальная панель браузера Google Chrome для разработчиков.

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

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

Я, например, располагаю ее в нижней части экрана.

Настройки приложения в браузере

Далее, чтобы определить цвет заголовка, который вы выделили, сделайте следующее (см.рис.ниже):

  1. Если после настройки панели, выделение исчезло, то сделайте все снова. Т.е. снова выделите заголовок, правой кнопкой мышки вызовите контекстное меню и далее нажмите на “Просмотреть код”.
  2. Далее в панели выделиться сам заголовок (окно внизу слева), а в правой части панели будут показаны стили для этого заголовка.
  3. Все значения можно копировать, поэтому смело выделяйте код цвета (на рис. подчеркнут красным цветом) и вставляйте в код своей страницы.

Примечание: Если у вас окно панели как-то не так отображается, то сделайте вид панели как на рисунке - в левой части окна вкладка “Elements”, в правой части вкладка “Styles”. Далее проделайте все операции в пунктах 1-3 заново.

Выделение элемента в приложении браузера

Точно также вы можете с успехом копировать цвета html и с других сайтов.

Как поменять цвета на имеющейся странице

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

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

Другими словами, открываете страницу вашего сайта, используете панель разработчиков браузера Google Chrome и далее делаете все операции в пунктах 1-3.

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

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

Как выделить цветом шрифт в строке (предложении)

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

Для это будем использовать снова панель браузера Google Chrome.

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

Я снова буду использовать страницу моего одностраничника.

Как выделить цветом шрифт

При нажатии на “Просмотреть код”, в панели выделяется код, как в примере с заголовком.

Просмотреть код html

Затем выделяются код и стили, которые были изначально применены к данному элементу списка на странице.

Но нам, как вы помните, надо изменить цвет для выделенного текста, поэтому нажимаете правой кнопкой мышки на выделенный код и выбираете “Edit as HTML”

edit html

У вас откроется окно редактирования кода, с которым можно работать.

редактирование кода html

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

Давайте изменим цвет выделенного текста на зеленый. Для этого проделываете все операции, которые мы с вами делали ранее.

Изменение цвета выделенного цвета

Далее, чтобы проверить, тот ли код цвета html вы применили к выделенному тексту, нажимаете левой кнопкой мышки на любое место страницы. Я нажал на соседний выше тег <ul>.

После этого редактируемый тег свернется и изменения применятся в выделенному тексту.

Если цвет вам не понравился и вы хотите вновь его изменить, снова выделяете данный текст страниц, нажимаете в контекстном меню “Просмотреть код”, а в панели для разработчиков предстанет такая картинка.

Если цвет html необходимо заменить

Если хотите изменить цвет на другой, то в левой части кода двойным щелчком мышки нажимаете на слово “green”, т.е. выделяете его, и далее пишите другое название цвета html.

Изменение цвета

Чем данный способ хорош?

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

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

После того, как вы произвели все изменения и вам понравилось то, что вы сделали, достаточно снова перейти в режим редактирования кода правой части панели (“Edit as HTML”), скопировать измененный код и вставить уже в редакторе.

Таблица цветов в одном месте

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

Применял потому, что не было таких инструментов как Adobe Dreamweaver, а программы с “пипеткой” были, так скажем, “корявыми” и не подходили во многих случаях.

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

Надеюсь, она также послужит вам добрую службу, как в свое время пригодилась и мне.

Тем не менее, я все же рекомендую использовать современные инструменты для определения, изменения, редактирования и применения цветов html на своих сайтах.

Программа Adobe Dreamweaver - отличный пример такого инструмента.

Я давно использую данную программу, поэтому рекомендую изучить мой мультимедийный курс “Одностраничник с нуля в Dreamweaver без знаний HTML”.

В курсе много уроков как по изучению самой программы, так и по созданию подписной страницы.

P.S. Если моя статья была вам полезна, поделитесь с друзьями, оставьте комментарий.

Другие статьи категории «Инструменты онлайн»

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

Ресурсы и программы по работе с видео Привет, продолжаю знакомить вас с программами и ресурсами, которые я использую. И сегодня настал черед видео. Вот уже несколько лет и даже больше чем несколько… (т.е. много), на всех тренингах, вебинарах и т.д.

Ресурсы и программы для создания графики Забирайте к себе на стену, чтобы не потерять программы для графики! Давно хотел сделать некую подборку, но сами понимаете, таких ресурсов огромное количество. Поэтому даю вам то, чем пользуюсь сам и очень часто.
Комментарии:
Все заметки категории «Инструменты онлайн»