W tej lekcji zajmiemy się przygotowaniem struktury deklaracji w zewnętrznym pliku CSS.
Składnia stylu
selektor { cecha: wartość; }- selektor – dowolny znacznik, np. p (akapit), h1 (nagłówek), li (lista)
- cecha – właściwość stylu dla znacznika, np. kolor (color)
- wartość – opis cechy np. kolor czcionki (color) czerwony (red)
p { color: red; }W kolejnym przykładzie przygotujemy bardziej rozbudowany styl. Akapitowi (p) nadamy pochyłą czcionkę w kolorze niebieskim na szarym tle. Kolejne cechy oddzielamy średnikiem.
p { font-style: italic; color: blue; background: silver; }Dla przykładowego tekstu:
<p>Tekst pochylony w kolorze niebieskim na szarym tle.</p>Efekt będzie następujący:
Tekst pochylony w kolorze niebieskim na szarym tle.
Indywidualny styl
W tym przykładzie przygotujemy formatowanie nagłówka h5. Dokument HTML będzie wyglądać następująco:
<h5>Pierwszy nagłówek h5.</h5>
<h5>Drugi nagłówek h5.</h5>
<h5>Trzeci nagłówek h5.</h5>Przykład
Pierwszy nagłówek h5.
Drugi nagłówek h5.
Trzeci nagłówek h5.
Załóżmy, że chcemy wyróżnić drugi nagłówek. Możemy zatem przygotować formatowanie bezpośrednio w kodzie HTML.
<h5>Pierwszy nagłówek h5.</h5>
<h5 style="color: green;">Drugi nagłówek h5.</h5>
<h5>Trzeci nagłówek h5.</h5>Ten sam efekt osiągniemy deklarując formatowanie nagłówka w naszym zewnętrznym pliku CSS.
W tym celu możemy posłużyć się identyfikatorem (id) lub klasą (class).
Różnica pomiędzy identyfikatorem (id) a klasą (class) jest taka, że dany identyfikator może wystąpić w dokumencie tylko raz.
W naszym przypadku posłużymy się klasą. W pliku HTML drugiemu nagłówkowi nadamy klasę drugi.
<h5>Pierwszy nagłówek h5.</h5>
<h5 class="drugi">Drugi nagłówek h5.</h5>
<h5>Trzeci nagłówek h5.</h5>W pliku CSS przygotujemy deklarację odpowiedzialną za kolor zielony drugiego nagłówka.
h5.drugi { color: green; }Przykład