Dobrodošli, Gost. Molim vas prijavite se ili se registrujte.

Detaljni CSS vodič za početnike

Autor: M@jk! |

Odgovori (morate se registrovati)

1. Uvod
2. Što je sve potrebno za izradu WAP stranica?
3. Vaša prva WML stranica
4. Kreiranje linkova
5. Ubacivanje slika
6. Objavljivanje na serveru
7. WAP emulatori i prijava stranica na pretraživa?e
8. Linkovi na besplatne hostove, online vodi?e i sajtove o mobilnim komunikacijama

Pretpostavljamo da ve? znate što je to CSS i koje su prednosti korištenja - vaš sljede?i logi?ni korak je nau?iti kako koristiti to ?udo o kojem svi pri?aju.

Podsjetimo se: CSS nije ništa drugo nego skup pravila - stilova koja govore browseru kako prikazati odre?eni HTML tag. Idemo prvo pogledati kako izgleda to pravilo.
Osnovna CSS sintaksa: selektor {stil: vrijednost }

Svako CSS pravilo napisat ?ete u sljede?em obliku (kôd se radi preglednosti obi?no piše u nekoliko linija):

Kod: Select All | Copy To Clipboard

selektor {
ime-stila1: vrijednost1;
ime-stila2: vrijednost1 vrijednost2
}

Selektor definira kojem HTML tagu želite dodati CSS stil i u viti?astoj zagradi odre?ujete kako ?e taj stil izgledati. Stil odre?ujete tako da nazna?ite ime stila i dodijelite mu vrijednost (pogledajte sintaksu: stil i njegovu vrijednost odvajate dvoto?kom).

Ako definirate više stilova, odvajate ih to?ka-zarezom. To?ka-zarez ne piše se iza posljednjeg navedenog stila.

Jednom stilu možete dodijeliti više vrijednosti i tada ih samo navodite bez interpunkcija.

Primjer:

Kod: Select All | Copy To Clipboard

TABLE {
background-color: white;
border: 2px solid gray
}

Ovime smo kao selektor odabrali tag TABLE i odredili da ?e svaka tablica u našem dokumentu imati bijelu pozadinu i rub širine 2 piksela iscrtan punom crtom sive boje.

Primijetite da su stilu border dodane tri vrijednosti koje smo odredili bez upotrebe interpunkcija.

Ova osnovna sintaksa je vrlo jednostavna - zapamtite gdje idu zagrade, dvoto?ke i to?ke-zarezi i ne možete pogriješiti. S vremenom ?ete nau?iti i koje izraze koristiti kao ime-stila i vrijednost - postoji samo nekoliko desetaka mogu?nosti koje se mogu pojaviti na tim mjestima.

Odgovori

Strana: [1]

Odg: Detaljni CSS vodič za početnike

Komentar 1 |

od strane M@jk! | Datum: Август 09, 2007, 03:31:53

2. Gdje pohraniti CSS specifikaciju?

Postoje 3 na?ina da pohranite CSS pravila:

1. izvan HTML dokumenta (external style sheets)

Ljepota i snaga CSS-a leži upravo u mogu?nosti da se svi stilovi koje ?ete koristiti na cijelom siteu pohrane izvan HTML dokumenta. To nam omogu?uje da promjenom stila na jednom jedinom mjestu promijenimo prikaz po cijelom siteu!

Ovom metodom sve stilove spremamo u zaseban CSS dokument - obi?an file s .css ekstenzijom kojeg možete napisati u Notepadu i snimiti npr. u root direktorij u kojem se nalazi i vaš homepage. U njemu ?ete definirati sva CSS pravila koja vam trebaju na siteu i nazvati file npr. mojsite.css.

Eksterni .css file treba povezati s HTML dokumentom. To se radi uglavnom pomo?u <LINK> taga u <HEAD> sekciji:

Kod: Select All | Copy To Clipboard

<HEAD>
<TITLE> Naslov stranice </TITLE>

<LINK rel="stylesheet" type="text/css"
href="http://www.webmajstori.net/stil.css">

</HEAD>

