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

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

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

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

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

<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>

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

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

<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>

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

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

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

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

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

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

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

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

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