Стили, классы, селекторы

Высокий уровень гибкости при использовании стилей достигается с помощью классов и селекторов ID. Согласитесь, не очень-то оптимально применять атрибут align=center для тэга <td>, если Вы хотите, чтобы во всех ячейках таблицы была центровка по горизонтали. Для этого достаточно в стилях прописать следующее:

Теперь во всех ячейках Ваших таблиц будет центровка по горизонтали. Но возникает другая проблема. Вам требуется, чтобы в ряде ячеек таблиц выравнивание было по левому полю. Эту проблема несложно решается с использованием классов. Синтаксис определения класса следующий:

Тег.Имя класса { Параметр: Значение; }

Итак, для тэга <td>запишем:

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

<table width="75%" border="1" cellspacing="0" cellpadding="0" align=center> <tr> <th>Месяц</th> <th>Доход, руб.</th> </tr> <tr> <td>Январь</td> <td>1400</td> </tr> <tr> <td>Февраль</td> <td>1600</td> </tr> <tr> <td>Март</td> <td>1500</td> </tr> <tr> <td class=left><b>Всего:</b></td> <td><b>4500</b></td> </tr> </table>

Обратите внимание, к ячейке с текстом "всего" применен класс left. Для этого, так же как и для атрибута, в теле открывающего тэга записано class=left. Таблица будет выглядеть следующим образом:

Месяц	Доход, руб.
Январь
Февраль
Март
Всего:

А запись такого рода:

говорит о том, что объявлен класс, без привязки к конкретному тэгу. Следовательно применяться он может к любому тэгу. Однако, не следует забывать, что объявленный класс myclass определяет свойства текста и поэтому применение его, скажем, к тэгу <img> вряд ли возымеет эффект. А как поступить, если необходимо применить класс стиля, но нельзя привязаться к конкретному тэгу. Для этих целей служит тэг <span>, который как раз и предназначен как тэг "принудительного" применения стиля или класса. Объявим стиль тэга <p> и один "свободный" класс стиля для текста.

А теперь найдем им применение, причем в двух вариантах:

<p>Английское слово <b>table</b> означает — <font color=red>стол</font>.<br><p>Английское слово <b>table</b> означает — <span class=myclass>стол</span>.</p>

Результат будет одинаков. Убедимся.

Английское слово table означает — стол.
Английское слово table означает — стол.

А — есть спецсимвол, который отображает так называемое "длинное тире".

Теперь о селекторах ID. С их помощью можно также присваивать стили, но целым блокам. Селекторы ID также называют идентификаторами. Рассмотрим такой идентификатор.

Мы обозначили границы блока — координаты верхнего левого угла, а также высоту и ширину. Для применения идентификатора используется тэг <div>. Для того, чтобы поместить текст в такой блок, нужно использовать следующий код:

<div ID=myid><font color=red>Этот элемент помещает текстовый фрагмент в блок,координаты которого можно задать. Последнее бывает очень удобным в случае, если Вы хотите выделить какой-либо фрагмент текста для акцентирования внимания.</font> </div>

Посмотрим, как это работает на деле:

Этот элемент помещает текстовый фрагмент в блок, координаты которого можно задать. Последнее бывает очень удобным, в случае, если Вы хотите выделить какой-либо фрагмент текста для акцентирования внимания.

Итак мы не только разобрались с классами и идентификаторами, но узнали о тэгах <span> и <div>.
Источник:web-brodilka.ru