Postoji još jedna mogu?nost pozivanja eksternih CSS dokumenata: pomo?u @import funkcije koja se ume?e sli?no kao i <LINK> tag. Me?utim, tu funkciju slabo podržava Netscape i posljedice njenog korištenja su razli?ite od korištenja <LINK> metode. Preporu?ujemo vam da zasad kao po?etnici zaboravite @import funkciju. Više o toj metodi možete saznati na službenoj W3C stranici sa CSS specifikacijom.

Jednom kad povežete HTML dokument s .css fileom, stilovi definirani u njemu primjenjuju se na tagove pomo?u class atributa - o tome ?emo nešto kasnije.
2. unutar <HEAD> taga HTML dokumenta (embedded, document-level style sheets)

CSS definiramo unutar specijalnog <STYLE> taga:

Kod: Select All | Copy To Clipboard

<HEAD>
<TITLE> Naslov stranice </TITLE>

<STYLE type="text/css">
P { font-size: large; color: red }
</STYLE>

</HEAD>

Primijetite da unutar <STYLE> taga obavezno morate definirati tip stila: ovdje je to type="text/css".

Ova metoda definiranja CSS stilova dobra je ako razli?itim HTML stranicama želite dodati razli?ite stilove.
3. unutar samog HTML taga (inline styles)

Stilove možemo umetati u gotovo svaki HTML tag pomo?u atributa style i direktnog specificiranja stila na sljede?i na?in:

Kod: Select All | Copy To Clipboard

<P style="font-size: large; color: red">
Neki tekst paragrafa prikazan
velikim slovima i crvenom bojom
</P>

Pažnja! Nemojte pomiješati <STYLE> tag koji smo koristili u metodi pod 2) i style atribut koji koristimo ovdje. Radi se o dvije razli?ite stvari (jedno je tag, a drugo atribut).

Ova metoda je vrlo jednostavna, ali nije uvijek pogodna. Budu?i da ovako zadajete stil za svaki HTML tag posebno, cijeli dokument može postati vrlo kompliciran za održavanje. Ovakvim zadavanjem stilova gubite ve?inu prednosti zbog kojih se CSS koristi.

Inline stilovi mogu biti korisni ako vam odre?eni stil treba samo na jednom jedinom mjestu i nigdje više - tada bi bilo glupo taj stil definirati globalno i nepotrebno pove?avati veli?inu CSS dokumenta.

Inline stilovi imaju najviši prioritet od svih metoda za umetanje CSS stilova - specifikacija u inline stilu ?e pregaziti sve ostale CSS specifikacije. Upravo u tu svrhu se inline stilovi naj?eš?e i koriste.

Odg: Detaljni CSS vodič za početnike

Komentar 2 |

od strane M@jk! | Datum: Август 09, 2007, 03:39:57

3. Selektori i njihovi trikovi

Selektore ste susreli u prvom koraku ovog vodi?a kad ste nau?ili kako korektno napisati CSS pravilo. Tada smo rekli da selektor nije ništa drugo nego odre?eni HTML tag kojeg navodite ispred viti?astih zagrada.

Proširimo sad osnovnu sintaksu CSS-a!
Nizanje selektora

Jedan te isti stil možemo primijeniti na nekoliko selektora (HTML tagova) odjednom:

H1, H2, H3 {
color: blue; text-align: center
}

Svi naslovi sadržani u heading tagovima H1, H2 i H3 bit ?e plavi i centrirani. Svaki put kad isti skup stilova želite primijeniti na nekoliko razli?itih tagova, koristite nizanje selektora. Primijetite samo da kod nizanja selektore morate odvojiti zarezom.
Kontekstualni selektori

CSS vam omogu?uje da odre?ene stilove primijenite samo kad se neki HTML tag nalazi u odre?enom kontekstu, tj. u odre?enoj okolini. Zamislite da želite sadržaj u italic tagu <I> obojan zelenom bojom, ali samo u naslovima. Tada biste napisali sljede?i stil:

H1 I { color: green }

