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

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | Псевдо-классы :link, :hover, :visited; и псевдо-элементы: :first-line, :first-letter

Псевдо-классы :link, :hover, :visited;
и псевдо-элементы: :first-line, :first-letter

Все элементы языка HTML составляют дерево – документа, и они могут выступать селекторами для описания стилевой информации определенных "кусочков" содержания. Однако, не существует элементов, связанных со ссылками или первой строкой параграфа, или с первой буквой предложения. Для описания такой стилевой информации используют псевдо-классы :link, :hover, :visited; и псевдо-элементы: :first-line, :first-letter.

Внесем изменения в нашу стилевую таблицу. Псевдо-класс :link будет определять стилевую информацию для не посещенной ссылки, :hover – для ссылки, когда на нее наезжает курсор мышки, а :visited – для посещенной ссылки.

Для класса green элемента P мы установим "буквицу", т.е. первая буква параграфа будет отличаться от всего текста размером и цветом, с помощью псевдо-элемента :first-letter. Для класса lin элемента P определим первую строку параграфа с утолщенным шрифтом.

ПРИМЕР 10
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;}
P.green:first-letter {color: brown;
                      font-size:18pt;}

P.lin:first-line {font-weight:bold;}

.gray{color:gray;}

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

HR {color: yellow;}

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

A:hover {color:white;
         background:red;}

A:visited {color: green;}

OL LI {font-style:italic}
#other {font-style:normal;
        font-weight:bold;}
UL LI {font-style:normal;}

Дополним документ соответствующим классом lin.

<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 class='lin'>Броненосец. Этих животных, покрытых тяжелой броней, используют в пищу
       в Южной и Центральной Америках, а также изредка едят в Мексике и самых
       южных районах США. В Техасе их в шутку называют «опоссум в раковине».
       Консистенция и вкус мяса считаются достаточно хорошими. Хотя Чарльз
       Дарвин сообщал, что его вкус напоминает утятину, всё же его часто
       сравнивают с мясом опоссума, свиньи и морских свинок.
    </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>

Как видите, описание стилевой информации не такой уж сложный процесс.

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