Kaskadowe arkusze stylów CSS: selektory specjalne









Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne
selektory pseudoklas | selektory pseudoelementów





Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki






Specjalne selektory HTML

a. Klasy

Najczęściej stosujemy proste selektory w postaci elementu HTML. Język CSS przewiduje jednak tworzenie tzw. klas,
które pozwalają zróżnicować ten sam element zależnie od pojawiających się okoliczności. Zwróć na nie szczególną uwagę, gdyż są bardzo często stosowane!.

Bardzo dobrym przykładem jest tutaj ponownie element p. Jest oczywiste, że w większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za
pomocą klas i tylko w odpowiednim miejscu przywoływać stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla akapitu. Klasy są przydatne właśnie do identycznego formatowania wybranych fragmentów tekstu w różnych miejscach tego samego dokumentu lub różnych dokumentów - ilekroć pojawi się fragment o tym samym znaczeniu (np. akapit o szczególnie ważnej, wartej uwypuklenia treści), możemy go sformatować za pomocą zdefiniowanej w arkuszu stylów klasy.

Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać:

p {font-family: Arial; font-size: 12pt; }
p.uwagi {font-family: Arial; font-size: 12pt; font-weight: bold; }
p.istotne {font-family: Times; font-size: 12pt; color: red; }
p.przypisy {font-family: Arial; font-size: 10pt; }

Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia

<p class="konkretna_klasa">Akapit</p>

Przykładowo:

<p class="istotne">Treść akapitu</p>

I wynik zastosowania takich kodów:

To jest akapit pisany za pomocą normalnej czcionki. Została w nim użyta czcionka Arial o wielkości 12 punktów. Klasę tę możemy wykorzystać przy zapisywaniu "normalnego" tekstu, nie mającego jakichś specjalnych wyróżnień.

W jakimś miejscu możemy umieścić przypisy. Zapisujemy je za pomocą klasy p.przypisy.

Gdy zajdzie konieczność podania uwag, możemy wykorzystać klasę p.uwagi, która wyróżnia się dodatkowym pogrubieniem tekstu.

Istotne fragmenty tekstu możemy w jakiś sposób wyróżnić. Tutaj korzystamy z definicji klasy p.istotne, która posługuje się czcionką Times i kolorem czerwonym.

To był przykład klasy związanej z danym selektorem, tutaj konkretnie z akapitem. Użycie klasy class="istotne" w odniesieniu do innego selektora, np. tytułu któregoś stopnia, nie dałoby efektu, gdyż klasa ta jest zastrzeżona w naszej definicji do akapitu. Trzeba by użyć bardziej ogólnej definicji, mianowicie:

.istotne {font-family: Arial; font-size: 30px; color: red}

Nagłówek pierwszego stopnia z definicją klasy

Zauważ, że tutaj nie przypisujemy już klasy do konkretnego elementu, lecz możemy jej użyć z dowolnym selektorem.

Ważne: klasy można łączyć ze sobą w definicji, np. <p class="klasa1 klasa2">Treść akapitu</p>.

Klasy umieszczane w części nagłówkowej lub zewnętrznych arkuszach stylów są powszechnie stosowaną techniką formatowania pojedynczych dokumentów, a nawet całych i kompleksów.

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

b. Selektor ID

Selektor ID (identyfikatora) został pomyślany jako narzędzie do
wskazywania elementu mającego jednoznaczny atrybut ID, a więc
występującego raz jeden w drzewie dokumentu. Identyfikator jest
budowany z liter od a do z, cyfr, łączników i kropek, przy czym na
początku musi się znajdować litera.


#[etykieta ID] {deklaracja stylu}

Przykład:

H1#chapter {letter-spacing: 0.5em}

Podając kod <h1 id="chapter">Chapter</h1>, uzyskamy

Chapter

Interpretacja: Internet Explorer, Netscape 6, Opera 5.