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

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

<style>

TD { text-align: center }

</style>

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

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

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

<style>

TD { text-align: center }

TD.left { text-align: left }

</style>

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

<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. Таблица будет выглядеть следующим образом:

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

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

<style>

.myclass { text-align: justify; color: navy;

font-style: italic; }

</style>

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

<style>

P { text-align: left; color: black}

.myclass { text-align: left; color: red; }

</style>

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

<p>Английское слово <b>table</b> означает —

<font color=red>стол</font>.<br>

<p>Английское слово <b>table</b> означает —

<span class=myclass>стол</span>.</p>

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

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

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

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

<style>

#myid { position:relative; left:160px;

top:10px; width:350px; height:100px; }

</style>

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

<div ID=myid>

<font color=red>Этот элемент помещает

текстовый фрагмент в блок,

координаты которого можно задать. Последнее

бывает очень удобным в случае,

если Вы хотите выделить какой-либо

фрагмент текста для акцентирования внимания.</font>

</div>

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

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

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