Iako je ve\u0107 1990. Tim Berners-Lee – tvorac weba – izradio preglednik koji je u sebi imao elemente jezika za definisanje stilova, tek se 1993. i 1994. godine zahuktala rasprava o tome kako taj jezik mora izgledati. Nakon Wium Lee i Bert Bos autori su prve specifikacije CSS-a, predstavljene krajem 1994. godine.<\/p>\n
![\"csssopisi141\"](\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/csssopisi141.jpg\")
<\/p>\n
CSS[1]<\/strong><\/a><\/strong> (Cascading Style Sheets<\/em>) je jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Jednostavnije re\u010deno, opisuje, tj. ure\u0111uje izgled i formatiranja bilo kog elementa na stranici. On nam omogu\u0107uje da, kreiraju\u0107i CSS opise, stilizujemo elemente HTML<\/strong> i drugih dokumenata.<\/p>\n CSS je nastao dosta kasnije nego \u0161to je to slu\u010daj sa HTML-om. U po\u010detku, HTML stranice nisu bile vizuelno stilizovane. Potom smo koristili HTML tagove za stilizaciju, ali je sve to bilo previ\u0161e komplikovano i neprakti\u010dno. Zato je osmi\u0161ljen CSS jezik koji ostavlja HTML strukturi da prikazuje sadr\u017eaj, a CSS taj sadr\u017eaj stilizuje. U po\u010detku, mnogi autori su kombinovali HTML i CSS stilizaciju, ali danas, kada je CSS potpuno sazreo, mo\u017eemo u potpunosti po\u0161tovati pravilo razdvojenosti sadr\u017eaja (HTML) i stilizacije (CSS).<\/strong><\/p>\n CSS nam omogu\u0107uje da kreiramo opise pomo\u0107u kojih \u0107emo stilizovati odre\u0111ene elemente. Na primer, CSS-om mo\u017eemo definisati da pozadina strane bude plava i da sav tekst na njoj bude u fontu Arial i to u crvenoj boji. Tako\u0111e, mo\u017eemo postaviti da svi paragrafi imaju odre\u0111ene margine i tako dalje.<\/p>\n U CSS-u ne pi\u0161emo tagove niti postavljamo bilo kakav HTML sadr\u017eaj. On slu\u017ei isklju\u010divo za ure\u0111ivanje i stilizaciju sadr\u017eaja u HTML i drugim dokumentima.<\/p>\n CSS je odvojen od HTML jezika i njegovih tagova. Ukoliko imamo kreiranu HTML stranicu, nije potrebno da prepravljamo taj k\u00f4d kako bi uneli CSS k\u00f4d. Njega unosimo ili u posebnom fajlu (sa ekstenzijom .css<\/em>) ili u head delu HTML dokumenta.<\/p>\n <\/a>Kako funkcioni\u0161e CSS<\/strong><\/p>\n Osnova razumevanja funkcionisanja CSS jezika je da zamislimo nevidljiv okvir (box) oko svakog elementa na strani. CSS-om kreiramo opise pomo\u0107u kojih stilizujemo taj okvir, ali i same elemente unutar njega.<\/p>\n CSS sintaksa[2]<\/a> se sastoji iz CSS opisa[3]<\/strong><\/a> (CSS Rule).<\/strong> Sami CSS opisi su obavezno sastavljeni iz dva dela. Razlikujemo selektor (selector) i deklaraciju (declaration).<\/strong><\/p>\n Selektor<\/strong> ukazuje na koji element (ili vi\u0161e njih, odvajamo iz zarezom) se odnosi taj CSS opis.<\/p>\n Deklaracija<\/strong> postavlja stilizaciju za element na koji se odnosi CSS opis.<\/p>\n Kada kreiramo CSS opis, postavljamo selektor, zatim unosimo razmak i postavljamo viti\u010daste zagrade u kojima pi\u0161emo deklaracije.Kao na slede\u0107em primeru:<\/p>\n h1 { color:red; }<\/span><\/p>\n Primer k\u00f4da iznad predstavlja jedan jednostavan CSS opis.<\/p>\n Deklaracije se tako\u0111e sastoje iz dva dela, a to su svojstvo (property) i vrednost (value).<\/strong> Pi\u0161emo svojstvo, postavljamo dve ta\u010dke (:) i zatim vrednost. U istom opisu mo\u017eemo pisati vi\u0161e deklaracija, samo ih odvajamo znakom ta\u010dka-zarez (;). Pogledajmo primer:<\/p>\n Ukoliko \u017eelimo da postavimo da paragrafi na\u0161e stranice budu u fontu Tahoma i da imaju veli\u010dinu 12px, pisa\u0107emo:<\/p>\n p {<\/span> U ovom primeru postavili smo selektor p<\/strong> koji ozna\u010dava da se taj opis odnosi na sve paragrafe u dokumentu (na <p> tagove u HTML-u). Postavili smo viti\u010daste zagrade i u njima pisali dve deklaracije koje se odnose na izbor fonta (font-family) i izbor veli\u010dine teksta (font-size). Prime\u0107ujete da izme\u0111u svojstva i vrednosti u deklaraciji stoji uvek znak :(bez razmaka), a da posle deklaracije uvek stoji znak ;<\/strong> (koji ozna\u010dava kraj vrednosti).<\/p>\n Va\u017eno je pomenuti da novi redovi i razmaci u CSS jeziku ne igraju preterano zna\u010dajnu ulogu, ali treba po\u0161tovati neku strukturu radi preglednosti k\u00f4da. Uobi\u010dajeno je da se pi\u0161u selektor i po\u010detna zagrada u jednom redu. Zatim, na slede\u0107im redovima sve deklaracije (po jedna po redu) i na kraju zatvaramo zagradu u novom redu, kao na primeru iznad.<\/p>\n CSS selektori razlikuju velika i mala slova tako da moramo voditi ra\u010duna o tome.<\/p>\n Neke vrednosti mogu imati vi\u0161e vrednosti (odvajamo zarezom), ili mogu imati vi\u0161e grupa vrednosti (odvajamo razmakom) ili mogu sadr\u017eati string (tekst) i tada pi\u0161emo vrednost pod znacima navoda. Mo\u017ee do\u0107i i do kombinacije tih na\u010dina pisanja. Pogledajmo primere za ove slu\u010dajeve:<\/p>\n p {<\/span> Pre nego \u0161to krenemo dalje, dobro zapamtite ove termine koje smo pominjali do sada u ovoj lekciji jer \u0107emo se uvek vra\u0107ati na njih. Dakle, da ponovimo: CSS jezik se sastoji iz opisa. Svaki opis je sastavljen iz selektora i deklaracija. Deklaracija se sastoji iz svojstva i vrednosti.<\/strong><\/p>\n \u00a0 CSS opisi<\/em><\/p>\n [1]<\/a> (Cascading Style Sheets) je jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Jednostavnije re\u010deno, opisuje, tj. ure\u0111uje izgled i formatiranja bilo kog elementa na stranici. On nam omogu\u0107uje da, kreiraju\u0107i CSS opise stilizujemo elemente HTML i drugih dokumenata.<\/em><\/p>\n [2]<\/strong><\/em><\/a> Na\u010din pravila pisanja odre\u0111enog jezika. U slu\u010daju web razvoja govorimo o sintaksama programskih ili opisnih jezika (HTML, CSS…)<\/em><\/p>\n [3]<\/strong><\/em><\/a> Skup deklaracija kojima se ure\u0111uje odre\u0111eni sadr\u017eaj na HTML strani. Pozivanjem u HTML kodu strane, parametri dizajna iz pravila se primenjuju na sadr\u017eaje koji su povezani sa pravilom.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"U ranijim lekcijama smo se bavili isklju\u010divo HTML jezikom i njegovim svojstvima. \n <\/a>","protected":false},"author":1,"featured_media":699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=698"}],"version-history":[{"count":1,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/698\/revisions"}],"predecessor-version":[{"id":1261,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/698\/revisions\/1261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/media\/699"}],"wp:attachment":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n \u00a0font-family:Tahoma;<\/span>
\n \u00a0font-size:12px;<\/span>
\n }<\/span><\/p>\n
\n \u00a0font-family:\u201dTimes New Roman\u201d, Arial;<\/span>
\n \u00a0margin:10px 0 0 0;<\/span>
\n }<\/span><\/p>\n![\"csssopisi142\"](\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/csssopisi142.jpg\")
<\/em><\/p>\n