HTML тег изменения цвета заднего фона текста: атрибут style background-color

HTML тег изменения цвета заднего фона текста

 

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

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

  1. Текстовый html редактор notepad++ Html теги для текста в один клик
  2. HTML теги пробела и красной строки для текста
  3. HTML теги таблицы: td, tr, table, для текста
  4. HTML теги для текста: жирный шрифт, курсивный шрифт и подчеркивание текста
  5. HTML тег изменения цвета текста: атрибут style

Тег html изменения цвета заднего фона текста через атрибут style background-color

Html атрибут style background-color может применяться в любых html тегах, связанных с версткой текста: абзацах <p>; цитатах <blockquote>; таблицах <table> и их составляющих <tr> и <td>.

Изменение цвета заднего фона текста абзаца <p>

В открытый тег абзаца <p> будем вставлять атрибут style background-color и html код самого цвета заднего фона, который нам нужен #00FFFF (я выбрал Aqua). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:

HTML цвета

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

<p style="background-color: #00FFFF"> (кавычки должны быть именно такого вида — " ", иначе цвет не поменяется)

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

<p style="background-color: #00FFFF"> В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.</p>

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

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

Изменение цвета заднего фона текста цитаты <blockquote>

Верстаем цитату с изменением цвета заднего фона:

<blockquote style="background-color: #BDB76B">Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.</blockquote>

На сайте цитата будет выглядеть:

Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.

Изменение цвета заднего фона текста таблицы <table>

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

<table style="background-color: #FFD700"><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

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

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

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

<table><tr style="background-color: #00FFFF"><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr style="background-color #FFA500"><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr style="background-color: #FFDAB9"><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

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

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

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

<table><tr><td style="background-color: #00FFFF">ячейка 1</td>

<td style="background-color: #FFA500">ячейка 2</td>

<td style="background-color: #FFDAB9">ячейка 3</td></tr></table>

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

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

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

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

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

Text.ru - 100.00%

Поделиться ссылкой:

4+

Подписывайтесь на нашу группу и получайте видеоуроки

Планета Успеха

 

12 Comments on “HTML тег изменения цвета заднего фона текста: атрибут style background-color”

  1. Юрий, спасибо за полезную информацию о HTML тегах изменения цвета заднего фона текста, очень кстати! Взяла на заметку! Думаю, что скоро пригодится!

    0
    1. Нина Михайловна, спасибо за отзыв! give_rose Буду только рад, если информация об html тегах изменения цвета заднего фона текста, Вам пригодится при оформлении своих статей на блоге!

      1+
    1. Слава, спасибо за комментарий! Пользуйся html тегами изменения цвета заднего фона текста и применяй на своих сайтах, при наведении полезной красоты в публикациях! yes

      0
  2. Юра, отличная и нужная статья! С Вами постоянно учусь, спасибо за это! Добавила в избранное, чтобы всегда была под рукой.

    0
    1. Татьяна, спасибо за комментарий! give_rose Мне приятно, что делюсь не зря полезной информацией smile Применяйте при необходимости на своём блоге при оформлении статей html атрибут style background-color для изменения цвета заднего фона текста yes

      0
    1. Александр, спасибо за обратную связь! Применяйте на своём блоге при необходимости атрибут html для изменения цвета заднего фона текста smile

      0
  3. Юрий огромное спасибо за полезную статью, всегда нахожу на ваших ресурсах что-то полезное для себя. Добавляю в избранное good

    0
    1. Евгения, а мне приятно, что не зря делюсь информацией и она востребована моими читателями и подписчиками! Заходите почаще, всегда рад гостям give_rose

      0
  4. Юрий, большое спасибо за нужную и полезную информацию о тегах, думаю в будущем мне она пригодится

    0
    1. Сергей, буду рад, если информация об изменении цвета заднего фона текста вам пригодится при оформлении публикаций на блоге.

      0

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

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