Kurs CSS dla niecierpliwych [cz 1/2]

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

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
fontspan – 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

Powiązane artykuły

Kurs css

  • 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…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…