Меню

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



Как изменить цвет текста 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

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

Что такое безопасный цвет HTML

Постараюсь быть кратким. Суть в том, что современные компьютеры для кодирования цвета используют довольно большие числа. И, соответственно, в этих больших числах можно закодировать очень большое количество оттенков. Но беда в том, что многие видеокарты и мониторы не могут правильно отобразить ВСЕ эти оттенки. Поэтому, например, цвет, код которого FFFFAA, на вашем мониторе может выглядеть иначе, чем на мониторе другого пользователя. Также декодирование цветов может отличаться в зависимости от операционной системы пользователя (Windows может декодировать цвет не так, как, например, Mac).

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

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

Надо сказать, что в наше время это уже не так значимо, поскольку почти у всех современные мониторы, видеокарты и браузеры. Поэтому, конечно, вы можете использовать и другие цвета, “НЕ безопасные”. Однако без особой надобности этого всё-таки лучше не делать, и работать по возможности с безопасными цветами.

Как поменять цвет текста в HTML

Поскольку мои статьи рассчитаны на начинающих, то я, во-первых, не рассказываю о всех способах, а во-вторых, не всегда использую самые современные технологии. Если вы хотите изучить в полной мере современную вёрстку сайтов, то вам сюда.

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

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

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

Читайте также:  Цвет волос черная ночь

Тег может иметь несколько разных атрибутов. Для изменения цвета используется атрибут color .

Значение этого атрибута может быть введено одним из двух способов:

  • Как определение красного, зелёного и синего (RGB).
  • Как стандартное название цвета.

Значение атрибута лучше заключать в кавычки (хотя это и необязательно).

Цветовая модель RGB

В цветовой модели RGB обозначение цвета представляет собой шестизначное шестнадцатеричное число. Для обозначения кода цвета в HTML перед этим числом должен быть знак решётки (#).

Первые две цифры определяют насыщенность красного цвета (от 00 — нет красного, до FF — ярко-красный. Таким же образом определяется насыщенность для зелёного (следующие две цифры) и синего (последние две цифры). Таким образом формат числа, с помощью которого кодируется цвет, следующий:

# RR GG BB

Где RR — красная составляющая, GG — зелёная, BB — синяя.

Чёрный цвет — это отсутствие “свечения” всех составляющих — #000000, а белый цвет — это наибольшая насыщенность RGB — #FFFFFF.

Также можно использовать сокращённую запись, когда вместо двух цифр используется одна:

В этом случае формат записи числа будет таким:

# R G B

ВНИМАНИЕ!
Некоторые бразуеры не поддерживают такой формат записи цветового кода.

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

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

В стандартах HTML4 и XHTML определены следующие названия цветов (в скобках указаны RGB-коды):

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

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

Источник

Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

  • color – задает цвет текста;
  • size – устанавливает размер текста;
  • face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Источник

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 для изменения цвета текста в своих публикациях, там, где это действительно необходимо.

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

      Источник

      Меняем цвет текста и фона

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

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

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

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

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

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

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

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

      style= «color:имя цвета» >. — указание цвета текста по имени.

      style= «color:#HEX-код» >. — указание цвета текста по коду.

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

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

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

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

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

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

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

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

      style= «background:имя цвета» >. — указание цвета фона по имени.

      style= «background:#HEX-код» >. — указание цвета фона по коду.

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

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

      Заголовок.

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

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

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

      Источник