RADE MILJANOVIĆ

Osnove CSS jezika

besplatna e-knjiga sa tutorijalom o CSS jeziku




UPOZORENJE: Ukoliko niste savladali osnove HTML jezika, ne možete otpočeti sa učenjem CSS jezika jer on zahteva osnovno znanje HTML-a, na koji se nadograđuje. Stoga, najpre se upoznajte sa HTML jezikom:

OSNOVE HTML JEZIKA







Sadržaj

Šta je CSS?
Prednosti CSS jezika
Kako funkcioniše CSS? - primeri
Povezivanje CSS sa HTML jezikom
CSS selektori
CSS prilagođavanje dizajna svim uređajima
CSS funkcije
CSS animacije





Šta je CSS?

CSS(Cascading Style Sheets) je stilski jezik koji daje širok svojevrstan opis HTML elementima na veb stranicama(sajtovima).

Aktuelna, to jeste najnovija verzija CSS jezika koja je u upotrebi, nosi oznaku CSS3, tako da ćemo sve vreme dok govorimo o CSS jeziku, zapravo upoznavati se sa njom.


CSS nije programski jezik, on je samo jezik za nadogradnju HTML, to jeste stilizaciju elemenata u HTML jeziku( HTML takođe nije programski jezik).









Prednosti CSS jezika

Iako odmah na početku nećete moći shvatiti značaj svih prednosti koje CSS donosi, ovde ćemo ih navesti jer se uvek možete vratiti da ih ponovo pročitate.

-Široke kreativne mogućnosti. Veb dizajneri u CSS jeziku imaju mogućnosti da poput grafičkih dizajnera iscrtaju na veb stranicama skoro sve što požele. Granicu predstavlja samo lična kreativnost osobe.

- Ušteda truda i vremena. Pomoću CSS jezika moguće je centralizovati kodiranje, to jeste, samo jedanput i na jednom mestu odrediti opis HTML elemenata, čime se posao skraćuje i štedi vreme.

- Jednostavnije izmene i nadogradnje. Takođe, zahvaljujući centralizovanom kodiranju, omogućena je laka preglednost i sa njom izmene ili ispravljanje grešaka ili bilo kakvih promena funkcionalnosti kod izgleda na sajtovima.

- Prilagođavanje svim uređajima. CSS omogućava laku prilagodljivost izgleda sajta na svim uređajima sa kojih se on prati. Od svih vrsta mobilnih telefona i tableta do desktopa. Dobar CSS će na svakom ekranu različitih oblika i veličina, učiniti da sajt izgleda kao da je baš napravljen samo za njih.

-SEO prednosti. Sajtovi stilizovani u CSS jeziku se bolje rangiraju kod pretraživača. Oni se lakše i brže učitavaju, tako da su kod Gugla i ostalih pretraživača postali standardni uslov za SEO optimizaciju, to jeste mogućnostima da se nađu na prvoj stranici prilikom pretrage.

-Pogodan za programske jezike. CSS omogućava i olakšava intarakciju sa programskim jezicima. Na primer, jezicima poput Javaskripta i PHP-a, omogućena je lakša nadogradnja na HTML stranicama zahvaljujući CSS klasama.




Kako funkcioniše CSS? - primeri

Da bi jednostvano objasnili namenu CSS jezika, uzećemo za primer gradnju kuće. Recimo da je sagrađena konstrukcija kuće isto što i veb stranica, čiju konstrukciju čine HTML elementi od koji je napravljena. Tako i kuća na sebi ima mnogo elemenata: vrata, prozore, krov, fasadu, stepeništa, terasu... Svaki od ovih elemenata može da ima bezbroj različitosti: po dimenzijama, po obliku, po materijalu od koga su izrađeni, po boji i mnogo čemu. Kombinacijom izbora ovih stvari dobićemo konačan izgled kuće.
Tako je i kod CSS jezika, on daje konačan izgled veb stranici tako što se njim uradi detaljan opis svakom HTML elementu. Drugim rečima, CSS-om stilizujemo, to jeste, detaljno uređujemo opis HTML elemenata.

Pokazaćemo to na sledećem primeru. Ovde imamo tekst stilizovan samo pomoću HTML tagova i atributa:

<p align="center"><b><i><font size="4"><font color="blue">Ovaj tekst je stilizovan u HTML jeziku.</font></font></font></i></b> </p>


