{"id":149,"date":"2023-10-01T16:03:50","date_gmt":"2023-10-01T14:03:50","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=149"},"modified":"2023-10-01T16:28:56","modified_gmt":"2023-10-01T14:28:56","slug":"vkladanie-css-do-html-dokumentu","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=149","title":{"rendered":"2. VKLADANIE CSS DO HTML DOKUMENTU"},"content":{"rendered":"

\"\"<\/h2>\n

Jednoduch\u00fd \u0161t\u00fdl CSS<\/h2>\n

Najjednoduch\u0161\u00ed kask\u00e1dov\u00fd \u0161t\u00fdl m\u00f4\u017ee vyzera\u0165 napr. takto:<\/p>\n

h1 { color: blue}<\/strong><\/span><\/p>\n

v\u00fdznam z\u00e1pisu : V\u0161etky nadpisy vytvoren\u00e9 pomocou elementu h1<\/span><\/strong> bud\u00fa ma\u0165 modr\u00fa farbu.<\/p>\n

V na\u0161om pr\u00edpade je cel\u00fd \u0161t\u00fdl tvoren\u00fd len jedn\u00fdm pravidlom. Ka\u017ed\u00e9 pravidlo m\u00e1 dve \u010dasti \u2013\u00a0selektor (h1<\/strong><\/span>) a deklar\u00e1ciu (color: blue<\/strong><\/span>)
\nSelektor ur\u010duje elementy, na ktor\u00e9 bude deklar\u00e1cia aplikovan\u00e1. Ka\u017ed\u00e1 deklar\u00e1cia sa sklad\u00e1 z dvoch \u010dast\u00ed \u2013 z vlastnosti a jej hodnoty. Deklar\u00e1cie m\u00f4\u017eeme zdru\u017eova\u0165 dokopy, pokia\u013e ich oddel\u00edme pomocou bodko\u010diarky:<\/p>\n

h1 { color: blue; text-align:center}<\/strong><\/span><\/p>\n

\"\"<\/p>\n

1. \u0160t\u00fdl pre cel\u00fa str\u00e1nku zap\u00edsan\u00fd priamo v HTML dokumente<\/h2>\n

Tento sp\u00f4sob vyu\u017eijeme v pr\u00edpadoch, kedy chceme definova\u0165 vzh\u013ead len jednej str\u00e1nky a nepl\u00e1nujeme pou\u017eitie \u0161t\u00fdlov na \u010fal\u0161\u00edch str\u00e1nkach. \u0160t\u00fdl sa vklad\u00e1 do z\u00e1hlavia dokumentu do elementu <style><\/strong><\/span>. Pomocou atrib\u00fatu
\ntype<\/strong><\/span> mus\u00edme ur\u010di\u0165 typ pou\u017e\u00edvan\u00e9ho \u0161t\u00fdlov\u00e9ho jazyka.<\/p>\n

\"\"<\/p>\n

2. \u0160pecifik\u00e1cia \u0161t\u00fdlu priamo v elemente dokumentu<\/h2>\n

T\u00e1to mo\u017enos\u0165 definovania \u0161t\u00fdlu tro\u0161ku odporuje samotnej filozofii \u0161t\u00fdlu, ktor\u00e1 sa sna\u017e\u00ed oddeli\u0165 defin\u00edciu vzh\u013eadu od samotn\u00e9ho obsahu dokumentu. V ka\u017edom elemente m\u00f4\u017eeme pou\u017e\u00edva\u0165 atrib\u00fat style<\/span><\/strong> a v \u0148om priamo uv\u00e1dza\u0165 deklar\u00e1ciu \u0161t\u00fdlu.<\/p>\n

\"\"<\/p>\n

3. Pripojenie \u0161t\u00fdlu z extern\u00e9ho s\u00faboru<\/h2>\n

Tento pr\u00edpad je najvyu\u017e\u00edvanej\u0161\u00ed, preto\u017ee umo\u017e\u0148uje vyu\u017ei\u0165 jeden \u0161t\u00fdl v na nieko\u013ek\u00fdch str\u00e1nkach. \u0160t\u00fdl sa k str\u00e1nke prip\u00e1ja pomocou elementu link, ktor\u00fd m\u00f4\u017ee by\u0165 umiestnen\u00fd v z\u00e1hlav\u00ed str\u00e1nky.<\/p>\n

\"\"<\/p>\n

Alternat\u00edvne \u0161t\u00fdly<\/h2>\n

K str\u00e1nke m\u00f4\u017eu by\u0165 pripojen\u00e9 aj viacer\u00e9 \u0161t\u00fdly naraz a u\u017e\u00edvate\u013e si m\u00f4\u017ee medzi nimi prep\u00edna\u0165.
\nV\u00e4\u010d\u0161ina webov\u00fdch prehliada\u010dov v\u0161ak nepon\u00faka mo\u017enos\u0165 prep\u00ednania \u0161t\u00fdlov a ani si zmenu \u0161t\u00fdlu nepam\u00e4t\u00e1 pri prechode medzi str\u00e1nkami, mus\u00ed sa preto rie\u0161i\u0165 cez JavaScript.<\/p>\n

\"\"<\/p>\n

Zhrnutie:<\/p>\n\n\n\n\n\n\n
Umiestnenie CSS<\/th>\nUmiestnenie vlastnosti CSS<\/th>\nZ\u00e1pis<\/th>\nPlatnos\u0165<\/th>\n<\/tr>\n
Lok\u00e1lne<\/th>\nV elementoch<\/td>\n<div style=\u201dcolor: green;\u201d>
\n<\/div><\/td>\n		Iba pre jeden element<\/td>\n<\/tr>\n
Intern\u00e9<\/th>\nV hlavi\u010dke<\/td>\n<style type=\u201ctext\/css\u201c> div {color: green;} <\/style><\/td>\njedna str\u00e1nka<\/td>\n<\/tr>\n
extern\u00e9<\/th>\nExtern\u00fd s\u00fabor CSS<\/td>\ndiv {color: green;}<\/td>\nJedna a viac str\u00e1nok<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

Jednoduch\u00fd \u0161t\u00fdl CSS Najjednoduch\u0161\u00ed kask\u00e1dov\u00fd \u0161t\u00fdl m\u00f4\u017ee vyzera\u0165 napr. takto: h1 { color: blue} v\u00fdznam z\u00e1pisu : V\u0161etky nadpisy vytvoren\u00e9 pomocou elementu h1 bud\u00fa ma\u0165 modr\u00fa farbu. V na\u0161om pr\u00edpade je cel\u00fd \u0161t\u00fdl tvoren\u00fd len jedn\u00fdm pravidlom. Ka\u017ed\u00e9 pravidlo m\u00e1 dve \u010dasti \u2013\u00a0selektor (h1) a deklar\u00e1ciu (color: blue) Selektor ur\u010duje elementy, na ktor\u00e9 bude deklar\u00e1cia […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-149","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":7,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions\/170"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}