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 цветов:

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

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

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

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

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

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

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

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

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

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

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

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

Просмотров:
390