rezultat:

Ovaj tekst je stilizovan u HTML jeziku.

Sada ćemo isti tekst, stilizovati na isti način, samo ovaj put u čistom CSS jeziku. To će izgledati ovako:

<p style="text-align: center; font-weight: bold; font-style: italic; font-size: 18px; color: blue;"> Ovaj tekst je stilizovan u CSS jeziku. </p>


rezultat:

Ovaj tekst je stilizovan u CSS jeziku.


Dakle, primećujemo razliku između istog primera stilizacije ali u različitim jezicima. Za razliku od HTML jezika, gde su upotrebljavani i tagovi(oznake) i atributi, u CSS jeziku se koriste samo atributi. Svi oni su smešteni u glavni, globalni atribut pod oznakom style="".
Tako vidimo da je su u ovom primeru zamenjeni:
- Paragraf atribut align="center" u HTML jeziku, zamenjen je sa atributom text-align: center; u CSS jeziku.
- Bold tag <b> u HTML jeziku, zamenjen je atributom font-weight:bold; u CSS jeziku.
- Italic tag <i> u HTML jeziku, zamenjen je sa atributom font-style:italic; u CSS jeziku.
- Tag za veličinu teksta <font size="4"> u HTML jeziku, zamenjen je sa atributom font-size:18px; u CSS jeziku. ( Za razliku od HTML jezika koji veličinu slova prikazuje samo u skromnim veličinama od 1 do 7, u CSS jeziku veličina slova može da se prikazuje u pikselima, procentima i drugim merama, skoro sa neograničenim mogućnostima.)
- Tag za boju teksta <font color="blue"> u HTML jeziku, zamenjen je atributom color:blue; u CSS jeziku.


Posle ovog jednostavnog primera, verovatno vam još uvek neće biti jasno zašto je bolje koristiti CSS jezik.
Zbog toga, u istom primeru, pokazaćemo bolje mogućnosti koje CSS jezik može dati u odnosu na HTML. Sada ćemo naš primer ukrasiti sa atributima koji postoje u CSS jeziku a ne postoje u HTML jeziku:

<p style="text-align: center; font-weight: bold; font-style: italic; font-size: 18px; color: blue; font-family: Stencil Std, fantasy; text-shadow: 1px 1px 0px red; background-color: yellow;"> Ovaj tekst je stilizovan u CSS jeziku. </p>

rezultat:

Ovaj tekst je stilizovan u CSS jeziku.

Na postojeće atribute dodati su:
- atribut za tip slova font-family: Stencil Std, fantasy;
- atribut za senku teksta text-shadow: 1px 1px 0px red;
- atribut za pozadinu teksta background-color: yellow;

Na taj način tekst je bolje i bogatije ukrašen, što je glavna prednost CSS jezika. CSS pruža još daleko više mogućnosti nego što je prikazano u ovom primeru.





Pokazaćemo još jedan sličan primer sa <div> elementom:

<div border="1">
  <p>div element>/p>
</div>

rezultat:

div element



Sada ćemo isti <div> element stilizovati u CSS jeziku:

<div style="width: 300px; height: 200px; border: 1px solid; background-color: lime; font-weight: bold;">
  <p style="color: red; font-weight: bold; text-align: center;">div element</p>
</div>



rezultat:

div element


Uz pomoć CSS jezika, dali smo ovom <div> elementu sledeće atribute koji nisu postojali u HTML jeziku:
- atribut za širinu elementa, vrednosti 300 piksela width: 300px;
- atribut za visinu elementa, vrednosti 200 piksela height: 200px;
- atribut za širinu(debljinu) granične linije elementa, vrednosti 1px solid border: 1px solid;
- atribut za boju pozadine, vrsta boje LIME background-color: lime;


Tako smo dobili bogatije prikazan <div> element. Upotrebom CSS-a možemo još lepše prikazati ovaj element:

<div style="width:300px; height:200px; background-image: url('slike/listici.jpg'); border-color: blue; border-style: double; border-width: 5px; border-radius: 30px;">
  <p style="color: red; font-weight: bold; text-align: center;">div element</p>
</div>



rezultat:

div element