Svaki put kad browser naleti na italic tekst unutar H1 naslova, on ?e taj tekst prikazati zelenom bojom. Italic tekst u ostatku sadržaja ne?e biti zelen. Na ovaj na?in možete uvjetovati prikazivanje stilova. Zapamtite samo da u ovom slu?aju ne smijete koristiti zareze jer ?e to browser protuma?iti kao nizanje.

Kontekstualne selektore možete kombinirati s nizanjem:

H1 I, H2 I, H3 I {
color: green; font-weight: bold
}

Svaki italic tekst unutar H1, H2 i H3 naslova bit ?e zelen i podebljan.

Odg: Detaljni CSS vodič za početnike

Komentar 3 |

od strane M@jk! | Datum: Август 09, 2007, 03:41:15

4: CSS klase: najbolji na?in za definiranje stilova

Dosad smo CSS pravila pisali tako da smo selektirali neki HTML tag i odredili koje stilove ?e on poprimiti. Na taj na?in smo odre?eni skup stilova uvijek ograni?avali na odre?ene tagove. Me?utim, CSS stilove možemo koristiti i univerzalno i tada koristimo klase.

Klasa je skup CSS pravila koji se definira imenom klase. Da biste napisali CSS pravilo pomo?u klasa, kao selektor ?ete navesti ime klase koje sami zadajete i u viti?astim zagradama definirati stilove koje ?e ta klasa imati. Da biste vidjeli efekte koje ste u klasi definirali, ime klase trebate pozvati u HTML dokumentu pomo?u class atributa.
Generi?ke klase

Generi?ka klasa nije vezana za pojedini HTML tag i može se upotrebljavati na neograni?enom broju lokacija unutar HTML dokumenta. Definiramo je proizvoljnim imenom kojemu prethodi to?ka:

.zeleno { color: green }

Generi?ku klasu pozivate pomo?u class atributa:

Kod: Select All | Copy To Clipboard

<A href="nekilink.htm" class="zeleno">
Ovo je primjer linka </A>

Napomena: ime klase možete pozvati i bez stavljanja u navodnike, me?utim pravila dobrog pisanja HTML-a nalažu da se vrijednosti svih atributa pišu u navodnicima.
Klase specifi?ne za pojedine HTML tagove

Odre?enu klasu možete vezati uz pojedini HTML tag. U tom slu?aju ispred to?ke navodite tag na koji ?e se klasa primjenjivati:

P.zeleno { color: green }

Ovime ste definirali klasu zeleno i dodijelili klasu HTML tagu <P>. Svaki put kad želite neki paragraf obojati zeleno, trebat ?ete unutar HTML dokumenta pozvati klasu na sljede?i na?in:

Kod: Select All | Copy To Clipboard

<P class="zeleno">
Zeleni tekst paragrafa <P>

Pseudo-klase

Pseudo-klase vam omogu?uju da definirate izgled pojedinih HTML tagova u odre?enim stanjima. u CSS1 specifikaciji postoji samo 5 pseudo-klasa od kojih su najpoznatije one koje odre?uju izgled linkova, tj. izgled <A> taga.

Pseudo-klase se (umjesto to?kom) od HTML taga odvajaju dvoto?kom.

Pseudo-klase su zasad definirane samo za <A> i <P> tagove:

A:link - odre?uje izgled HREF neposje?enog linka
A:active - odre?uje izgled HREF aktivnog linka
A:visited - odre?uje izgled HREF linka kojeg smo ve? posjetili

P:first-line - kontrolira izgled prve linije paragrafa
P:first-letter - kontrolira izgled prvog slova paragrafa

Najkorištenije pseudo-klase su one za <A> tag. Tako možemo odrediti da link ne bude podcrtan i da bude crven:

A:link {
text-decoration: none; color: red
}

Korištenje ID oznaka kao klasa

Kao klasu možete koristiti ID oznake, me?utim postoji jedna velika razlika. Dok istu klasu možete koristiti na više mjesta i za više HTML tagova, ID oznake ne možete višestruko koristiti. One se koriste da bi se odre?enom elementu dodijelio specifi?an stil koji ne?e imati nijedan drugi element u HTML dokumentu.

