ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | Селекторы CLASS и ID

Селекторы CLASS и ID

Практически все элементы языка HTML могут иметь атрибуты class и id. Эти атрибуты могут играть роль селекторов в каскадных стилевых таблицах, определяя стиль для конкретных элементов с данными атрибутами. Отличие селектора class от id состоит в том, что селектор class="имя_1" может присваиваться нескольким элементам в документе, а селектор id="имя_2" может быть только у одного.

Внесем изменения в наш HTML-документ.

<HTML>
  <HEAD>
    <TITLE>Документ</TITLE>
   <LINK href="mystyle.css" rel="stylesheet" type="text/css">
  <HEAD>

  <BODY>

    Название компании<BR>

<!-- таблица для меню -->

    <TABLE width="100%">
     <TR>
      <TD>
        <A href="#">О компании</A>
      </TD>
      <TD>
        <A href="#">Продукция | услуги</A>
      </TD>
      <TD>
        <A href="#">Контактная информация</A>
      </TD>
     </TR>
    </TABLE>

   <H1>Заголовок 1-о уровня</H1>
   <H2>Заголовок 2-о уровня </H2>
    <P class='green'>Практически все животные, даже очень ядовитые змеи, съедобны, 
       или, по крайней мере, безопасны для употребления в пищу человеком.
    </P>
    <P>Некоторые африканские антилопы со спиралевидными рогами (антилопа 
       канна) довольно близки к домашнему скоту и достигают очень больших 
       размеров. Так называемые пастбищные антилопы (24 вида) живут в 
       основном в Африке, и некоторые – в Аравии. В эту группу входят: 
       тростниковый козел, водяной козел, коровья антилопа, антилопа гну, 
       антилопа пала и другие. 
    </P>
Текст, не включенный в элементы, т.е. "анонимный" блок. <BR>
   <H3>Заголовок 3-о уровня</H3>
   <H4>Заголовок 4-о уровня </H4>
    <P>Броненосец. Этих животных, покрытых тяжелой броней, используют в пищу 
       в Южной и Центральной Америках, а также изредка едят в Мексике и самых 
       южных районах США. В Техасе их в шутку называют «опоссум в раковине». 
       Консистенция и вкус мяса считаются достаточно хорошими. Хотя Чарльз 
       Дарвин сообщал, что его вкус напоминает утятину, всё же его часто 
       сравнивают с мясом опоссума, свиньи и морских свинок. 
    </P>
    <P class='gray'>Эскимосы также едят большое количество яиц различных гагарок, и одно 
       время даже запасали их на зиму. Желтки упаковывались, подобно 
       сосискам, в длинные трубки, сделанные из тюленьего кишечника. Затем 
       они вывешивались в тень для медленного высыхания.
    </P>
   <H5>Заголовок 5-о уровня</H5>
   <H6>Заголовок 6-о уровня </H6>
    <P class='green'> Летучие мыши. За исключением полярных районов, высоких гор и 
        некоторых отдаленных островов, летучие мыши различных видов живут 
        везде в очень большом количестве. Не смотря на уменьшение популяций в 
        настоящее время, одна четверть от подсчитанного числа млекопитающих – 
        это летучие мыши.
    </P>

    <TABLE width="50%">
     <CAPTION>Заголовок второй таблицы</CAPTION>
      <TR>
       <TH>Номер</TH>
       <TH>Продукция</TH>
       <TH>Цена</TH>
      </TR>
      <TR>
       <TD>1</TD>
       <TD>Рыба</TD>
       <TD>100</TD>
      </TR>
      <TR>
       <TD>2</TD>
       <TD>Мясо</TD>
       <TD>200</TD>
      </TR>
      <TR>
       <TD>3</TD>
       <TD>Напитки</TD>
       <TD>50</TD>
      </TR>
    </TABLE>

<HR>

<!-- списки -->

    <OL>
     <LI id='other'>Пункт 1. Нумерованный список. </LI>
     <LI>Пункт 2. Нумерованный список. </LI>
     <LI>Пункт 3. Нумерованный список. </LI>
    </OL>

    <UL>
     <LI>Пункт 1. Ненумерованный список. </LI>
     <LI class='gray'>Пункт 2. Ненумерованный список. </LI>
     <LI>Пункт 3. Ненумерованный список. </LI>
     <LI>Пункт 4. Ненумерованный список. </LI>
    </UL>

<HR>
© 2007 Компания

  </BODY>
</HTML>

Внесем изменения в стилевую таблицу.

BODY {color:black;
      background: white;
      font-family:Times;
      font-size:13pt;}

H1,H2,H3 {color:red;
          font-family:Arial;
          }
H4 {font-family: Times;}
H5 {color: green;
    font-family: Verdana;}
H6 {color: blue;
    font-family: san-serif;}

P {font-size:12pt;
   font-stretch: semi-condensed;}

P.green {color:green;}

.gray{color:gray;}

TABLE {   }
CAPTION {font-weight:bold;}
TH {font-variant: small-caps;}
TD {font-style:italic;}

HR {color: yellow;}

A {color:red;
   font-family: Arial;
   font-size: 11pt;
   font-weight: bold;
   font-stretch: semi-expanded;}

OL LI {font-style:italic}

#other {font-style:normal;
        font-weight:bold;}

UL LI {font-style:normal;}

Посмотрим результат в ПРИМЕРЕ 9.

Комментарий

Селектор класса начинается с точки. Если класс принадлежит отдельному элементу (в нашем случае - P), то сначала указывается этот элемент, затем идет точка и имя класса с блоком стилевых правил. Класс, общий для всех элементов, начинается с символа звездочки, и затем - точки с именем класса. Символ звездочки может опускаться.

Селектор ID начинается с символа #.

Более подробную информацию смотрите в разделах: 5.8. Селекторы атрибутов. и 5.9. Селекторы ID.

← Назад | Вперед →
Copyright ©  aranea.ru