Postojeći <div> element ukrašen je novim CSS atributima:
- atributom za sliku u pozadini background-image: url('slike/listici.jpg');
(izabrana je slika sa nazivom listici.jpg koja se nalazila u folderu slike)
- atribut za širinu(debljinu) granične linije elementa, vrednosti 5 piksela border-width: 5px;
- atribut za boju granične linije elementa border-color: blue;
- atribut za stilski izgled granične linije elemeta border-style: double;
- atribut za radijus granične linije elementa, vrednosti 30 piksela border-radius: 30px;


Iako sada izgleda da smo upotrebili skoro sve mogućnosti u CSS-u za opis div elementa, postoji još mnogo toga što se može uraditi u CSS-u sa njim. Napomenućemo samo određivanje njegovih pozicija i prilagođavanje za prikazivanje na različitim uređajima, koji su vrlo važni.




PAŽNJA! Neki od HTML atributa i tagova koji su navedeni u ovim primerima su zastareli, tako da nisu podržani u HTML5 verziji. Ovde su upotrebljeni zbog jednostavnijeg objašnjenja. U praksi svi HTML elementi se potpuno stilizuju u CSS jeziku, što je važan razlog da se on što pre savlada.




U ova dva primera prikazali smo kako CSS jezik funkcioniše. Iako je CSS jezik dosta opširan i nudi bezbrojne mogućnosti, ovde je prikazana njegova suština.






Povezivanje CSS sa HTML jezikom

Postoje tri načina za povezivanje(nadogradnju, implementaciju) CSS sa HTML jezikom:
- direktni (inline) CSS
- interni (internal) CSS
- dodatni (external) CSS

Direktni (inline CSS) je način koji smo koristili do sada. U njemu se direktno u HTML element dodaje oznaka style="" u koju se ispisuju svi atributi.

<p style="font-style: italic; font-size: 18px; color: blue;"> Ovaj tekst je stilizovan u CSS jeziku. </p>

Ovaj stil se zbog manjka fleksibilnosti retko upotrebljava. Uglavnom se koristi za učenje, kao privremeno rešenje, probno prikazivanje i slično. Koriste ga većinom početnici, dok se iskusni veb majstori služe internim i dodatnim načinima implementacije.


Interni (internal CSS) način služi za implementaciju CSS na samo jednoj HTML stranici. Kod njega se CSS atributi smestaju u oznaku <style></style> koja se postavlja u <head></head> tagu stranice.

<html>
<head>
  <style>
  p {
   font-style: italic;
   font-size: 18px;
   color: blue;
}
 </style>

</head>
<body>

       <p>Ovaj tekst je stilizovan u CSS jeziku.</p>

</body>
</html>


Ovaj način ima prednost što sa njim mogu da se stlizuju svi elementi na jednoj HTML stranici. Nedostatak mu je taj što kad veb-sajt ima više stranica ne pokriva ostale HTML stranice, pa je potrebno da se ispisuje za svaku stranicu dodatno.


Dodatni (external CSS) način ima prednost što može da stilizuje ceo veb-sajt. Za njega je potrebno napraviti posebno fajl sa .css ekstenizijom dokumenta a zatim ga likom spojiti sa svakom HTML stranicom. Link se takođe smešta u <head> </head> tagu.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css"/ >
</head>
<body>

       <p>Ovaj tekst je stilizovan u CSS jeziku.</p>

</body>
</html>

Ovde je pokazano povezivanja CSS fajla sa nazivom style na HTML stranici.
CSS fajl se kreira tako što se sve CSS oznake ispišu na novoj stranici kodnom editoru (naš je notepad++), naravno bez <style></style> taga koji je nepotreban. Onda se na komandu "Save" otvara prozor u kome dajete ime fajlu (u našem slučaju to je ime style) a zatim u >"Save as Type" izabere tip dokumenta Cascade Style Sheets file (.css).

Iskusni veb majstori ponekad, zavisno od složenosti sajta, kreiraju po dva ili više CSS fajlova koje zatim spajaju sa HTML stranicama.

Prilikom odabira načina povezivanja CSS-a sa HTML jezikom, dobro rešenje je da se dodatnim načinom(external CSS) stilizuju elementi koji se pojavljuju na svim HTML stranicama, a elemente koji se pojavljuju samo na jednoj stranici stilizovati internim načinom(internal CSS).
Stilizovanje elemenata direktnim načinom(inline CSS) treba izbegavati osim ako se koristi za učenje ili privremeno rešenje.







CSS selektori

