| CSS klase |
 |
 |
 |
|
Možda se pitate je li moguće dati jednom html tagu različite izglede korištenjem CSS-a. Npr. jednom da odlomak bude s velikim slovima i zelene boje, a drugi put crne boje s malim slovima. Odgovor je da, jer CSS ne bi bio tako koristan kada to ne bi omogućavao.
Korištenje klasa u CSS-u je jednostavno. Potrebno je samo dodati nastavak na obični CSS kod i postaviti oznaku klase u html. Isprobajte primjer koji oblikuje dva odlomka na različite načine. CSS kod umetnite na jedan od načina kako je to navedeno u članku Dodavanje css stilova.
CSS kod:
p.prvi { color: blue; } p.drugi { color: red; }
HTML kod:
<html> <body> <p>Ovo je običan odlomak.</p>
<p>Ovaj odlomak koristi p.prvi CSS kod!</p> <p> Ovaj odlomak koristi p.drugi CSS kod!</p> </body> </html>
Biva prikazano:
Ovo je običan odlomak.
Ovaj odlomak koristi p.prvi CSS kod!
Ovaj odlomak koristi p.drugi CSS kod!
Moguće je koristiti CSS klase s bilo kojim html tagom. Međutim, ako ste definirali stil za polazni <p> tag za odlomak, što će se dogoditi s ostalim klasama definiranim za <p> tag odlomka.
Događa se slijedeće, CSS klasa bilo kojeg <p> taga ne obazire se na polazni <p> CSS stil. Ako CSS klasa koristi ista svojstva (atribute) definirane polaznim CSS-om, tada će biti primjenjeno oblikovanje definirano klasom.
CSS Code:
p{ color: red; font-size: 18px; } p.test1{ color: blue; } p.test2{ font-size: 12px; }
HTML Code:
<html> <body> <p>Ovo je običan odlomak.</p>
<p>Ovaj odlomak koristi p.test1 CSS kod!</p> <p>Ovaj odlomak koristi p.test2 CSS kod!</p> </body> </html>
Biva prikazano:
Ovo je običan odlomak.
Ovaj odlomak koristi p.test1 CSS kod!
Ovaj odlomak koristi p.test2 CSS kod!
p.test1 odlomak ostaje iste veličine slova ali se boja mijenja. p.test2 odlomak ostaje iste boje, ali se veličina slova
Zapamtite, CSS kod u klasama ne obazire se na svojstva polaznog CSS koda za taj tag ako je isto svojstvo navedeno i u klasi. Teme: |
Umjetnik