Sintaksa je jednostavna. Na istom mjestu gdje biste ina?e definirali klasu, definirajte ID oznaku:

#crno { color: black }

ID oznaku pozivate pomo?u ID atributa unutar raznih HTML tagova:

<H3 id="crno">
Ovo je naslov crne boje. </H1>

Neki browseri ?e vam možda dozvoliti da ID oznaku koristite na više mjesta, ali to definitivno nije željeno ponašanje i bolje je da koristite klase.

Napomenimo tako?er da ne možete biti sigurni da ?e vam Internet Explorer uvijek dobro prikazati stilove odre?ene pomo?u ID oznaka jer je prikaz ID oznaka u IE bugovit.

Odg: Detaljni CSS vodič za početnike

Komentar 4 |

od strane M@jk! | Datum: Август 09, 2007, 03:42:24

5: Korištenje <DIV> i <SPAN> tagova za umetanje CSS stilova

Ova dva HTML taga jesu odli?an na?in da bilo kojem HTML elementu ili dijelu HTML koda dodate CSS stil. Do sad ste stilove primjenjivali na odre?enim HTML tagovima, no stil možemo primijeniti i na jedno jedino slovo teksta.

<DIV> i <SPAN> koriste se da bismo odre?ene HTML elemente grupirali zajedno i primijenili CSS stilove na njih. Razlika izme?u ova dva taga je u tome što se <SPAN> koristi unutar teksta za primjenu stila na odre?ena slova, dok <DIV> ozna?ava po?etak i kraj odre?ene sekcije (division) dokumenta i uvijek ume?e prekid unutar teksta, postavljaju?i sadržaj u novi red.

Da bismo primijenili stilove na HTML elemente grupirane u <DIV> i <SPAN> tagove, koristimo class atribut unutar tih tagova:

Kod: Select All | Copy To Clipboard

<P>
SPAN tag možemo primijeniti
<span class="zeleno"> unutar teksta </span>
bez umetanja prekida.
</P>

To izgleda u browseru ovako:

SPAN tag možemo primijeniti unutar teksta bez umetanja prekida.

Pokušajte u istom ovom primjeru <SPAN> tag zamijeniti s <DIV> tagom i pratite što ?e se dogoditi. Generalno, text ?e u browseru biti prikazan s prekidom linije tamo gdje je umetnut <DIV> tag:

DIV tag
odvaja tekst
od okolnog sadržaja

Odg: Detaljni CSS vodič za početnike

Komentar 5 |

od strane M@jk! | Datum: Август 09, 2007, 03:43:04

6: Pomo?u kojih vrijednosti možemo zadavati CSS stilove?

Stilovima dodjeljujemo vrijednost i za to imamo na raspolaganju 4 na?ina: numeri?ke vrijednosti, boju, URL i rezervirana imena.
Numeri?ke vrijednosti

Numeri?ke vrijednosti zadajemo pomo?u brojeva koje kombiniramo s razli?itim mjernim jedinicama:

pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in)
millimeters (mm) - centimeters (cm) - percentage (%)

Primjer:

TABLE { border: 2px }

Boja

