IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Основы CSS. Классы объектов - применение

Итак, классы. Класс — это группа обьектов(часто разных ), описанных одним описанием стилей. Предположим, вы описали в таблице стилей характеристики основного текста, описали стили необходимого параграфа и т.д. У вас остаются обьекты, которые отличаются от этих описаний. Например, это комментарии к кнопкам. Так-как это текст, то и описываем мы эти комментарии свойствами текста: { color :#0000FF; FONT-FAMILY: Verdana, Arial; text-decoration:underline; FONT-SIZE: 10pt;} И присвоим это описание КЛАССУ .kn Так и пишется: ставим точку, затем название класса(любое слово или сочетание букв), описание. Мы получили описание класса "kn", в котором заданы цвет, шрифт, подчеркивание и размер текста. В HEAD это смотрится так:

<style type=text/css>
<!--
body{background: url( "fon.gif");
background-attachment: fixed;
background-color: #000000;
font-family: MS Sans Serif, tahoma,
Verdana, Arial;  FONT-SIZE: 10px;
color:#00EFFF}

 A { color: #00E1FF;
FONT-FAMILY:  Verdana, Arial;
text-decoration:none; FONT-SIZE: 8pt;}

 A:Hover { color: #FF0000;
text-decoration: underline;}

.kn{ color: #0000FF;
FONT-FAMILY:  Verdana,
Arial; text-decoration: underline;
FONT-SIZE: 10pt;}
-->
</style>

Если присвоить данный класс тексту, то получим:

<FONT CLASS="kn" >Проба КЛАССА</FONT>.

А теперь вспомним, с чего это началось. С кнопок. Не сделать ли нам кнопки и комментарии к ним в одном стиле? Надо попробовать.

<FORM><INPUT TYPE="BUTTON" CLASS="kn" NAME="oooo" VALUE="проба" ALIGN=""></FORM>

Получилось. У кнопки и текста одно описание. Добавим в описание фон:background:#46FF34

<FORM><INPUT TYPE="BUTTON" CLASS="kn1" NAME="oooo" VALUE="проба" ALIGN=""></FORM><FONT CLASS="kn1" >Эта кнопка предназначена для ....</FONT>

Только будте осторожнее с фоном для текста, в Нетскейпе его может растянуть полосой на все доступное по ширине пространство.
А теперь подставим CLASS="kn" в таблицу:

<TABLE CLASS="kn" BORDER="1">
<TR>
<TD>проба класса для таблицы
</TD>
</TR>
</TABLE>

Все работает. Одним описанием мы задали стили для совершенно разных обьектов. Можно задать класс как таблице целиком, так и отделно строке или ячейке.
Часто в описании класса можно задать очень много свойств. Например, в нашем описании "kn" можно добавить описание границ для таблицы. Обьекты нашего класса не имеющие табличных границ просто проигнорируют это описание. Но все рекомендую проверять, надежнее будет.

Источник: A-design studio http://mtk.on.ufanet.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.