Pretpostavimo da smo do sada savladali najosnovnije stvari o CSS, tako da nam direktni (inline) CSS, više neće biti potreban. Od sada, zbog lakšeg objašnjenja, upotrebljavaćemo samo interni (internal) CSS.

Zamislimo da sada imamo ovakvu situaciju:

<p>Ovaj tekst je crvene boje.</p>
i
<p>Ovaj tekst je plave boje.</p>

Dakle, isti HTML tag <p>, mora da ima dve različite boje. Kako to izvesti bez korišćenja inline CSS-a?

To postižemo pomoću CSS selektora, koji se dodaju HTML elementima.

Postoje tri vrste selektora koji se dodaju HTML elementima:

-univerzalni selektori (universal selectors)
-id selektori(id selectors)
-klasa selektori (class selectors)

Univerzalni selektori su najjednostavniji jer kod njih se preko HTML tagova vrši stilizovanje određenih elemenata. Na primer:

<!DOCTYPE html>
<html>
 <head>
  <title>Univerzalni selektori</title>
  <style>
  H1 {
  color:red;
  background-color:gold;
    }
  p {
  color:blue;
  background-color:red;

    }
</style>
</head>
 <body>

<H1>NASLOV TEKSTA</H1>

<p>Tekst na HTML stranici.<p>
   
  </body>
</html>
rezultat:

NASLOV TEKSTA

Tekst na HTML stranici.



Univerzalni selektori su jednostavni za stilizovanje HTML elemenata ali šta uraditi kada treba ovako stilizovati tekst:
<p>Ovaj tekst je crvene boje.</p>
i
<p>Ovaj tekst je plave boje.</p>

Za to koristimo id i class selektore.

Selektor id koristi se za odabir jednog HTML elementa s jedinstvenom vrednošću atributa id.
Označava se heš oznakom # uz koju ide naziv selektora

na primer: #a, #b, #c, #d...
Da bi bolje prikazali primerom kako se oni upotrebljavaju, upotrebićemo ovaj kod.


<!DOCTYPE html>
<html>
 <head>
  <title>ID selektori</title>
  <style>
  #a {
  color:red;
    }
  #b{
  color:blue;

    }
</style>
</head>
 <body>

   <p id="a">Ovaj tekst je crvene boje</p>
   <p id="b">Ovaj tekst je plave boje</p>
   
  </body>
</html>


rezultat:

Ovaj tekst je crvene boje

Ovaj tekst je plave boje

Tako smo izveli da paragraf <p> ima dve različite boje.
Ali to nije sve, CSS klase(CSS class) mogu da imaju ista svojstva kao ID selektori, bilo da se upotrebljavaju samostalno ili kombinaciji sa ID selektorima.

Naš prošli primer bi ovako izgledao kada bi umesto id koristili klase:

<!DOCTYPE html>
<html>
 <head>
  <title>Klas selektori</title>
  <style>
  .a {
  color:red;
    }
  .b{
  color:blue;

    }
</style>
</head>
 <body>

   <p class="a">Ovaj tekst je crvene boje</p>
   <p class="b">Ovaj tekst je plave boje</p>
   
  </body>
</html>


rezultat:

Ovaj tekst je crvene boje

Ovaj tekst je plave boje

Zahvaljujući CSS selektorima možemo urediti da svi elementi na HTML stranci budu stilizovani onako kako mi zadamo.
id i class selektori se mogu na HTML zajednički kombinovati u bezbroj kombinacija. Evo jednog primera:

<!DOCTYPE html>
<html>
 <head>
  <title>Kombinovani selektori</title>
  <style>
  #a {
  color:red;
    }
  #b{
  color:blue;
    }
  .a {
  background-color:yellow;
    }
  .b{
  background-color:lime;

    }
</style>
</head>
 <body>

   <p id="a" class="a">Ovaj tekst je crvene boje</p>
   <p id="b" class="b">Ovaj tekst je plave boje</p>
   
  </body>
</html>


rezultat:

Ovaj tekst je crvene boje

Ovaj tekst je plave boje




.






CSS prilagođavanje dizajna svim uređajima
(responsive css)