Boju zadajemo pomo?u RGB vrijednosti (npr. #000000) ili navo?enjem imena boje. Imena poput blue ili green dodijeljena su samo osnovnom setu od 16 boja.

Primjer:

TABLE {
background-color: white
}

daje tablici bijelu pozadinu isto kao i

TABLE {
background-color: #FFFFFF
}

URL

URL se zadaje druk?ije nego u HTML standardu.

Primjer:

.pozadina {
background-image: url(poz.gif)
}

URL se poziva navo?enjem rezervirane rije?i url i definiranjem putanje u okrugloj zagradi. Ne smijete ostaviti razmak izme?u rije?i url i otvorene zagrade.

Putanja koji se definira u zagradi može biti apsolutna (u tom slu?aju navodi se puna putanja zajedno s http://) ili relativna (s obzirom na URL definiranog CSS-a).

Kad zadajemo putanju relativno, relativnost se odnosi na lokaciju datoteke u kojoj je definiran CSS stil. Ako stilove pohranite u vanjsku .css datoteku, putanja ?e biti relativna u odnosu na tu .css datoteku. Ako pak koristite embedded ili inline CSS stil, putanja je relativna u odnosu na HTML dokument u kojem je definiran CSS stil.
Rezervirana imena

?esto se vrijednosti stilova zadaju imenima koja su predefinirana u CSS standardu. Neka od tih imena su imena boja koja smo ve? spomenuli.

Rezervirana imena koja ?ete ?esto koristiti su npr. imena za veli?inu teksta (large, medium, small), imena raznih efekata (dotted, underline, bold) itd.

Odg: Detaljni CSS vodič za početnike

Komentar 6 |

od strane M@jk! | Datum: Август 09, 2007, 03:43:40

7. Koje sve stilove imamo na raspolaganju?

Postoji nekoliko desetaka razli?itih stilova koji kontroliraju prikaz vašeg HTML dokumenta. Sve stilove grupiramo prema tome kakav prikaz kontroliraju:

* fontovi, tekst i boje
* pozadina
* box i stilovi rubova (borders)
* liste
* pozicioniranje

Fontovi, tekst i boje

Ne?emo ulaziti u popisivanje svih mogu?ih stilova koji postoje, nego ?emo samo navesti što sve u ovoj kategoriji možete kontrolirati pomo?u CSS-a.

Sve na što ste navikli u HTML <FONT> tagu nalazi se i ovdje: odre?ivanje fonta (Arial, Verdana...), zatim efekti poput podebljanog ili kurzivnog teksta, veli?ina, boja.

Tekst se može uljepšati nekim novim efektima kao što je visina reda teksta, razmak izme?u slova, rije?i i redova, poravnavanje i uvla?enje teksta, te efekti poput podcrtavanja, precrtavanja itd.

Primjer definiranja stila teksta unutar jednog taga:

P.sirokitext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: #000000;
letter-spacing: 4px
}

Pozadina

Umjesto da izgled pozadine eksplicitno odre?ujete u <BODY> tagu kao do sada, primijenite CSS! Možete odrediti boju, pozadinsku sliku, na?in prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po x- ili y-osi) te ?ak poziciju pozadine.

Primjer klase koja definira sliku kao fiksiranu pozadinu:

.pozadina {
background-image: url(poz.gif);
background-repeat: no-repeat;
background-attachment: fixed
}

Ovako definiranu klasu jednostavno pozovite iz <BODY> taga li nekog drugog taga:

<BODY class="pozadina">
...
</BODY>

Liste

Liste su u CSS-u dobile nove efekte, poput mogu?nosti odre?ivanja neke gif sli?ice koja ?e se prikazivati umjesto bulleta.

Primjer liste koja umjesto kao bullet koristi neku sliku:

UL {
list-style-image: url(bullet1.gif)
}

Pozicioniranje

Ova sposobnost CSS-a nije dovoljno iskorištena zbog loše implementacije u browserima. CSS ?e se jednog dana koristiti za pozicioniranje HTML elemenata u trodimenzionalnom prostoru.

Zasad ?emo samo spomenuti da se pozicioniranje dosta koristi u izradi DHTML efekata i bit ?e najbolje da ovu kompleksnu temu obradimo jednom kad budemo pri?ali o DHTML-u.

Ako se želite detaljnije upoznati sa CSS pozicioniranjem, sko?ite do zadnjeg koraka ovog vodi?a i pogledajte koje vam linkove preporu?ujemo.

Odg: Detaljni CSS vodič za početnike

Komentar 7 |

od strane M@jk! | Datum: Август 09, 2007, 03:45:13

8: Box stilovi i rubovi (borders)

Tematika box stilova je malo složenija pa ?emo je obraditi posebno.

Box stilovi omogu?uju sasvim nove efekte. Da biste ih razumjeli, potrebno je znati da CSS svaki element HTML stranice tretira kao da je oko njega opisan pravokutnik (box). Pogledajmo to zajedno na slici:

Svaki od ovih svojstava: width, border, padding i margin mogu se zasebno kontrolirati.

