Inne działy

 

 

CSS - Pseudo klasy

 

Pseudo-klasy CSS są używane do dodania efektów specjalnych do niektórych selektorów. Nie musisz używać Javascript lub innych skryptów do osiągnięcia tych efektów. Prosta składnia pseudo-klas przedstawia się w następujący sposób:

 

selector:pseudo-class {właściwość: wartość}

 CSS klasy mogą być również używane z pseudo-klasami:

selector.class:pseudo-class {właściwość: wartość}

 

Istnieją następujące najczęściej używane pseudo-klasy:

 

WartośćOpis
:link Użyj tej klasy, aby dodać specjalny styl dla nieodwiedzonych linków.
:visited Użyj tej klasy, aby dodać specjalny styl do odwiedzonego łącza.
:hover Użyj tej klasy, aby dodać specjalny styl do elementu po zatrzymaniu wskaźnika myszy nad nim.
:active Użyj tej klasy, aby dodać specjalny styl do aktywnego elementu.
:focus Zastosuj tą klasę, aby dodać specjalny styl do elementu, kiedy element ma fokus.
:first-child Użyj tej klasy, aby dodać specjalny styl do elementu, która jest pierwszym dzieckiem niektórych innych elementów.
:lang Użyj tej klasy, aby określić język, aby korzystać z określonego elementu.

 

 Podczas definiowania pseudo-klas w bloku <style>...</style>, następujące punkty powinny być pod opieką:

  • a:hover musi być po a:link i a:visited w definicji CSS, aby mógł być skuteczny.
  • a:active musi być po a:hover w definicji CSS, aby mógł być skuteczny.
  • Pseudo-class nie rozróżniają wielkości liter.
  • Pseudo-Class różnią się od klas CSS, ale mogą być łączone.

 

pseudo-class link 

Oto przykład, który pokazuje sposób użycia: połączenia klasy, aby ustawić kolor linku. Możliwa wartość może być dowolną nazwą koloru w dowolnym prawidłowym formacie.

 

<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Czarny Link</a>

 Powyższy kod będzie wyświetlać następujący link:

 

pseudo-class visited 

Oto przykład, który pokazuje sposób użycia klasy:visited, aby ustawić kolor łącza odwiedzonego. Możliwa wartość może być dowolną nazwą koloru w dowolnym formacie.

 

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/index.htm">Kliknij ten link</a>

 Ten kod wyświetli poniższego linka. Gdy klikniesz ten link, zmieni kolor na zielony

 

pseudo-class hover 

Poniżej jest przykład, który pokazuje, jak używać klasy :hover, aby zmienić kolor linku, gdy przesuwamy wskaźnik myszy nad tym łączem. Możliwa wartość może być dowolną nazwą koloru w dowolnym formacie.

 

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/index.htm">Przesuń myszy nad tym linkiem</a>

 Ten kod wyświetli poniższego linka. Teraz przesuń wskaźnik mysz nad tym linkiem i widać, że zmienia kolor na żółty.

 

pseudo-class active 

Oto przykład, który pokazuje sposób użycia klasy :active, aby zmienić kolor aktywnego linku. Możliwa wartość może być dowolną nazwą koloru w dowolnym formacie.

 

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/index.htm">Kliknij ten link</a>

 Ten kod wyświetli poniższego linka. Jego kolor zmienia się na różowy, gdy użytkownik kliknie, go.

 

pseudo-class focus 

Oto przykład, który pokazuje sposób użycia klasy :focus, aby zmienić kolor aktywnego linku. Możliwa wartość może być dowolną nazwą koloru w dowolnym formacie.

 

<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Kliknij ten link</a>

 Ten kod wyświetli poniższego linka. Ten kod zmieni kolor na pomarańczowy, kiedy ten link dostanie fokus, a następnie przeniesiemy fokus na jakiś inny link, zobaczymy, że kolor zmieni się, gdy straci fokus.

 

pseudo-class first-child 

Pseudo-Klasa :first-child pasuje do określonego elementu, który jest pierwszym dzieckiem innego elementu i dodaje specjalny styl do tego elementu, który jest pierwszym dzieckiem jakiegoś innego elementu.

Aby :first-child  pracował w IE <!DOCTYPE> musi być zadeklarowana w górnej części dokumentu

Na przykład, aby wciąć pierwszy akapit wszystkich elementów <div>, można użyć tej definicji:

 

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
<div>
<p>
Pierwszy akapit w div. Niniejszy ustęp będzie wcięty
</p>
<p>
Drugi akapit w div. Niniejszy ustęp nie będzie wcięty
</p>
</div>
Ale nie będzie on pasował do paragrafu w HTML:
<div>
<h3>Nagłówek</h3>
<p>
Pierwszy akapit wewnątrz div.
To tego paragrafu nie będzie zastosowany.
</p>
</div>

 

pseudo-class lang 

Język pseudo-class :lang umożliwia konstruowanie selektorów w oparciu o ustawienie języka w znacznikach.

Ta klasa jest przydatna w dokumentach, które mogą odwoływać się do wielu języków, które mają różne konwencje dla niektórych konstrukcji języka. Na przykład język francuski zazwyczaj używa nawiasów kątowych (< i >) dla cytatów, podczas gdy język angielski używa do cytowania znaki (‘ i ‘).

W dokumencie, który musi uwzględnić tę różnicę, można użyć: pseudo-klasy :lang do zmiany znaków cytowania. Poniższy kod zmienia tag <blockquote> odpowiednio dla używanego języka:

 

<style type="text/css">
/* Dwa rodzaje Cytatów w dwóch językach */
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr"> Cytat w paragrafie </q>...</p>

 Selektor :lang będzie dotyczyć wszystkich elementów w dokumencie. Jednak, nie wszystkie elementy korzystać z właściwości cytatów, więc efekt będzie przejrzysty dla większości elementów.

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.