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

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

 

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

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

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

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

Html атрибут style совместим абсолютно с любыми тегами: абзаца <p>; курсивного шрифта <em>; жирного шрифта <strong>; подчеркивания текста <u>; маркированного <ul> и нумерованного <ol> списков, и их составляющих <li>; таблицы <table> и составляющих <tr> и <td>.

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

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

Color Scheme.Ru

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

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

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

Коды html цветов

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

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

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

<p style="color: #FF0000"> Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?</p>

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

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

Изменение цвета текста списков <ul> и <ol>

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

<ul style="color: #DC143C"><li>Администратор в социальных сетях</li>

<li>Специалист по контекстной рекламе</li>

<li>Дизайн и Photoshop</li>

<li>Копирайтинг</li>

<li>Видео монтаж</li>

<li>Вёрстка сайтов</li>

<li>Специалист по продвижению Вконтакте</li></ul>

На сайте будет в таком виде:

  • Администратор в социальных сетях
  • Специалист по контекстной рекламе
  • Дизайн и Photoshop
  • Копирайтинг
  • Видеомонтаж
  • Вёрстка сайтов
  • Специалист по продвижению Вконтакте

А на примере нумерованного списка изменим цвета строк:

<ol><li style="color: #8B0000">Администратор в социальных сетях</li>

<li style="color: #006400">Специалист по контекстной рекламе</li>

<li style="color: #C71585">Дизайн и Photoshop</li>

<li style="color: #FFD700">Копирайтинг</li>

<li style="color: #FF4500">Видео монтаж</li>

<li style="color: #191970">Вёрстка сайтов</li>

<li style="color: #8B4513">Специалист по продвижению Вконтакте</li></ol>

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

  1. Администратор в социальных сетях
  2. Специалист по контекстной рекламе
  3. Дизайн и Photoshop
  4. Копирайтинг
  5. Видео монтаж
  6. Вёрстка сайтов
  7. Специалист по продвижению Вконтакте

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

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

<table style="color: #FF0000"><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="color: #FF0000"><td>ячейка 1</td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Text.ru - 100.00%

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

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

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

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

  2. Юра, как всегда, просто и доходчиво! Статью ставлю в закладки! Такая инфа должна быть всегда под рукой! Спасибо!

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

  3. Юрий, спасибо за нужную информацию в сайто-строении, делаем закладку и будем применять на практике…

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

  4. Юра, огромное спасибо за науку ! Искала именно эти теги, хотела изменить цвет текста в некоторых местах в моих статьях на блоге. Завтра же начну их применять.

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

    1. Евгений, применяйте у себя на блоге при необходимости тег html изменения цвета текста через атрибут style.

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

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