Padding je razmak izme?u elementa i ruba (bordera).

Margin je vrijednost koja odre?uje razmak izme?u elemenata u HTML dokumentu. Kad nekom elementu odredite marginu, vi zapravo pove?avate prostor koji taj element zauzima i dodajete mu nevidljivi rub (na slici je taj nevidljivi rub izražen ve?im iscrtkanim pravokutnikom).

Ako su vrijednosti margine i paddinga na nuli, element zauzima samo prostor odre?en njegovom vlastitom širinom (element width). Pove?avate li njihove vrijednosti, element zauzima sve više i više mjesta.

Za svaki element može se definirati pozadina i svi stilovi pozadine - naglasimo samo da ?e se pozadina prostirati na prostoru kojeg odredite s vrijednoš?u za padding.
Rubovi (borders)

Do sada smo u standardnom HTML-u kod rubova (borders) mogli odrediti samo širinu i boju. CSS nam omogu?uje da svaki rub (lijevo, desno, gore i dolje) ima vlastita svojstva poput boje, širine i efekta. Posebno su zanimljivi efekti rubova: osim pune crte, sad možemo imati to?kasti, isprekidani, dvostruki rub, te još neke zgodne efekte.

Primjer dodavanja zelene pozadine, iscrtkanog ruba i paddinga tekstu:

.txtpozadina {
background-color: green;
padding: 5px;
border: 2px dashed
}

Primijenimo li ovaj stil na tekst "Obojano!", dobivamo:

Obojano

Primijetite da je zbog vrijednosti stila padding prostor koji zauzima pozadina proširen za 5 piksela ispod, iznad, lijevo i desno od rije?i "Obojano".

Odg: Detaljni CSS vodič za početnike

Komentar 8 |

od strane M@jk! | Datum: Август 09, 2007, 03:45:53

9: Prakti?ni primjeri: popularni CSS stilovi

Nepodcrtani link

Sljede?i stil redefinira <A> tag:

A { text-decoration: none }

Efekt kod prelaska mišem preko linka

Želite li da vam link dobije npr. podcrtu i postane zelen, koristite pseudo-klasu:

A:hover {
text-decoration: underline;
color: green
}

Hover pseudo-klasa je dio CSS2 specifikacije i nije podržana u Netscape 4.x browserima.
Tekst s obojanom pozadinom

Recimo da želite odre?enom tekstu dati zelenu pozadinu i proširiti tu pozadinu za 5 pixela. Kreirat ?ete neku klasu (ovdje je to klasa s imenom .txtpozadina) i pomo?u <SPAN> taga primijeniti taj stil na odre?eni tekst:

.txtpozadina {
background-color: green;
padding: 5px;
}

Tekst sa zelenom pozadinom širokom 5 pixela!

Evo kako ubaciti ovaj predefinirani stil u HTML:

<SPAN class="txtpozadina">
Tekst sa zelenom pozadinom širokom 5 pixela!
</SPAN>

Promijenite izgled kursora / mouse pointera!

Ovaj stil ne spada u CSS1, ve? u CSS2 specifikaciju, što zna?i da promjena kursora možda ne?e biti vidljiva u starijim browserima.

Bez obzira želite li redefinirati izgled kursora u cijelom dokumentu ili na nekom dijelu dokumenta (npr. samo kad se miš nalazi iznad tablica), ubacite u svoju CSS klasu npr. sljede?i stil:

cursor: crosshair

Ovo ?e kursor promijeniti u križi?.

Pogledajmo to na gornjem primjeru gdje smo tekstu dodali zelenu pozadinu i proširili pozadinu za 5 piksela. Idemo odrediti da mouse pointer postane križi? kad prije?emo mišem preko tog teksta sa zelenom pozadinom! Samo ?emo u postoje?u klasu ubaciti definiciju kursora:

.txtpozadina {
background-color: green;
padding: 5px;
cursor: crosshair
}

Isprobajte to na donjem tekstu:

Tekst sa zelenom pozadinom širine 5 pixela!

Stil cursor ima nekoliko mogu?ih vrijednosti, a zanimljive su:

