Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Naučite CSS u par minuta…
CSS za početnike
Nakon nekog vremena i par primjedbi da smo našim Web 2.0 te Magazin style tutorialima zanemarili web novake, tu je CSS tutor za početnike, prikladno za cijelu obitelj 🙂
Što je to CSS?
CSS znači Cascading Style Sheets
CSS nije programski jezik
CSS su samo instrukcije browseru kako da prikaže HTML elemente
CSS vam može olakšati posao izrade web stranica
CSS podržavaju svi moderni browseri
Osnovna sintaksa CSS-a
oznaka { svojstvo: vrijednost; } /* Što bi značilo */ p { color: #000000; } /* ili */ body { font-family: Tahoma;} /* ili */ h1 { color: red; font-size: 24px; } |
Razmaci nisu bitni i možete pisati svoje CSS stilove na pregledniji način ali bitno je da zapamtite ovaj redosljed: oznaka {svojstvo: vrijednost; svojstvo: vrijednost;}. Znači stilove za oznaku stavljamo između {} (vitičaste zagrade), svojstvo i vrijednost razdvajamo sa : (dvotočka) i svojstva razdvajamo sa ; (točka-zarez). Komentare unutar CSS-a pišete između /* komentar */
U današnje vrijeme stvarno je nezamislivo raditi stranice bez CSS-a. Svi ga koriste, a i oni koji ga ne koriste, trebali bi. CSS-om vaš posao postaje piece of cake kako bi ameri rekli. Imate jednu datoteku (.css ekstenzije) sa svim stilovima i jednostavno je uključujete u sve svoje HTML stranice. Svi za jednog, jedan za sve, to je CSS!
Mali savjet: Danas većina ljudi ima neki moderni browser ali zbog onog malog postotka dobro je stilove okružiti tagom za komentar (<!– –>) kako bi ih jednostavno stariji browseri ignorirali:
<style type="text/css"> <!-- h1 { color: red; font-size: 24px; } --> </style> |
CSS možete koristiti na tri načina.
Eksterni i interni način uvijek stavljamo unutar HEAD tagova, a inline stil gdje želimo
1.) Eksterni način: Sve stilove stavite u jednu datoteku i potom taj CSS file uključujete u sve svoje dokumente. Datoteku možete napraviti i u običnom tekstualnom editoru (Notepad?), spremite ju i preimenujte u npr. moj_stil.css. Ekstenzija .css označava da je to CSS datoteka. U današnje vrijeme imate i puno besplatnih CSS editora koji će vam olakšati posao.
Nego da mi pogledamo primjer eksternog CSS-a
<head> <link rel="stylesheet" type="text/css" media="all" href="moj_stil.css" /> </head> |
link rel=”stylesheet” označava grupu (pogledajte sve o linkovima na w3.org), type=”text/css” određuje vrstu, media=”all” definira za koju vrstu preglednika želimo poslužiti ovaj stil (pogledajte sve mogućnosti na w3.org) i napokon href=”moj_stil.css” označava putanju do naše CSS datoteke.
moj_stil.css datoteka mogla bi izgledati ovako:
/* Moj prvi CSS dokument */ <!-- body { background-color: #CCCCCC; color: #000000; margin: 20px; padding: 0; /* ako je vrijednost 0 nije potrebno stavljati oznaku mjerne jedinice */ } --> |
2.) Interni način Drugi način je Interni CSS. Jednostavno definiramo naše stilove unutar svakog dokumenta posebno
To ćemo učiniti na sljedeći način:
<head> <style type="text/css"> body {background-image: url(slike/moja_pozadina.jpg);} </style> </head> |
Znači u internom načinu definicije stilova stavljamo između <style type="text/css"></style> , a kao što smo već naveli cijeli CSS stavljamo unutar HEAD tag-a.
3.) Inline način Treći i posljednji način je inline. CSS stil dodajemo direktno na željeni element. Ako CSS stilove imamo definirane na više načina uvijek će se koristiti inline kao zadnji.
Pogledajmo primjer:
<p style="color:red;">Ovo je paragraf crvene boje</p> |
Znači željenom html elementu dodajemo nastavak style=”” sa definicijm stila.
CSS oznake i primjena
CSS možemo definirati za HTML tagove (P{}, H1{}, EM{}, BODY{}…), možemo definirati KLASE (.centar{text-align:center;}) i možemo definirati ID-ove (#naslov{font-size:20px;})
CSS definicija za HTML tagove promijenit će izgled svakog definiranog tag-a
Primjer:
body {margin:20px;} p {color:#FFFFFF;} |
Definirali smo cijelom dokumentu BODY marginu od 20px i definirali smo bijelu boju teksta svakom P tagu, odnosno paragrafu.
CSS klase za razliku od ID-ova možemo upotrebljavati koliko god puta želimo. Klase definiramo dodajući . ispred imena, u imenima klasa nemojte koristiti naša slova te njihove nazive nemojte započinjati brojem jer vam stil neće raditi u Firefoxu.
Primjer:
.desno {text-align:right;} .crno {color:#000000;} p.veliko {font-size:24px;} |
Definirali smo klasu .desno koja tekst poravnava u desnu stranu i klasu .crno koja definira crnu boju teksta. Kao što smo već napomenuli klase možemo koristiti koliko god puta želimo. Klasa p.veliko označava da će se stil primijeniti samo na P (paragraf) element klase veliko.
Pogledajmo upotrebu:
<p class="desno">Ovaj će tekst biti pomaknut u desnu stranu</p> <p class="desno crno">Ovaj će tekst biti pomaknut u desnu stranu i biti će crne boje</p> <p class="veliko">Ovaj će tekst biti 24px</p> |
Znači klasu primjenjujemo dodajući class=”ime_klase” i možemo više klasa odjednom primijeniti istom elementu rastavljajući ih razmakom. Ako imamo istu definiciju u obje klase (npr. boja teksta), uvijek će biti primijenjena ona zadnja. Tako je i sa svim CSS-om, ako imamo više eksternih stilova koji možda sadržavaju iste definicije različitih vrijednosti, uvijek se primijenjuje ona zadnja, a ostala se svojstva kombiniraju u jedan stil.
CSS ID-ovi za razliku od klasa mogu biti korišteni samo jedanput, znači jedan ID za jedan element. ID-eve definiramo dodavajući # ispred imena ID-a te opet vrijede pravila, nema naših znakova i nemojte počinjati ime sa brojem.
Primjer:
#naslov {background-color: #FF0000;} p#napomena { color: red; font-weight: bold; } .crta {border:1px solid #000000;} |
Definirali smo ID imena naslov i postavili mu tamno crvenu pozadinsku boju. Također smo napravili i ID napomena koji će samo biti primijenjen na P (paragraf) element ID-a naslov. Klasa .crta je ovdje samo za demonstraciju i definira border širine 1 pixel, crne boje okolo cijelog elementa.
Pogledajmo upotrebu:
<p id="naslov">Ovo je naš naslov crvene pozadinske boje</p> <p id="napomena" class="crta">Ovo je naša crvena napomena</p> |
Znači dodatkom id=”” dodajemo ID nekom elementu, u našem slušaju dodali smo paragrafu. Elementu možemo dodati ID, klasu i inline CSS zajedno.
U jednom HTML dokumentu možete koristiti sva tri načina upotrebe CSS-a, znači možete imati definirani neki opći eksterni CSS, možete definirati i zasebne interne stilove unutar HEAD-a tog dokumenta i možete koristiti inline CSS. Ako za isti element definirate različite stilove unutar eksternog i internog CSS, vaša stranica će jednostavno preuzeti oba svojstva i primijeniti ih na element.
Isti CSS stil možete primijeniti i na više elemenata odjednom jednostavnom grupacijom.
Primjer:
h1, h2, h3, h4, h5, h6 { color: red; font-family: Tahoma, Geneva, sans-serif; } .crveno, .crno, .zeleno { font-weight: bold; } |
Na ovaj način smo svim navedenim heading elementima primijenili crvenu boju i vrstu fonta (ako korisnik ima instaliran font Tahoma, primijeni njega, ako nema potraži Genevu ili bilo koji iz sans-serif skupine). Slično smo učinili i sa grupiranim klasama. Znači oznake (grupirane elemente) razdvajate zarezom.
Za kompletne CSS specifikacije (a) (cheatsheets) skoknite do ovih stranica (b), a naša preporuka za download CSS cheatsheets-a je addedbytes.com. Ps: ovdje možete skinuti i cheatsheets za mnoge druge stvari (JavaScript, PHP, MySQL, HTML…)
Ovim malim tutorialom završili smo Uvod u CSS za totalne početnike. Ljudi o CSS-u pišu cijele knjige i svakako ne bi mogli sve objasniti na jednoj stranici. Svrha ovog tutoriala bila je da vas uputimo u svijet CSS-a, damo vam dobre temelje za daljnje učenje. Na ovim stranicama možete pronaći mnoštvo besplatnih knjiga o CSS-u ili ako želite, skoknite na www.w3schools.com i učite on-line. HTML dog ima odlične tutoriale za početnike i one napredne, a nećete požaliti ako pogledate i Cascading Style Sheets home page
Kada jednom napravite svoj CSS možete ga provjeriti na W3C CSS validatoru ili optimizirati na Online CSS Optimiser. Ako vas zbunjuju EM mjerne jedinice pomognite si sa EM kalkulatorom…
Hvala što ste bili sa nama, još jednom u ime cijele Kroativ ekipe Sretan Božić i Nova 2009. godina.
Komentari su tu, ostalo znate i sami…
Slični sadržaj:
- Kako napraviti magazin style dizajn? (Jako slično)
- Kako napraviti moderni Web 2.0 dizajn? (Jako slično)
- Kako napraviti dizajn ovisan o vremenu? (Jako slično)
- Top postovi na kroativu (Jako slično)
- Veliko otvaranje Kroativ.net dizajn bloga (Slično)
4 komentara
Trackbacks & Pingbacks
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.
ovo mi je puno pomoglo svaka čast!
thx
Hvala na tutorialu, dosta je pomogao.
Samo mi jos nesto nije jasno:
Ako nam se recimo header sastoji od samo jednog layera grid_12 u kojem bi se trebao naci ponavljajuci background uzorak, logo i jos neka slika. Mene zanima kako se pozicioniraju te slike unutar headera, tj. kako orediti gdje tocno ce stojati, njihove “koordinate”?
Evo uzmimo za primjer stranicu iz tutorijala “kako dizajnirati web stranicu u photoshopu”, kako bi trebao kodirati taj header?
Hvala puno unaprijed!
uzorak staviš u background da se ponavlja po x i y osi
.header
{background: url(file/image.jpg);
}
slici i logu u html-u daš klasu recimo “imageclass” i “logo” a ostalo riješiš sa float, marginama ili paddingom
.imageclass
{float:right;
margin-top: 10px;
margin-right:10px;
}
.logo
{float:left;
margin-top:10px;
}
Veoma koncizan stil objasnjavanja na blogu.Autor je vrlo talentovan metodicar-predavac sto je vrlo retka pojava medju predavacima generalno , a pogotovo o temama vezanim za kompjutere i IT. Ova tema me od nedavno interesuje i pretrazio sam prilican broj tutorijala na internetu i vecini autora nedostaju bas ove navedene osobine.Ocigledno je da imaju znanje ali nemaju talenat da ga prenesu.
Pratim Vas blog.
Puno pozdrava i zelim Vam srece u daljem radu