Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Каскадные таблицы стилей, уровень 1. /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Псевдо-классы и псевдо-элементы - Программирование от RIN.RU
Псевдо-классы и псевдо-элементы


В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа. Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на процесс форматирования.


Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их поведение можно описать с помощью фиктивной последовательности тэгов.


Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы позволяют различать различные типы элементов.


Псевдо-классы ссылок           Назад


UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно. В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента "A":


A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */


Все элементы "A" с атрибутом "HREF" будут помещены в одну и только одну из этих групп (т.е. псевдо-классы не влияют на ссылки-якоря). UA могут по собственному усмотрению перемещать элемент из "visited" в "link" после некоторого периода времени. Ссылка типа "active" - это ссылка, которая в данный момент выбрана (например нажатием на кнопку мыши) читателем.


Форматирование псевдо-класса ссылки происходит также, как если бы класс был указан вручную. UA не обязан переформатировать уже отображаемый документ при переходе ссылки из одного псевдо-класса в другой. Например таблица стилей может законно указывать, что "font-size" ссылки типа "active" должен быть больше, чем у ссылки типа "visited", но UA не обязан динамически переформатировать документ, когда читатель выбирает ссылку типа "visited".


Селекторы псевдо-класса не соответствуют обычным классам и наоборот. Правило в следующем примере не будет оказывать никакого влияния:


A:link { color: red }


<A CLASS=link NAME=target5> ... </A>


В CSS1 псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме "A". Поэтому тип элемента в селекторе можно опускать:


A:link { color: red }
:link { color: red }


Эти два селектора будут идентичны в CSS1.


Имена псевдо-классов не зависят от регистра.


Псевдо-классы могут использоваться в контекстных селекторах:


A:link IMG { border: solid blue }


Псевдо-классы также могут комбинироваться с простыми классами:


A.external:visited { color: blue }


<A CLASS=external HREF="http://out.side/">external link</A>


Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.


Вперед  >>>
 1  2  3 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Терминология

Базовые понятия

Каскадирование

Модель форматирования

Свойства CSS1

Единицы измерения значений

Совместимость с CSS1

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь