Selektory
To właśnie dzięki selektorowi możemy przypisać wybranemu elementowi konkretny styl. Selektory wykorzystywane podczas tworzenia własnych arkuszy stylów mogą przybierać różne formy. Specyfikacja przewiduje wykorzystanie następujących rodzajów selektorów:
- selektory proste,
-selektory uniwersalne,
-selektory potomka,
-selektory dziecka,
-selektory sąsiednie lub rodzeństwa,
-selektory identyfikatora,
-selektory klasy,
-pseudoklasy,
-pseudoelementy.
Selektory proste
Konstrukcja stylu wykorzystującego selektor prosty nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.
P
{
color:red;
font-size:14pt;
}
Selektory uniwersalne
Styl zaprezentowany poniżej jest przykładem selektora prostego i odnosi się tylko do elementów zamkniętych pomiędzy znacznikami <p></p>.
P
{
color:red;
font-size:14pt;
}
W związku z tym wszystkie inne elementy, np. nagłówki czy tabele, nadal będą formatowane w sposób domyślny. Oczywiście sytuacja taka jest zupełnie poprawna i dzięki temu praca z CSS jest bardzo prosta i przyjemna.
Zdarza się, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał on na cały dokument. Bardzo dobrym przykładem takiej sytuacji może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl może przyjąć następującą postać:
*
{
background-color:white;
}
Selektory "potomka"
W przypadku selektora „potomka” najlepszym rozwiązaniem jest rozpoczęcie jego omawiania od konkretnego przykładu. Dzięki temu działanie tej konstrukcji powinno być znacznie bardziej zrozumiałe.
Przykładowy styl dla nagłówka stopnia pierwszego wygląda tak jak w poniższym przykładzie:
H1
{
font-size:20pt;
}
Jeżeli chcemy, aby jakiś fragment tego nagłówka był sformatowany według innych zasad, to należy arkusz uzupełnić o następującą konstrukcję:
H1 SPAN
{
font-size:10pt;
}
Selektory "dziecka"
Selektory dziecka są wynikiem zależności panujących pomiędzy poszczególnymi znacznikami języka HTML. Przykład opisanego selektora znajduje się poniżej.
P > SPAN
{
font-style:italic;
text-decoration:underline;
color:green;
}
Dany styl zadziała w przypadku, gdy wewnątrz bloku tekstu zostanie umieszczony znacznik <span></span>.
Selektory "rodzeństwa"
Również w przypadku tego typu selektorów opieramy się na zależnościach obowiązujących w języku XHTML/HTML. Na podstawie tego rodzaju selektora możemy przypisać styl elementowi bezpośrednio sąsiadującemu z innymi. By warunek został spełniony, oba selektory muszą mieć wspólnego „rodzica”. Przykładem takiego selektora jest poniższy listing.
P + SPAN
{
font-style:italic;
text-decoration:underline;
color:green;
}
Zgodnie z tym, co napisałem powyżej, znaczniki <p> oraz <span> muszą ze sobą sąsiadować.
Identyfikatory
Dotychczas opisane selektory pozwalały na przypisanie danego formatowania wszystkim elementom odpowiadającym użytemu selektorowi. Przykład stylu zamieszczony poniżej określał, iż wszystkie akapity powinny zostać sformatowane za pomocą czcionki o kolorze zielonym i wysokości 14pt.
P
{
color:green;
font-size:14pt;
}
Twórcy kaskadowych arkuszy stylów od samego początku dostrzegli konieczność zróżnicowania podobnych elementów, w efekcie czego wprowadzili identyfikator — id.
Klasy
Klasy są kolejnym podstawowym pojęciem w kaskadowych arkuszach stylów. Budowa klasy ma następującą postać:
selektor.nazwaklasy
{
font-size:12 pt;
color:green;
}
Zwróć uwagę na fakt występowania kropki po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez tego dalsza praca nie miałaby większego sensu.
Dokładniejsza analiza uniwersalnych definicji klas oraz identyfikatorów prowadzi do wniosku, że w działaniu niczym się one nie różnią. Jednak specyfikacja zakłada, że dany identyfikator może wystąpić tylko raz w całym dokumencie, natomiast klasę można powielać do woli. Oczywiście najczęściej używane przeglądarki w tym przypadku nie są do końca zgodne ze specyfikacją, dlatego identyfikatorów, podobnie jak klas, możemy używać tyle razy, ile razy uznamy to za konieczne. Działanie takie jest błędem, ale nie wpływa na poprawność działania strony.
Pseudoklasy
Specyfikacja CSS przewiduje kilka ściśle określonych klas pozwalających na formatowanie niektórych elementów dokumentu. Do najpopularniejszych z całą pewnością zaliczają się pseudoklasy odsyłaczy :link oraz :visited. Poniżej zamieściłem przykładowy arkusz wykorzystujący obie pseudoklasy w połączeniu z selektorem A.
A:link
{
color:red;
}
A:visited
{
color:green;
}
Niestety, życie bywa trudne i większość nowoczesnych stron wymaga stosowania na nich odnośników o zróżnicowanej wielkości lub wyglądzie. Na szczęście w specyfikacji CSS znajdziemy sposób na zróżnicowanie odnośników na stronie. Do wykonania tego zadania wystarczy połączyć zdobyte wcześniej informacje o klasach oraz pseudoklasach.
Pseudoelementy
Ciekawą grupę selektorów stanowią pseudoelementy, które pozwalają nam na przypisanie kolejnych wymyślnych stylów do elementów strony WWW.
Pseudoelement :first-letter pozwala na formatowanie pierwszej litery w bloku tekstu. Przykładowy arkusz spowoduje powiększenie pierwszej litery do wielkości 100 punktów i nadanie jej koloru czerwonego.
P
{
color:navy;
font-size:30pt;
}
P:first-letter
{
color:red;
font-size:100pt;
}