Форматирование текста в CSS

Для того, чтобы текст на страницах вашего сайта привлекал внимание к каким-то особенно важным моментам необязательно использовать теги <b>, <i>, <strong> и <em>. Эти теги используются для физического и логического выделения в текстах, поисковые системы тщательно обследуя ваши страницы ищут подобные выделения и используют их при выдаче ссылок на страницы при запросах. Но не следует злоупотреблять этими тегами. Например, слишкое большое количество стронгов может привести к тому что поисковый робот может посчитать это трюком, поисковым спамом, ну, и как следствие пессимизация, или даже бан сайта обеспечен.

Те части текста, которые предназначены для поисковых систем выделять визуально не обязательно. Им можно задавать свойства обычного текста. К тому же, если уж необходимо выделение, то его можно сделать так чтобы это не портило дизайн и не резало глаз.

Для физического (визуального) выделения следует применять css, тогда и волки будут сыты, и овцы целы, и пастуху за это ничего не будет.

Сначала перечислим теги при помощи которых отображается текстовая часть сайта.

К текстовым тегам относятся

<h1>заголовки от 1 до 6</h6>
<p>теги образующие абзац</p>
<b>жирный текст</b>   <!-- физическое выделение текста -->
<i>курсив</i>   <!-- физическое выделение текста -->
<strong>жирный текст</strong>   <!-- логическое выделение текста -->
<em>курсив</em>   <!-- логическое выделение текста -->
<blockquote>цитата</blockquote>
<ol>
<li>пронумерованные списки</li>
</ol>

А теперь перечислим основные свойства, которые можно применять к перечисленным тегам.

font-family: Verdana, Arial, Helvetica, sans-serif; /* Гарнитура текста */
font-size: 11px; /* Размер шрифта в пикселях */
font-style: italic; /* Начертание шрифта */
font-weight: 600; /* Насыщенность шрифта */
color: red; /* Цвет */
text-align: center | justify | left | right /* выравнивание текста */
margin: 0 6px 0 6px; /* Отступы */
padding: 6px 0 6px 0; /* Поля вокруг текста */
line-height: 1.5; /* Межстрочный интервал текста */

Задавать свойства текста при форматировании, можно в теге body (для всей страницы), для каждого блока или ячейки таблицы в отдельности, или используя классы и идентификаторы.

Чтобы задать свойства тексту в body нужно указать размер, гарнитуру, и цвет шрифта:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}

Чтобы задать разные свойства тексту в нескольких ячейках таблицы нужно каждую из ячеек обозначить классом или идентификатором.

Применять классы (class) на странице можно многократно, а идентификатор (id) единожды, т.е., если вы хотите несколько раз использовать id, то каждый раз давайте ему уникальное имя.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="td1">текст</td>   <!-- классы могут повторяться -->
<td class="td1">текст</td>
<td class="td2">текст</td>
<td class="td3">текст</td>
<td id="td4">текст</td>   <!-- идентификатор уникален -->
<td id="td5">текст</td>
</tr>
</table>

А в стилях указать:

.td1{
color:#b22222;
font:12px Verdana, Arial, Helvetica, sans-serif;
}

.td2{
color:#6a5acd;
font:14px Georgia, 'Times New Roman', Times, serif;
}

.td3{
color:#008000;
font:16px Geneva, Arial, Helvetica, sans-serif;
}

#td4{
color:#0000ff;
font:16px Geneva, Arial, Helvetica, sans-serif;
}

#td5{
color:#0000ff;
font:16px Geneva, Arial, Helvetica, sans-serif;
}

Если вы не хотите чтобы части текста (ключевые слова), которые вы выделили для поисковых систем мозолили глаза посетителям, можете задать тегам <b>, <i>, <strong> и <em> те же свойства что и для основного текста.

p{  /* свойства основного текста */
color:#b22222;
font:12px Verdana, Arial, Helvetica, sans-serif;
}

b, i, em, strong{  /* свойства тегов выделения */
color:#b22222;
font:12px Verdana, Arial, Helvetica, sans-serif;
}