| Рейтинги
|
|
|
|
|
Дизайн - CSS - Описание и назначение КЛАССОВ
Вставка описания стилей
Описание BODY
Описание ТЕКСТА
Описание ССЫЛОК
Итак, классы. Класс - это группа обьектов(часто разных ), описанных одним описанием стилей. Предположим, Вы описали в таблице стилей характеристики основного текста, описали стили необходимого параграфа и т.д. У Вас остаются обьекты, которые отличаются от этих описаний. Например, это комментарии к кнопкам. Так-как это текст, то и описываем мы эти комментарии свойствами текста: { color :#0000FF; FONT-FAMILY: Verdana, Arial; text-decoration:underline; FONT-SIZE: 10pt;} И присвоим это описание КЛАССУ .kn Так и пишется: ставим точку, затем название класса(любое слово или сочетание букв), описание. Мы получили описание класса "kn", в котором заданы цвет, шрифт, подчеркивание и размер текста. В HEAD это смотрится так:
<![CDATA[<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>]]>
Если присвоить данный класс тексту, то получим:
Проба КЛАССА.
Это делается так:
<![CDATA[<FONT CLASS="kn" >Проба КЛАССА</FONT>]]> Обратите внимание, "kn" пишется без точки!
А теперь вспомним, с чего это началось. С кнопок. Не сделать ли нам кнопки и комментарии к ним в одном стиле? Надо попробовать.
<![CDATA[<FORM><INPUT TYPE="BUTTON"
CLASS="kn" NAME="oooo"
VALUE="проба" ALIGN="">
</FORM>]]>
Получилось. У кнопки и текста одно описание. Добавим в описание фон:background:#46FF34
Эта кнопка предназначена для ....
Только будте осторожнее с фоном для текста, в Нетскейпе его может растянуть полосой на все доступное по ширине пространство.
А теперь подставим CLASS="kn" в таблицу:
<![CDATA[<TABLE CLASS="kn" BORDER="1">
<TR>
<TD>проба класса для таблицы
</TD>
</TR>
</TABLE>]]>
Все работает. Одним описанием мы задали стили для совершенно разных обьектов.
Часто в описании класса можно задать очень много свойств. Например, в нашем описании "kn" можно добавить описание границ для таблицы. Обьекты нашего класса не имеющие табличных границ просто проигнорируют это описание. Но все рекомендую проверять, надежнее будет.
|
|
|
|
|
|
CSS