CCS - kratka obuka

8/18/2019 CCS - kratka obuka

1/6

25.12.2008 u izdvojeno | 4 komentara

Nauč ite CSS u par minuta…Autor/ica Webmaster Autor Kroativ mreže. Web dizajnom se bavi ve ć nekih desetak godina i trenutnoradi u Web Inkubator dizajn studiju. Kreativac u duši stalno željan novog znanja,a u slobodno vrijeme farba pixele i še ć e web stranice po Internetu.

Oglas

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 zacijelu obitelj

Što je to CSS?CSS zna č i Cascading Style SheetsCSS nije programski jezikCSS su samo instrukcije browseru kako da prikaže HTML elementeCSS vam može olakšati posao izrade web stranicaCSS podržavaju svi moderni browseri

Osnovna sintaksa CSS-a

CSS za po č etnike

Page 1 of 6 Nau č ite CSS u par minuta. | Kroativ

02.02.2016http://www.kroativ.net/izdvojeno/naucite-css-u-par-minuta/


2/6

Razmaci nisu bitni i možete pisati svoje CSS stilove na pregledniji na č in ali bitnoe 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

oznaka { svojstvo : vrijednost ; }

/* Što bi zna č ilo */ p { color : #000000 ; }

/* ili */ body { font-family : Tahoma ;}

/* ili */

h1 {color : red ;font-size : 24px ;

}

ga koriste, a i oni koji ga ne koriste, trebali bi. CSS-om vaš posao postaje pieceof cake kako bi ameri rekli. Imate jednu datoteku ( .css ekstenzije ) sa svimstilovima i jednostavno je uklju č ujete u sve svoje HTML stranice. Svi za jednog,edan za sve, to je CSS!

Mali savjet: Danas ve ć ina ljudi ima neki moderni browser ali zbog onog malogpostotka dobro je stilove okružiti tagom za komentar ( ) kako bi ihednostavno stariji browseri ignorirali:

CSS možete koristiti na tri na č ina.Eksterni i interni na č in uvijek stavljamo unutar HEAD tagova, a inlinestil gdje želimo

1.) Eksterni na č in: Sve stilove stavite u jednu datoteku i potom taj CSS fileuklju č 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 ipuno besplatnih CSS editora koji ć e vam olakšati posao.


3/6

Nego da mi pogledamo primjer eksternog CSS-a

link rel=”stylesheet” ozna č ava grupu ( pogledajte sve o linkovima na w3.org),type=”text/css” odre đ uje vrstu, media=”all” definira za koju vrstupreglednika želimo poslužiti ovaj stil ( pogledajte sve mogu ć nosti na w3.org ) inapokon href=”moj_stil.css” ozna č ava putanju do naše CSS datoteke.

moj_stil.css datoteka mogla bi izgledati ovako:

2.) Interni na č in Drugi na č in je Interni CSS. Jednostavno definiramo našestilove unutar svakog dokumenta posebno

/* Moj prvi CSS dokument */


4/6

možemo definirati KLASE ( .centar{text-align:center;} ) i možemo definiratiID-ove ( #naslov{font-size:20px;} )

CSS definicija za HTML tagove promijenit ć e izgled svakog definiranogtag-a

Primjer:

Definirali smo cijelom dokumentu BODY marginu od 20px i definirali smo bijeluboju 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 jervam stil ne ć e raditi u Firefoxu.

body { margin : 20px ;}p { color : #FFFFFF ;}

Primjer:

Definirali smo klasu .desno koja tekst poravnava u desnu stranu i klasu .crnokoja definira crnu boju teksta. Kao što smo ve ć napomenuli klase možemokoristiti koliko god puta želimo. Klasa p.veliko ozna č ava da ć e se stil primijenitisamo na P (paragraf) element klase veliko .

.desno { text-align : right ;}

.crno { color : #000000 ;}p .veliko { font-size : 24px ;}

Pogledajmo upotrebu:

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 istudefiniciju 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ždasadrž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 č iedan 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.

Ovaj ć e tekst biti pomaknut u desnu stranu

Ovaj ć e tekst biti pomaknut u desnu stranu i biti ć e crne boje

Ovaj ć e tekst biti 24px

Primjer:




5/6

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 idefinira border širine 1 pixel, crne boje okolo cijelog elementa.

#naslov { background-color : #FF0000 ;}p #napomena {

color : red ;font-weight : bold ;

}.crta { border : 1px solid #000000 ;}

Pogledajmo upotrebu:

Zna č i dodatkom id=”” dodajemo ID nekom elementu, u našem slušaju dodalismo paragrafu. Elementu možemo dodati ID, klasu i inline CSS zajedno.

Ovo je naš naslov crvene pozadinske boje

Ovo je naša crvena napomena

U jednom HTML dokumentu možete koristiti sva tri na č ina upotrebe CSS-a, zna č imožete imati definirani neki op ć i eksterni CSS, možete definirati i zasebneinterne 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šastranica ć e jednostavno preuzeti oba svojstva i primijeniti ih na element.

Isti CSS stil možete primijeniti i na više elemenata odjednom

ednostavnom grupacijom.Primjer:

Na ovaj na č in smo svim navedenim heading elementima primijenili crvenu boju ivrstu fonta (ako korisnik ima instaliran font Tahoma, primijeni njega, ako nemapotraži Genevu ili bilo koji iz sans-serif skupine). Sli č no smo u č inili i sagrupiranim klasama. Zna č i oznake (grupirane elemente) razdvajatezarezom.

Za kompletne CSS specifikacije (a) (cheatsheets) skoknite do ovih stranica (b) ,a naša preporuka za download CSS cheatsheets-a je addedbytes.com . Ps: ovdjemož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 oCSS-u pišu cijele knjige i svakako ne bi mogli sve objasniti na jednoj stranici.

h1 , h2 , h3 , h4 , h5 , h6 {color : red ;font-family : Tahoma , Geneva , sans-serif ;

}.crveno , .crno , .zeleno {

font-weight : bold ;}




6/6

Svrha ovog tutoriala bila je da vas uputimo u svijet CSS-a, damo vam dobretemelje za daljnje u č enje. Na ovim stranicama možete prona ć i mnoštvobesplatnih knjiga o CSS-u ili ako želite, skoknite na www.w3schools.com i u č iteon-line. HTML dog ima odli č ne tutoriale za po č etnike i one napredne , a ne ć etepožaliti ako pogledate i Cascading Style Sheets home page

Kada jednom napravite svoj CSS možete ga provjeriti na W3C CSS validatoru ilioptimizirati na Online CSS Optimiser . Ako vas zbunjuju EM mjerne jedinicepomognite si sa EM kalkulatorom …

Hvala što ste bili sa nama, još jednom u ime cijele Kroativ ekipe Sretan Boži ć iNova 2009. godina.

Komentari su tu, ostalo znate i sami…

Ozna č eno s: css , kroativ , tutorial , web dizajn

Za ovaj č lanak možete glasati na CroPortalu i tako pomo ć i u njegovoj promociji.Ako č lanak još nije objavljen vi možete biti prvi!Stavovi i mišljenja izre č ena u ovome č lanku i/ili komentarima odnose se samona autora/icu č lanka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno jeneovlašteno prenošenje č lanaka u cjelosti bez prethodnog dogovora ili bezistaknutog povratnog linka na www.kroativ.net stranicu te imena autora.Oglas


Documents

CCS - kratka obuka