hand
wait (pointer se pretvara u pješ?ani sat)
help (kraj pointera se pojavljuje upitnik)

Odg: Detaljni CSS vodič za početnike

Komentar 9 |

od strane M@jk! | Datum: Август 09, 2007, 03:47:35

10: Alati za pisanje CSS stilova i korisni linkovi

Notepad

Ne?ete vjerovati, ali za pisanje i najkompliciranijeg CSS stila bit ?e vam dovoljan Notepad. Iako se ne radi o najelegantnijem rješenju jer ipak morate sve ru?no upisivati, korištenje Notepada ?e vas najbolje nau?iti kako pravilno pisati CSS kod.
Dreamweaver kao predstavnik vizualnih HTML editora

Dreamweaver ima solidno i vrlo jednostavno su?elje za izradu CSS stilova. Stilovi su vam ve? navedeni i vi samo morate odrediti njihovu vrijednost odabirom iz padaju?ih menija. Umetanje CSS klasa je tako?er vrlo jednostavno i izvodi se s dva-tri klika mišem.

Nedostatak Dreamweavera (kao i svih ostalih vizualnih web editora) jest taj što CSS kod ne?e biti tako ?itljiv kao da ste ga ru?no napisali u Notepadu. Cijeli kod bit ?e dosta zgusnut. Tako?er, Dreamweaver nije savršen i ako puno pr?kate po CSS kodu pomo?u Dreamweavera, mogu?e je da ?e krajnji rezultat biti nepravilan kod i da ?ete ga ru?no morati ispravljati.
CSS editori

Postoji nekoliko alata koji su namijenjeni isklju?ivo pisanju CSS-a. Jedan od boljih je i TopStyle koji doduše nije besplatan, ali je po rije?ima iz CNet-a vrijedan svoje cijene. Ima sve napredne opcije koje imaju moderni editori i još puno više.

Mi smo imali prilike isprobati besplatni alat pod imenom StyleWorx koji je sasvim zadovoljavaju?i za po?etnike: ima syntax highlighting, podršku za CSS1 i CSS2 stilove i dosta je konfigurabilan.
Korisni linkovi za proširivanje znanja o CSS-u

Službena CSS1 specifikacija nalazi se na stranici organizacije koja je CSS izradila i standardizirala - CSS1 specifikacija na stranicama W3C-a. http://www.w3.org/pub/WWW/TR/REC-CSS1

Odli?nu školu CSS-a s kompletnim objašnjenjem svakog pojedinog stila, referencom, brdom primjera i kvizevima na?i ?ete na W3Schools školi CSS-a. Tamo žete na?i i CSS2 specifikaciju u kojoj su primjeri novih, do sad malo korištenih stilova. http://www.w3schools.com/css/

CSS guru Eric Meyer izradio je tablicu podrške CSS-a u raznim browserima. Ako želite biti sigurni da ?e vaš CSS stil biti vidljiv u svim browserima, obavezno provjerite ovu tablicu! http://www.webreview.com/style/css1/charts/mastergrid.shtml

Pretraga

Pocetna Forum Tagged Tim Baneri Kontakt

Oglasi Galerija Katalog Sajtova Razmena banera

Windows Mobile Racunari Video Tutorijali Tuning Styling

Jos iz ove oblasti

1:1 Razmena (Povecajte broj... Kako postaviti prezentaciju... Deset ferengijskih pravila od... Tutorial: Web dizajn... Tutorial: Java digitalni sat Promocija Web Sajta Image extenzije Projektovanje Web prezentacija Google Page Ranking Izrada web stranica GIF animacije Joomla (opis, saveti, vodic) Izgubljena/zaboravljena... Joomla vodic za administratore Different Ways to Play a... Domen Povećajte brzinu učitavanja v... HTML site vs. Flash site Netscape problemi i kako ih... Uljepšajte svoje formulare ... Grafika i grafički formati na ... 7 razloga zašto je CSS dobar ... Detaljni CSS vodič za ... Zaštita direktorija passwordom Dodatni .htaccess trikovi za... Instalacija PHP Nuke Portala

[1]