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










Š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.

< >  

WEB DESIGN & PROGRAMMING
IT present

TUTORIJALI © elektronska knjiga