{"id":704,"date":"2020-04-19T15:08:39","date_gmt":"2020-04-19T13:08:39","guid":{"rendered":"http:\/\/skolarbbos.net\/?p=704"},"modified":"2020-04-14T01:17:34","modified_gmt":"2020-04-13T23:17:34","slug":"nacini-pisanja-css-opisa","status":"publish","type":"post","link":"https:\/\/skolarbbos.net\/?p=704","title":{"rendered":"Na\u010dini pisanja CSS opisa"},"content":{"rendered":"<p>Pomenuli smo da je CSS odvojen od HTML koda, ali to zna\u010di da ga postavljamo&#8230; Gde? Postoje tri varijante, od kojih se dve aktivno koriste:<\/p>\n<p><strong>Eksterni CSS<a href=\"#_ftn1\" name=\"_ftnref1\"><strong>[1]<\/strong><\/a><\/strong><\/p>\n<p>Kao \u0161to mu i samo ime ka\u017ee, eksterni CSS se nalazi kompletno van HTML dokumenta u posebnom fajlu.<\/p>\n<p>Najprostija varijanta je kada imamo jedan HTML fajl i pored njega jedan CSS fajl. Dovoljno je da u head delu HTML fajla unesemo odre\u0111eni tag, koji \u0107e povezati eksterni CSS fajl. Sa druge strane, u samom CSS fajlu pi\u0161emo samo opise. Ne sme se pojaviti nikakav deo HTML jezika u CSS fajlovima. CSS fajlovi, za razliku od HTML-a, sastoje se samo od CSS opisa.<\/p>\n<p>Sam tag za povezivanje CSS opisa u head delu strane je<strong> &lt;link&gt;.<\/strong> Poput nekih drugih tagova (kao \u0161to je meta, npr.), nema sadr\u017eaj i samozatvaraju\u0107i je, a sve vrednosti nosi u svojim atributima nad tagom. Ti atributi u slu\u010daju &lt;link&gt; taga su:<\/p>\n<ul>\n<li><strong>href<\/strong> \u2013 defini\u0161e putanju do eksternog CSS fajla. Mo\u017ee biti relativna ili apsolutna. Preporuka je postavljati relativne putanje i voditi ra\u010duna da svi fajlovi sajta uvek budu zajedno i u istim odnosima. Ovaj isti atribut smo susretali kod img taga, u sli\u010dnoj funkciji (putanja do slike).<\/li>\n<li><strong>type<\/strong> \u2013 defini\u0161e tip dokumenta ka kome se linkuje po\u0161to se tag &lt;link&gt; mo\u017ee koristiti i za neke druge svrhe, mada se u poslednje vreme koristi samo za CSS. Postavljamo: \u201c<em>text\/css<\/em>\u201d<\/li>\n<li><strong>rel<\/strong> \u2013 defini\u0161e odnos HTML fajla i linkovanog, eksternog fajla. Postavljamo: \u201e<em>stylesheet<\/em>\u201c<\/li>\n<\/ul>\n<p>Evo primera za eksterno povezani CSS fajl, ta\u010dnije, po\u010detak HTML strane mo\u017ee izgledati ovako:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;!DOCTYPE html&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;html&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;head&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;title&gt;Eksterni CSS&lt;\/title&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;<span style=\"color: #ff00ff;\">link href=\u201dcss\/stilizacija.css\u201d type=\u201dtext\/css\u201d rel=\u201dstylesheet\u201d<\/span> \/&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;\/head&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;body&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &#8230;<\/span><\/p>\n<p>Podse\u0107amo, ovaj tag se <strong>uvek<\/strong> postavlja u okviru <strong>head dela<\/strong> HTML fajla i prakti\u010dno je uvek isti, samo se razlikuje putanja do fajla.<\/p>\n<p><em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-706 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/nacinipisanja151.jpg\" alt=\"nacinipisanja151\" width=\"500\" height=\"292\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/nacinipisanja151.jpg 500w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/nacinipisanja151-300x175.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>HTML stranice i eksterni CSS fajlovi<\/em><\/p>\n<p>U jednom HTML dokumentu mo\u017ee postojati vi\u0161e povezanih CSS fajlova. U tom slu\u010daju postavi\u0107emo po jedan &lt;link&gt; tag za svaki eksterni CSS fajl. Podse\u0107am, jedan CSS fajl mo\u017ee skladi\u0161titi neograni\u010den broj opisa, ali ve\u0107ina autora razdvaja grupe CSS opisa u razli\u010ditim fajlovima radi lak\u0161e organizacije.<\/p>\n<p>Sa druge strane, jedan CSS fajl mo\u017ee biti pozvan, u\u010ditan od strane vi\u0161e razli\u010ditih HTML fajlova. Tako mo\u017eemo stilizovati iste elemente na razli\u010ditim stranama istim fajlom.<\/p>\n<p><strong>Interni CSS<a href=\"#_ftn2\" name=\"_ftnref2\"><strong>[2]<\/strong><\/a><\/strong><\/p>\n<p>Nasuprot eksternom, interni CSS se nalazi direktno u HTML dokumentu, ta\u010dnije u head delu. Umesto da postavljamo &lt;link&gt; tag kao malopre, mo\u017eemo postaviti &lt;style&gt; tag i u okviru njega direktno upisati CSS opise. Pogledajmo primer:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;!DOCTYPE html&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;html&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;head&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;title&gt;Interni CSS&lt;\/title&gt;<\/span><br \/>\n<span style=\"color: #ff00ff;\"> &lt;style type=\u201dtext\/css\u201d&gt;<\/span><\/p>\n<p><span style=\"color: #ff00ff;\">p {<\/span><br \/>\n<span style=\"color: #ff00ff;\"> \u00a0 font-family:Tahoma;<\/span><br \/>\n<span style=\"color: #ff00ff;\"> \u00a0 font-size:12px;<\/span><br \/>\n<span style=\"color: #ff00ff;\"> }<\/span><\/p>\n<p><span style=\"color: #ff00ff;\">&lt;\/style&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;\/head&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;body&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &#8230;<\/span><\/p>\n<p>Na ovaj na\u010din prakti\u010dno smo <em>ugradili<\/em> ceo CSS fajl u strukturu HTML stranice. Van &lt;style&gt;taga nalazi se HTML strana i va\u017ee njena pravila. Sa druge strane, unutar njega se nalaze CSS opisi i va\u017ee pravila CSS jezika.<\/p>\n<p><em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-707 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2016\/02\/nacinipisanja152.jpg\" alt=\"nacinipisanja152\" width=\"250\" height=\"140\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>Interni CSS je ugra\u0111en u HTML stranicu<\/em><\/p>\n<p><strong>Eksterni vs interni CSS<\/strong><\/p>\n<p>Pitanje je da li koristiti eksterni ili interni CSS. Skoro uvek je prakti\u010dnije koristiti eksterni CSS. Evo samo nekih od razloga:<\/p>\n<ul>\n<li>Mo\u017eemo koristiti iste CSS opise za vi\u0161e razli\u010ditih stranica, umesto da ih bespotrebno ponavljamo.<\/li>\n<li>Po\u0161to nema ponavljanja k\u00f4da, stranice su \u201elak\u0161e\u201c i br\u017ee se u\u010ditavaju (CSS se u\u010ditava samo na prvoj).<\/li>\n<li>Razdvajamo sadr\u017eaj od stilizacije.<\/li>\n<li>Mo\u017eemo menjati CSS opise na jednom mestu, \u0161to \u0107e odmah uticati na sve povezane stranice.<\/li>\n<li>Lak\u0161e je snala\u017eenje u CSS k\u00f4du koji je odvojen od HTML-a.<\/li>\n<\/ul>\n<p><strong>Inline CSS<\/strong><a href=\"#_ftn3\" name=\"_ftnref3\"><strong><strong>[3]<\/strong><\/strong><\/a><\/p>\n<p>Pomenuli smo da postoje tri varijante pisanja CSS k\u00f4da. Pored eksternog i internog CSS-a, postoji i <strong>inline<\/strong> na\u010din pisanja. Inline se razlikuje po tome \u0161to je selektor izostavljen i sam CSS postavlja se direktno u HTML tagu, poput atributa.<\/p>\n<p>Ovaj na\u010din pisanja je dozvoljen <strong>samo u xHTML transitional i HTML4<\/strong> dokumentima i predstavlja zaostatak iz nekih ranijih vremena.<\/p>\n<p>Kod inline CSS-a postavljamo (na HTML tagu koji \u017eelimo da stilizujemo) atribut styleu kome pod znacima navoda pi\u0161emo svojstva i vrednosti, kao i ranije.<\/p>\n<p>Zbog specifi\u010dnosti ove varijante, opis koji unesemo se odnosi samo na taj jedan element. Zato je pisanje inline stilova veoma neprakti\u010dno, a jo\u0161 je te\u017ea kasnija izmena.<\/p>\n<p>Pogledajmo primer:<\/p>\n<p><span style=\"color: #ff0000;\">&#8230;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;p&gt;Prvi paragraf&lt;\/p&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;p <span style=\"color: #ff00ff;\">style=\u201dfont-family:Tahoma; font-size:12px;\u201d<\/span>&gt;Moj paragraf&lt;\/p&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &lt;p&gt;Tre\u0107i paragraf&lt;\/p&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\"> &#8230;<\/span><\/p>\n<p>Ovako smo dobili stilizaciju nad samo jednim (drugim) paragrafom teksta. Ako bismo \u017eeleli da svi budu stilizovani, morali bismo i njima da dodamo atribut style i ova svojstva i vrednosti. Lak\u0161e je postaviti eksterni\/interni CSS i jednim opisom stilizovati paragrafe.<\/p>\n<p>Mo\u017eda se u ovom trenutku pitate kako \u0107u stilizovati samo jedan od paragrafa, ako je to ono \u0161to \u017eelim, tj. \u017eelim da se jedan razlikuje. U takvom i sli\u010dnim slu\u010dajevima ipak ne\u0107emo koristiti inline silizaciju, ve\u0107 ne\u0161to slo\u017eenije selektore od jednostavnog p, kao \u0161to \u0107emo videti u nastavku.<\/p>\n<p><strong><a href=\"#_ftnref1\" name=\"_ftn1\">[1]<\/a><\/strong> CSS opis postavljen u eksternom (posebnom) CSS fajlu ili se mo\u017ee odnositi na ceo CSS fajl (pogledati i pod CSS fajl<\/p>\n<p><a href=\"#_ftnref2\" name=\"_ftn2\"><em><strong>[2]<\/strong><\/em><\/a><em> CSS opis ili vi\u0161e opisa koji se nalaze u HTML dokuemntu pod style tagom.<\/em><\/p>\n<p><a href=\"#_ftnref3\" name=\"_ftn3\"><em><strong>[3]<\/strong><\/em><\/a><em> CSS postavljen direktno u samom HTML tagu. Zabranjen u strict varijanti HTML \/ xHTML jezika<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"Pomenuli smo da je CSS odvojen od HTML koda, ali to zna\u010di<a class=\"moretag\" href=\"https:\/\/skolarbbos.net\/?p=704\"> &lt;b&gt;[Nastavi sa \u010ditanjem...]&lt;\/b&gt;<\/a>","protected":false},"author":1,"featured_media":705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-704","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\/704","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=704"}],"version-history":[{"count":1,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":1260,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/704\/revisions\/1260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/media\/705"}],"wp:attachment":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}