O pseudoklasach w css – na szybko.

Jeśli zajmujesz się kodowaniem wyglądu stron www lub dopiero zaczynasz się tego uczyć to zapewne spotkałeś się z metodą wprowadzenia interakcji do elementów nawigacji, tak aby reagowały w odpowiedni sposób np. na najechanie kursora myszy.
JeÅ›li chcesz wiedzieć wiÄ™cej to zapraszam do czytania….

Specyfikacja css’a daje nam możliwość korzystania z zawartych w jego strukturze pseudoklas, które nie wymagaja wczeÅ›niejszej deklaracji, one poprostu istiejÄ… i sÄ… dostÄ™pne dla każdego dokumentu (x)html jaki tworzysz. Przedstawia je poniższy listing.

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

–
Czary z linkami – ożywianie nawigacji.

Korzystając z kilku z wymienionych selektorów możemy dostosować wygląd oraz zachowanie naszych linków na stronie, oto one:

• a:link – okreÅ›la elementy, które sÄ… zwykÅ‚ymi linkami
• a:visited – selektor dla linków odwiedzonych
• a:hover – ta dyrektywa mówi jak zachowa siÄ™ najechany link (kursor nad polem tekstowym)
• a:active – linki aktywne.

I teraz czas na sekret stosowania powyższych selektorów, aby poprawnie działały i były interpretowane zgodnie z naszym zamysłem należy deklarować je w odpowiedniej kolejności. Najpierw ustalamy właściwość dla elementu a: a {}, następnie a:link, a:visited, a:hover, a:active. W innym razie może wystąpić konfikt deklaracji i nasz kod nie będzie funkcjonował jak należy.

Jednak to nie koniec css’owych czarów, wymienione znczniki można stosować w kombinacjach, ale pod jednym warunkiem, że zostanie zachowania kolejność jakÄ… podaÅ‚em akapit wyżej. Dla przykÅ‚adu napiszmy jak to może wyglÄ…dać:

• a:link, a:visited { text-decoration: underlined; }
  
• a:hover, a:active { background-color: #000; }

Każdy element , który jest odwiedzonym (klikniętym wcześniej) linkiem zostanie podkreślony, a linki najechane i będące aktualnie wyświeltane otrzymają czarne tło (#000 == black).Z wymienionych na samym początku selektorów pozostałe oznaczają:

• :focus – tyczy siÄ™ elementów np. pól formularza, które sÄ… aktywne
• :first-child – pierwsze dziecko, w kaskadzie okreÅ›lonej kolejnośćiÄ… DOM’u
• :lang(pl) – nada wyglÄ…d elementom dla których zostaÅ‚a zadeklarowany atrybut lang jako pl.

To wszystko, na ten temat, do usłyszenia.

~Michał Kowalski 2008

admin :: sty.16.2008 :: xHTML/css :: No Comments »

Trackback this post | Feed on Comments to this post