3

kurs

css

Lekcja 1: Budowa stylu - selektor cecha wartość

css

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:

Przykład

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 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
Pierwszy nagłówek h5.
Drugi nagłówek h5.
Trzeci nagłówek h5.
comments powered by Disqus

Do góry