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 pogrubienie, 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 myszka odwrócenie kolorów, tło białe kolor czerwony, dodatkowo w obu przypadkach odleglosc miedzy tekstem linka a kocem tła to : 3px (taka ramka o grubości 3px dla linka)*/
Koniec części I. Zapraszam na część II – Kurs CSS dla niecierpliwych 2/2