Kurs HTML - style: selektory specjalne









Specjalne selektory HTML

[ aktualizacja 22.12.2000 ]

a. Klasy selektorów

W powyższych przykładach posłużyliśmy się prostym selektorem 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. 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.

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

P {font-family: Helvetica; font-size: 10pt}
P.uwagi {font-family: Helvetica; font-size: 10pt; font-weight: bold}
P.istotne {font-family: Times; font-size: 10pt; color: red}
P.przypisy {font-family: Helvetica; font-size: 8pt}

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

<p class=konkretna_klasa>Akapit</p>



To jest akapit pisany za pomocą normalnej czcionki. Została w nim użyta czcionka Helvetica o wielkości 10 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ą zdefiniowanej czcionki Helvetica o wysokości 8 punktów.


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.


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.