Меню

Как придать цвет тегу



HTML Цвета, цвет текста фона

Цвета HTML задаются с использованием предопределенных имен цветов, или RGB, Hex, HSL, RGBA, HSLA значений.

Названия цветов

В HTML цвет можно задать с помощью имени цвета:

Цвет фона

Можно задать цвет фона для элементов HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Цвет текста

Вы можете установить цвет текста:

Всем привет

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Hello World

Цвет границы

Вы можете установить цвет границ:

Всем привет

Всем привет

Всем привет

Example

Hello World

Hello World

Hello World

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

Так же, как название цвета «Tomato», но 50% прозрачный:

Пример

Значение RGB

В HTML, цвет может быть указан как RGB значение, используя эту формулу:

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.

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

Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).

Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).

Экспериментируйте, смешивая значения RGB ниже:

Источник

Как задать цвет заголовку?

Подскажите, какой контейнер или атрибут тега задает цвет заголовку?

4 ответа 4

Чтобы задать цвет — color .

Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.

Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом . Однако:

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

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

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

и т. д.). То есть комбинация

корректна, а

— уже нет (тег заголовка автоматически закроет предшествующий тег).

Источник

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

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

Для начала отметим, что все цвета можно задавать в трех форматах:

  • Название цвета (red, blue, green и т.д.)
  • Шестнадцатеричный формат (#104A00, #0F0 и т.д.)
  • Формат rgba (rgba(0,0,0,0.5) и т.д.)

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

Способ 1. Через html тег

Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:

Читайте также:  Кашпо для цветов синего цвета

На странице преобразуется в следующее

Новая версия стандарта HTML5 его не поддерживает. Но все современные браузеры понимают и еще видимо будут долго понимать. Тег font широко распространен на сайтах. Что впрочем легко объяснить его доступностью и простотой.

Способ 2. Через атрибут style

Есть второй похожий способ для изменения цвета шрифта. Для этого есть атрибут style, который можно применять к любым html тегам (

Синий цвет текста

Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией !important

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

Способ 3. Через стили CSS

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

Классы primer1 и primer2 можно применить к любым другим html тегам.

Источник

Цвет ссылок

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

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

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

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

Пример 2. Цвет ссылок, заданных через стили

Задание цвета отдельных ссылок на странице

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

Пример 3. Изменение цвета ссылки с помощью стилей

В данном примере приведены три разных способа задания цвета с помощью стилей.

Источник

HTML тег изменения цвета текста: атрибут style

Приветствую вас на «Планете Успеха»! Начну сразу с вопроса. У вас возникало желание в своих статьях на блоге изменить цвет шрифта в определенных местах текста? Уверен, что да! Этим мы сегодня и будем заниматься.

Предыдущие занятия по ручной html верстке текста:

Тег html изменения цвета текста через атрибут style

Html атрибут style совместим абсолютно с любыми тегами: абзаца

; курсивного шрифта ; жирного шрифта ; подчеркивания текста ; маркированного

    и нумерованного

      списков, и их составляющих
      ; таблицы

      и составляющих

      и

      .

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

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

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

      Изменение цвета текста абзаца

      В открытый тег абзаца

      будем вставлять атрибут style и html код самого цвета, который нам нужен color: #FF0000 (я выбрал Red — красный). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:

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

      (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)

      Верстаем сам абзац:

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

      Смотрим как будет выглядеть на блоге:

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

      Изменение цвета текста списков

        и

      Верстаем, к примеру маркированный список, код необходимого цвета также берем в таблице html цветов:


      Администратор в социальных сетях

      Специалист по контекстной рекламе

      Дизайн и Photoshop

    1. Специалист по продвижению Вконтакте
    2. На сайте будет в таком виде:

        Администратор в социальных сетях

      Специалист по контекстной рекламе

      Дизайн и Photoshop

    3. Специалист по продвижению Вконтакте
    4. А на примере нумерованного списка изменим цвета строк:

        Администратор в социальных сетях

      Специалист по контекстной рекламе


      Дизайн и Photoshop

      Видео монтаж

      Вёрстка сайтов

      Специалист по продвижению Вконтакте

      На сайте список будет отображаться таким образом:

        Администратор в социальных сетях

      Специалист по контекстной рекламе

      Дизайн и Photoshop

    5. Специалист по продвижению Вконтакте
    6. Изменение цвета текста таблицы

      Верстаем таблицу с изменением цвета текста всей таблицы:

      ячейка 1 ячейка 2 ячейка 3
      ячейка 4 ячейка 5 ячейка 6
      ячейка 7 ячейка 8 ячейка 9

      На блоге получаем таблицу в таком виде:

      ячейка 1 ячейка 2 ячейка 3
      ячейка 4 ячейка 5 ячейка 6
      ячейка 7 ячейка 8 ячейка 9

      Теперь изменим цвет текста построчно:

      ячейка 1 ячейка 2 ячейка 3
      ячейка 4 ячейка 5 ячейка 6
      ячейка 7 ячейка 8 ячейка 9

      И на сайте увидим такую таблицу:

      ячейка 1 ячейка 2 ячейка 3
      ячейка 4 ячейка 5 ячейка 6
      ячейка 7 ячейка 8 ячейка 9

      В каждой ячейке таблицы, также можно изменить цвет текста:

      ячейка 1

      ячейка 2

      ячейка 3

      На блоге увидим в таком варианте:

      ячейка 1 ячейка 2 ячейка 3

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

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

      Успехов вам и до новых встреч!

      Источник

      Как изменить цвет слова с помощью тега Span и CSS

      С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете это в своей внешней таблице стилей, и браузер отображает ваш текст в этом выбранном цвете. Что происходит тогда, когда вы хотите изменить цвет только одного слова (или, возможно, всего нескольких слов) в абзаце текста? Для этого вам нужно будет использовать встроенный элемент, такой как тег.

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

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

      Пошаговая инструкция

      1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
      2. В документе найдите слова, которые вы хотите отображать другим цветом на странице. Для этого урока давайте используем некоторые слова, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
      3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете WYSIWYG-редактор, такой как Dreamweaver, вы сейчас работаете в режиме «просмотра кода».
      4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:
      5. Мы только что использовали встроенный элемент,, чтобы придать этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг – перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.
      1. В нашем CSS-файле давайте добавим:
      2. Это правило установит этот встроенный элемент,, для отображения красным цветом. Если бы у нас был предыдущий стиль, который устанавливал бы текст нашего документа черным, этот встроенный стиль заставлял бы фокусируемый текст выделяться и выделяться другим цветом. Мы могли бы также добавить другие стили к этому правилу, возможно, выделив текст курсивом или жирным шрифтом, чтобы подчеркнуть его еще больше?
      3. Сохраните свою страницу.
      4. Протестируйте страницу в вашем любимом веб-браузере, чтобы увидеть изменения в действии.
      5. Обратите внимание, что в дополнение к некоторым веб-профессионалы предпочитают использовать другие элементы, такие как пары тегов или. Эти теги использовались специально для жирного шрифта и курсива, но были объявлены устаревшими и заменены на и. Тем не менее, теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их в качестве хуков встроенного стиля. Это не самый плохой подход, но если вы хотите избежать каких-либо устаревших элементов, мы рекомендуем придерживаться тега для таких стилевых нужд.

      Советы и вещи, которые нужно остерегаться

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

      Источник