PRE nego što POČNETE
pre nego što počnete da radite sa CSSom, morate da dobro ovladate host jezikom (domaćinom) na koji će se CSS pravila i stilovi primenjivati. kako je ovo u 99% slučajeva (x)HTML, predlažem da krenete od
xHTML dokumentacije.
da bi se vaš CSS pravilno primenio na vaš html, prvo sam html mora biti pravilno struktuiran, ugnježden i ostalo. takođe, korisno je (ne zbog CSSa već zbog drugih stvari) da naučite kada valja koji xHTML tag koristiti..
DOKumentacija, SPECifikacija..
sajt od koga sve počinje
http://www.w3.org/Style/ i konkretnije za css
http://www.w3.org/Style/CSS/. odgovori na bar 80% problema i vaših pitanja se mogu naći u CSS specifikaciji. ne morate je znati celu napamet, ali bar prođite i upoznajte se sa osnovnim principima kojima se vodi CSS.
minimum preporučenih poglavlja (verzija 2.1 CSS specifikacije): 2, 4, 5, 6, 8 i 9, zatim (ne manje važno, ali) 14, 15 i 16.. (a kad to proučite, možete i celu specifikaciju ;).
ovaj sajt osim specifikacija, sadrži još i dosta textova, objašnjenja, kao i linkova ka mnogim alatima za rad sa CSSom..
skupio sam LINKove razbacane po OVOM forumu..
http://www.alistapart.com/topics/css/
ala je majka, tačka. ;)
osim ovog dela oko css, pošto je ovo i WebStandards forum, pogledajte i ostale članke na
www.alistapart.com (XHTML, accessibility, usability). iza ovog sajta stoji ekipa oko zeldmana, pa ako pratite blogove možete i njegov na
www.zeldman.com.
http://www.glish.com/css/home.asp
vrlo koristan sajt o CSSu. pored tehnika i tutorijala, ima dosta primera dizajna u 2, 3 i 4 kolona (vrlo često pitanje ljudi koji se odvikavaju od dizajniranja uz pomoć tabela ;)
http://tantek.com/CSS/Examples/boxmodelhack.html
IE box model hack. IE tumači zadane margine, dimenzije (širina, visina) i padding drugačije od ostalih browsera (i od standarda, tj pogrešno). na ovom linku možete naći objašnjenje tog problema, i način kako da ga zaobiđete..
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
još malo o kutijama u CSSu..
http://www.codeproject.com/html/cssbeginner.asp?target=css
css for beginners sa codepoint-a. nije nešto naročito, ali možda nekome koristi..
http://www.westciv.com/style_m...cademy/css_tutorial/index.html
veoma obiman i detaljan tutorijal, sa malo prenatrpanom navigacijom. nisam ga detaljno proučio, ali koleginica Conica se kune u njega.. ;)
http://www.w3schools.com/css/default.asp
css tutorijal na simpatičnom w3schools sajtu (samo ponekad porvršnom ili orijentisanom ka IE browseru).. nisam proučio.
http://hotwired.lycos.com/webm...heets/tutorials/tutorial1.html
css u 5 lekcija od web majmuna ;)
kako da promenim BOJE LINKova? :active i :hover mi NE RADE!!
ovo je vrlo čest problem, jer je lako napraviti grešku ako se ne razume tematika. baš kao što je objašnjeno u
specifikaciji, svi CSS selektori imaju "meru određenost" (slobodan prevod) koja određuje prioritet po kome se CSS pravila primenjuju. zato je ponekad bitan redosled po kome navodite css pravila. više informacija na:
http://www.meyerweb.com/eric/css/link-specificity.html
http://archivist.incutio.com/viewlist/css-discuss/16337
koji PROGRAMI za rad sa CSSom?
od wysiwyg programa za web dizajn, najpopularniji (možda i najbolji) Macromedia Dreamweaver ima relativno solidnu podršku za CSS. naročito su primetna poboljšanja bila u verziji MX, a verovatno i u najnovijoj MX 2004 (nisam još probao)..
postoji i bar jedan dobar specijalizovan program za rad sa CSSom, a to je Bradbury-jev
topSTYLE. fino programče, napisano u delphiju, neki se kunu u njega, a nekima baš i ne odgovara (meni recimo, mada nemam ništa konkretno da mu prigovorim).
koji BROWSER za rad sa CSSom?
moja preporuka je
mozilla firefox. čuo sam da su opera 7 i safari dosta napredovali u podršci za CSS u odnosu na svoje prethodnike (operu 6 i konqueror), ali su gecko-based browseri (mozilla & co) i dalje prvi u podršci za CSS. uz to, na mozilu najčešće gleda kao na referentni browser što se tiče web standarda..
još jedan razlog je i to što za mozilu postoji dosta extenzija (i bookmarkleta) koji pomažu u razvoju sajtova. pretražite i isprobajte malo:
texturizer.net extensions: EditCSS, PNH Developers' Toolbar, Reload Every (dok dizajnirate), Venkman (ako često kombinujete CSS sa JSom), Web Developer, LIveHTTPHeaders (nema veze sa CSSom, ali ako ste već web developer), IE View, itd..
i još malo na
mozdev extension room..
BOOKmarkLETs? šta i kako?!?
za uvod u to šta su bookmarkleti pogledajte
ovaj članak na sitepoint-u. zatim lepo pročešljajte sajtove kao što su
www.bookmarklets.com,
www.favelets.com kao i
http://www.squarefree.com/bookmarklets/.
ako dobar deo vašeg dana provodite u browseru, oduševićete se.. ako se bavite web razvojem, naročito obratite pažnju na
web development bookmarklets (npr test styles, edit styles i ancestors).. kao i na
mouseover DOM inspector i
topographic page layout.
layout sa TRI KOLONE
vrlo česta dizajn tehnika, koji se obilato radila uz pomoć tabela, a ni sa CSSom nije ništa teže:
http://www.positioniseverything.net/guests/3colcomplex.html
http://www.positioniseverything.net/piefecta-rigid.html
http://glish.com/css/2.asp
http://glish.com/css/3.asp
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.webproducer.at/flexible-layout/
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml
// to be continued..
[Ovu poruku je menjao Aleksandar Vasic dana 17.01.2009. u 00:34 GMT+1]
[Ovu poruku je menjao Aleksandar Vasic dana 17.01.2009. u 00:50 GMT+1]