Kurs CSS dla niecierpliwych [cz 1/2]

Co to jest CSS, po co go używać, jak go używać..
CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www.

Zaczynając kurs CSS (nawet ten, przyspieszony) zakłądam, że znasz podstawowy HTML (a - link, b - pogrubienie, itp). Jeśli tak nie jest, po prostu przeczytaj kurs i spróbuj je poznać, w środkowej części kursu będzie nawiązanie do niektórych znacnzików HTML-a.

1. Używanie:

element {opcje} /*komentarz*/
np.:
a{color:red}/*linki beda sie wyswietlac na czerwono*/
div{width:800px} /*szerokość div bedzie 800px*/

opcje można łączyć, stodując średnik ;
element {opcja; opcja; opcja;}

np.:
a{color:red; background: white; text-decoration: none; } # kolor czerwony, tło białe, brak podkreślenia (wszystko do tego samego elementu czyli linków)

elementy też można grupować (oddzielone są przecinkiem ,)
element, element2 {opcja; opcja; opcja;}

np.
a,b {color: red; background: white;} /* a oraz b będą na czerwono w białym tle.*/

Kilka podstawowych elementów:
a - link
b - podkreślenie
font, span - stylizacja konkretnego tekstu
div - element blokowy, np. menu widgetu w kolumnie
p - paragraf, akapit, blok tekstu

Kilka podstawowych opcji:
color: green; /*kolor */
background: yellow; /*tło*/
text-decoration: underline;/*podkreślenie*/
text-decoration: none;/*brak podkreślenia*/
padding: 2px; /*odległość między obramowaniem/granicą a zawartością (jak masz obraz na ścianie, to można to porównać do szerokości ramki na tym obrazie)*/
border: 2px solid red; /*obramowanie grubości 2px oloru czerwonego*/
margin: 3px; /*odległość między obiektami*/
text-weight: bold; /*pogrubienie*/
font-size: 12px; /*wielkość czcionki : 12px;*/

2. Przykłady:

Modyfikatory (inaczej: deklarowanie akcji do elementów)
np.
a:hover {color: red;} /*po najechaniu myszką link zmieni kolor na czerwony
":hover" dodane po nazwie elementu to deklaracja, że opcje dotyczą elementu w chwili najechania na niego myszką. */

a,a:hover {color: white;background:red;} /*link oraz link po najechaniu myszką ma kolor biały a tło czerwone*/

Można też grupować elementy i ich opcje:

a{color: red;}
a:hover{color: white;}
/* link w kolorze czerwonym, po najechaniu myszką zmini kolor na biały */

a{color: red;text-decoration: none;}
a:hover{color: white;text-decoration: underline;}
/* to co wyzej + link zwykły bez podkreślenia, po najechaniu myszką pokarze się podkreślenie */

a{color: red;text-decoration: none;font-weight:normal;}
a:hover{color: white;text-decoration: underline;font-weight:bold;}
/* to co wyzej + link zwykły bez pogrubienia, po najechaniu myszką link sie pogrubi */

a{color:white;background:red;padding: 3px;}
a:hover{color:red;background:white;padding: 3px;}
/* zwykły link: kolor biały na czerwonym tle, po najechaniu myszką odwrócenie kolorów (tło białe, kolor czerwony); w obu przypadkach odległość między tekstem linka a końcem tła to 3px */

Koniec części I. Zapraszam na część II - Kurs CSS dla niecierpliwych 2/2