Untitled Document

Урок 5. Классы и идентификаторы.

Существуют еще 2 способа определения стилей, а именно: через классы и идентификаторы. Давайте поговорим о каждом из них подробней.

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

</HEAD>
<BODY>
<P class="one">CSS имеет очень простой синтаксис, но открывает нам новые грани, недоступные при стандартной HTML-верстке.
<P class="two">Зная CSS, вы сможете создать по-настоящему красивый сайт, надеюсь, что моя книга поможет вам в обучении.
<P class="three"> Не забывайте просматривать исходники других сайтов, разбор которых поможет вам приобрести необходимый опыт.
</BODY>
</HTML>

Прежде чем детально разобрать изложенное, посмотрите, что из этого получилось:

Как видите, в данном случае описываемый элемент разделен на 2 сектора: тэг.имя-класса. У каждого класса есть свои свойства, которые вы задаете в фигурных скобках. Для того чтобы CSS вступили в действие, необходимо вызвать класс в тэге, который вы описывали. Делается это с помощью атрибута class=”имя-класса”. Это очень удобный способ, который применяется почти повсеместно.

Иногда возникают случаи, когда требуется создать класс, не привязанный к определенному тэгу. В предыдущем случае имя .one принадлежало элементу P, но такая ситуация не всегда приемлема. В этих случаях определение тэга нужно опустить. Взгляните на пример:

<STYLE>
.one {color: green;}
.two {color: blue;}
</STYLE>

После объявления стилей, их необходимо вызвать. В нашем случае, классы становятся очень гибкими, и вызывать их можно в любом тэге с атрибутом class=”…”. К примеру:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.one {color: green;}
.two {color: blue;}
</STYLE>
</HEAD>
<BODY>
<Div class="one">Текст, написанный зеленым цветом.
<P class="two">Абзац, написанный синим цветом.
<HR class="one">
</BODY>
</HTML>

А вот и скрин того, что у меня получилось:

На этом с классами покончено (в хорошем смысле слова). Плавно переходим к идентификаторам…

Объект нашего разбора применяется не столь часто, как изученные выше классы, однако пренебрегать им не стоит. Любой идентификатор начинается с префикса #id. Ну, например:
- - -
#idFontArial {font-family: Arial;}
- - -
Затем вызываем идентификатор:
- - -
<P id=idFontArial>Шрифт с гарнитурой Arial</P>
- - -
Теперь можно сделать глубокий выдох – мы изучили все способы определения стилей!

РЕКЛАМА