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

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

 

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

Предыдущие занятия по ручной 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%

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

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

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

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

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

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

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

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

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

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

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

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

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

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