Struktura i reguły CSS

Podstawowy syntaks

Reguły CSS składają się z selektorów i deklaracji określających, jak elementy HTML mają być prezentowane.

Reguły

Selektory

Każdy element HTML może być selektorem CSS. Selektor linkuje do konkretnego stylu. Na przykład:

P { text-indent: 3em }

Selektory klas

Selektor może posiadać różne klasy, pozwalając aby ten sam element miał różne style. Na przykład:

code.html { color: #191970 }
code.css { color: #4b0082 }

Powyższy przykład stworzył dwie klasy: css i html dla elementu CODE.

Klasy można również tworzyć nie przypisując do nich żadnego elementu:

.uwaga { font-size: small }

Klasa uwaga może zostać dodana do każdego elementu. Najlepiej nazywać klasy według ich funkcji, np. uwaga zamiast small.

Selektory ID

Selektory ID są stosowane jedynie raz dla danego elementu. Definiuje się je poprzez #, np.:

#svp94O { text-indent: 3em }

W HTML:

<P ID="svp94O">Text indented 3em</P>

Selektory kontekstualne

Selektory kontekstualne są ciągami selektorów oddzielonych spacją. Definiują właściwości według zasad kaskad. Na przykład:

P EM { background: yellow }

Tekst uwypuklony będzie miał tło żółte tylko w paragrafie.

Deklaracje

Właściwość jest nadawana selektorowi w celu określenia stylu, np. kolor czy margines.

Wartość przypisana jest właściwości, np. color: red;.

Grupowanie

Można grupować selektory z tymi samymi deklaracjami, np.:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif;
}

Dziedziczenie

Wartości właściwości mogą być dziedziczone przez elementy wewnętrzne, np. kolor z BODY pojawi się w P.

Komentarze

Format komentarzy:

/* Komentarze wewnątrz komentarzy są niedozwolone */

Pseudoklasy i pseudoelementy

Przykłady użycia pseudoklas:

selector:pseudo-class { property: value }
selector:pseudo-element { property: value }
selector.class:pseudo-class { property: value }
selector.class:pseudo-element { property: value }

Pseudoklas Anchor

A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

Pseudoelement First Line

P:first-line {
  font-variant: small-caps;
  font-weight: bold;
}

Pseudoelement First Letter

P:first-letter { font-size: 300%; float: left; }

Kolejność kaskad

Można używać !important aby nadać regułom wyższy priorytet:

BODY {
  background: url(bar.gif) white;
  background-repeat: repeat-x !important;
}

Pochodzenie reguł (autor kontra użytkownik)

Reguły autora mają pierwszeństwo nad użytkownika, zwłaszcza przy użyciu !important. Należy stosować ostrożnie, aby nie utrudniać czytania strony.

Reguły selektorów i kolejność

Bardziej precyzyjne reguły mają pierwszeństwo, a jeśli są takie same, wygrywa ostatnia.

Szybkie menu