Došli smo do jedne od najbitnijih mogućnosti CSS jezika, to je prilagođevanje dizajna veb sajtova i aplikacija uređajima različitih rezolucija i veličina ekrana (CSS Responsive and Adaptive Design).
Postoje mnogi uređaji preko kojih pristupamo veb sajtovima i aplikacijama, od telefona i tableta, preko laptopova i desktopa, do ogromnih televizora. Dodatno, svi ovi uređaji imaju modele raznih veličina ekrana.
Veb majstori moraju svoje sajtove učiniti jednako pregledne na svim tim uređajima. To je ogroman posao koji zahteva posebno pisanje CSS-a za svaki uređaj ali je neizbežan.

Na primer, tekst veličine 18 piksela, koji je dobar za čitanje na kućnim računarima, prevelik je za čitanje na telefonima. Za njih se mora smanjiti.
Tako je i slika veličine 800 piksela prevelika za prikazivanje na telefonima, deo nje se neće moći prikazati.
Ili, na istom telefonu, ista slika ima različite veličine u "portrait" modu i "landscape" modu.
Često je zbog suprotnog odnosa dužina-visina na velikim i malim uređajima, potrebno izmeniti celokupan izgled veb sajtova i aplikacija, menjati čak i raspored sekcija i elemenata.
Ukratko, manje-više potrebno je promeniti veličinu svega što oni sadrže.

css prilagođenost

Prilagođavanje dizajna različitim uređajima težak je posao za one koji nisu svaladali CSS, bar do nekog srednjeg nivoa. Ipak, za početnike ćemo pokazati neke najvažije stvari u prilagođavanju dizajna za prikazivanje na različitim uređajima.

Prvi korak je postavljanje meta taga "viewport" unutar <head> taga na svakoj HTML stranici koju pravimo.(Ovom prilikom nećemo objašnjavati njegovo značenje u HTML5 jeziku, ali ga treba prihvatiti kao standardnog prilkom prilagođavanja dizajna.)

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>




CSS funkcije

Iako CSS nije programski jezik, on ima listu svojih funkcija, kao što to imaju pravi programski jezici.
Mi smo u tekstovima iznad već imali primer jedne funkcije a to je url() funkcija.
To je bio atribut za sliku u pozadini background-image: url('slike/listici.jpg');


U ovom primeru imamo sledeće oznake:

  • background-image je CSS svojstvo
  • url je naziv funkcije
  • ('slike/listici.jpg') je argument funkcije


Uzmimo još jedan primer, istoj slici ćemo dodeliti funkciju brightness(). Ova funkcija može da zatamnjuje ili osvetljava slike. Njeni argumenti se izražavaju u procentima. Ako je procenat manji od 100% slika će biti zatamnjena, ako je 100% biće ista, a ako je više od 100% slika će biti svetlija.
Ako našoj slici dodelimo funkciju brightness():

<img src="slike/listici.jpg">

<style>
img {
filter: brightness(50%);
}
</style>
Slika zatamnjena za 50% će izgledati ovako:






CSS animacije

Korišćenjem CSS-a mogu se kreirati i jednostavne animacije.
To se postiže tako što se elementu menjaju zadani stilovi, oni prelaze od jednog stila do drugoga. Na kraju animacije uvek se vraćaju na početnu vrednost.
Da bi napravili animaciju moramo koristiti @keyframes Rule u kojem se pravi opis animacije koju želimo da napravimo. Takođe prilikom upotrebe @keyframes moramo mu dodati naziv animacije.

Na primer:

<!DOCTYPE html>
<html>
 <head>
  <title>CSS animacija</title>
  <style>
#kontent {
   width:90%;
   height:250px;
   border: 2px solid;
   background-color:yellow;
}
#kocka {
   background-color:lime;
   width:125px;
   animation-iteration-count: infinite;
   animation-name: strelica;
   animation-duration: 5s;
   position: relative;

}
p {
   font-size:100px;
   color:blue;

} @keyframes strelica {
   0% { left:0px;}
   50% { left:90%;}
   100% {left:0px;}
}
</style>
</head>
 <body>

 <div id="kontent">
 <div id="kocka">
   <p>⟺</p>
 </div>
 </div>
   
 
</body>
</html>
rezultat:

Kombinacijom pravih fotografija i HTML elemenata mogu se napraviti zanimljive CSS animacije, daleko bolje od ove u našem primeru, koju smo napravili zbog objašnjenja.




WEB DESIGN & PROGRAMMING
IT present

TUTORIJALI © elektronska knjiga