{"id":191,"date":"2023-10-01T17:31:22","date_gmt":"2023-10-01T15:31:22","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=191"},"modified":"2023-10-01T17:42:43","modified_gmt":"2023-10-01T15:42:43","slug":"poradie-stylov","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=191","title":{"rendered":"6. Poradie \u0161t\u00fdlov"},"content":{"rendered":"<h2><span style=\"font-size: 16px;\">Pri definovan\u00ed \u0161t\u00fdlov m\u00f4\u017ee d\u00f4js\u0165 k situ\u00e1cii, ke\u010f jeden element m\u00f4\u017ee ma\u0165 definovan\u00fa vlastnos\u0165 r\u00f4znymi sp\u00f4sobmi, alebo na viacer\u00fdch miestach. <\/span><span style=\"font-size: 16px;\">V tomto pr\u00edpade je potrebn\u00e9 rozhodn\u00fa\u0165, ktor\u00fa deklar\u00e1ciu, \u0161t\u00fdl alebo zdroj \u0161t\u00fdlov pou\u017ei\u0165.<\/span><\/h2>\n<div id=\"node-384\" class=\"node\">\n<div class=\"content clear-block clear-both \">\n<p>Priority defin\u00edci\u00ed:<\/p>\n<ol>\n<li>Kask\u00e1da<\/li>\n<li>Dedi\u010dnos\u0165<\/li>\n<li>Vypo\u010d\u00edtan\u00e1 hodnota<\/li>\n<li>Predvolen\u00e1 hodnota<\/li>\n<\/ol>\n<h3>Kask\u00e1da<\/h3>\n<p>Pri existencii viacer\u00fdch zdrojov \u0161t\u00fdlov rovnakej d\u00f4le\u017eitosti rozhoduje o tom, ktor\u00fd \u0161t\u00fdl sa pou\u017eije kask\u00e1da.<\/p>\n<ol>\n<li>Atrib\u00fat style v zdrojovom k\u00f3de (najsilnej\u0161\u00ed)\n<pre><span style=\"color: #0000ff;\">&lt;p <strong>style<\/strong> =\"color: blue;\"&gt;\r\n<\/span><\/pre>\n<\/li>\n<li>\u0160t\u00fdl v hlavi\u010dke dokumentu\n<pre><span style=\"color: #0000ff;\">  ...\r\n <strong>  &lt;style type=\"text\/css\"&gt; \r\n    &lt;!-- \r\n      p {color: blue;} \r\n    --&gt; \r\n  &lt;\/style&gt;<\/strong>\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  ...\r\n<\/span><\/pre>\n<\/li>\n<li>Extern\u00fd \u0161t\u00fdl\n<pre><span style=\"color: #0000ff;\">  ...\r\n <strong>  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/&gt;<\/strong>\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  ...\r\n<\/span><\/pre>\n<\/li>\n<li>Pravidlo @import<\/li>\n<li>U\u017e\u00edvate\u013esk\u00fd \u0161t\u00fdl definovan\u00fd v nastaven\u00ed webov\u00e9ho prehliada\u010da<\/li>\n<li>Predvolen\u00fd \u0161t\u00fdl webov\u00e9ho prehliada\u010da (najslab\u0161\u00ed)<\/li>\n<\/ol>\n<h4>\u0160pecifickos\u0165 selektora<\/h4>\n<p>Ur\u010duje v\u00e1hu selektora.\u00a0Selektor s vy\u0161\u0161ou v\u00e1hou (silnej\u0161ou) prep\u00ed\u0161e deklar\u00e1ciu rovnak\u00fdch vlastnost\u00ed pri selektore s ni\u017e\u0161ou v\u00e1hou (slab\u0161ou).<\/p>\n<ol>\n<li>\u0160pecifickos\u0165: 1000 (najsilnej\u0161\u00ed)\n<ul>\n<li>atrib\u00fat style v zdrojovom k\u00f3de<code>&lt;p\u00a0<strong>style<\/strong>=\"color: blue;\"&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\u0160pecifickos\u0165: 0100\n<ul>\n<li>identifik\u00e1tor<code><strong>#header<\/strong>\u00a0{color: blue;} \/* zahlavi *\/<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\u0160pecifickos\u0165: 0010\n<ul>\n<li>trieda, pseudotrieda alebo selektor atrib\u00fatu (parametra)\n<pre><span style=\"color: #0000ff;\"><strong>.note<\/strong> {font-size: 80%;} \/* poznamka *\/\r\na<strong>:hover<\/strong> {text-decoration: underline;}\r\n<strong>a[href]<\/strong> :after {content: \" [\" attr(href) \"] \";}\r\n<\/span><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<li>\u0160pecifickos\u0165: 0001\n<ul>\n<li>typov\u00fd selektor alebo pseudoelement\n<pre><span style=\"color: #0000ff;\"><strong>p<\/strong> {color: blue;}\r\np<strong>:first-letter<\/strong> {font-weight: bold; font-size: 130%;}\r\n<\/span><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<li>\u0160pecifickos\u0165: 0000 (najslab\u0161ia)\n<ul>\n<li>univerz\u00e1lny selektor alebo jeho kombin\u00e1cia<code><strong>*<\/strong>\u00a0{color: blue;}<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Jednotliv\u00e9 \u00farovne \u0161pecifickosti sa s\u010d\u00edtaj\u00fa a vyhr\u00e1va ten najsilnej\u0161\u00ed.<\/p>\n<p><strong>Pr\u00edklad v\u00fdpo\u010dtu<\/strong>\u00a0:<\/p>\n<p>Selektor\u00a0<code><strong>#header ul li.note p:first-letter a:hover<\/strong>\u00a0{color: red;}<\/code>m\u00e1 \u0161pecifickos\u0165: 0125.<\/p>\n<h4>Poradie selektora<\/h4>\n<p>V pr\u00edpade zhody pravidiel vyhr\u00e1va to, ktor\u00e9 je uveden\u00e9 nesk\u00f4r.<\/p>\n<h4>Pravidlo !important<\/h4>\n<p>Umo\u017e\u0148uje uprednostni\u0165 deklar\u00e1ciu v pr\u00edpade konfliktu s in\u00fdmi deklar\u00e1ciami bez tohto pravidla.<\/p>\n<p>V pr\u00edpade stretu pravidla\u00a0<strong>!important<\/strong>\u00a0v u\u017e\u00edvate\u013eskej \u0161abl\u00f3ne a pravidla\u00a0<strong>!important<\/strong>\u00a0v \u0161t\u00fdle dokumentu, vyhr\u00e1 u\u017e\u00edvate\u013esk\u00e1 \u0161abl\u00f3na.<\/p>\n<pre><span style=\"color: #0000ff;\">a {\r\n  text-decoration: underline; <strong>!important<\/strong>\r\n}\r\n<\/span><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/lightbulb.gif\" alt=\"\" \/>Ide o posledn\u00e9 mo\u017en\u00e9 rie\u0161enie, be\u017en\u00e9 CSS sa bez tohto pravidla v\u00e4\u010d\u0161inou zaob\u00eddu.<\/p>\n<h3>Dedi\u010dnos\u0165<\/h3>\n<p>Elementy s\u00fa v dokumente usporiadan\u00e9 v stromovej \u0161trukt\u00fare.\u00a0Elementy m\u00f4\u017eu dedi\u0165 hodnoty vlastnost\u00ed od svojho nadraden\u00e9ho elementu a to aj po viacer\u00fdch gener\u00e1ci\u00e1ch.\u00a0V (X) HTML je najvy\u0161\u0161\u00ed element\u00a0<strong>html<\/strong>\u00a0, do neho s\u00fa vnoren\u00e9 elementy\u00a0<strong>head<\/strong>\u00a0a\u00a0\u00a0<strong>body<\/strong>\u00a0, do\u00a0\u00a0<strong>body<\/strong>\u00a0je vnoren\u00fd element\u00a0<strong>h1<\/strong>\u00a0at\u010f. Jedn\u00e1 sa o pojmy\u00a0<strong>n\u00e1sledn\u00edk<\/strong>\u00a0a\u00a0\u00a0<strong>predchodca<\/strong>\u00a0.\u00a0V pr\u00edpade priameho pr\u00edbuzenstva o pojmy\u00a0<strong>rodi\u010d<\/strong>\u00a0a\u00a0\u00a0<strong>potomok<\/strong>\u00a0.<\/p>\n<p>V CSS m\u00e1 ka\u017ed\u00e1 vlastnos\u0165 ur\u010den\u00e9, \u010di je dedi\u010dn\u00e1 alebo nie.\u00a0U vnoren\u00e9ho elementu je mo\u017en\u00e9 zdedenie vlastnosti vyn\u00fati\u0165 hodnotou\u00a0<strong>inher\u00edt<\/strong>\u00a0.<\/p>\n<p>Pr\u00edklad:<\/p>\n<pre><span style=\"color: #0000ff;\">body {\r\n  color:teal; \/* vlastnos\u0165 je dedicn\u00e1 *\/\r\n  border: 5px solid silver; \/* vlastnos\u0165 nie je dedicn\u00e1 *\/\r\n}\r\nh1 {\r\n  border:<strong>inherit<\/strong> ; \/* vyn\u00faten\u00ed dedi\u010dnosti *\/\r\n}\r\n<\/span><\/pre>\n<p><strong>Pozn\u00e1mky<\/strong>\u00a0:<\/p>\n<ul>\n<li><span class=\"abbr\" title=\"Internet Explorer 7 a ni\u017e\u0161ia verzia\">IE7-<\/span>\u00a0podporuje hodnotu\u00a0<strong>inher\u00edt<\/strong>\u00a0iba pri vlastnostiach\u00a0<strong>direction<\/strong>\u00a0and\u00a0<strong>visibility<\/strong>\u00a0<img decoding=\"async\" src=\"https:\/\/tomas.dankovi.info\/system\/files\/images\/smileys\/angry_smile.gif\" alt=\"\" \/><\/li>\n<\/ul>\n<h3>Vypo\u010d\u00edtan\u00e1 hodnota<\/h3>\n<p>Pri relat\u00edvnych jednotk\u00e1ch (em, % at\u010f.) a k\u013e\u00fa\u010dov\u00fdch slov (large, small at\u010f.) je potrebn\u00e9 vypo\u010d\u00edta\u0165 ich skuto\u010dn\u00fa hodnotu.\u00a0Skuto\u010dn\u00e9 hodnoty sa e\u0161te \u010falej upravuj\u00fa pod\u013ea mo\u017enost\u00ed v\u00fdstupn\u00fdch zariaden\u00ed (n\u00e1sobky bodu obrazovky, farebn\u00e9 spektrum, mo\u017enosti tla\u010diarne at\u010f.).<\/p>\n<h3>Predvolen\u00e1 hodnota<\/h3>\n<p>Ka\u017ed\u00e1 vlastnos\u0165 m\u00e1 CSS \u0161pecifik\u00e1ci\u00ed ur\u010den\u00fa v\u00fdchodiskov\u00fa hodnotu, ktor\u00e1 sa pou\u017eije v pr\u00edpade, ak nie je stanoven\u00e9 inak.\u00a0Pri niektor\u00fdch vlastnostiach m\u00f4\u017ee predvolen\u00fa hodnotu upresni\u0165 prehliada\u010d.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pri definovan\u00ed \u0161t\u00fdlov m\u00f4\u017ee d\u00f4js\u0165 k situ\u00e1cii, ke\u010f jeden element m\u00f4\u017ee ma\u0165 definovan\u00fa vlastnos\u0165 r\u00f4znymi sp\u00f4sobmi, alebo na viacer\u00fdch miestach. V tomto pr\u00edpade je potrebn\u00e9 rozhodn\u00fa\u0165, ktor\u00fa deklar\u00e1ciu, \u0161t\u00fdl alebo zdroj \u0161t\u00fdlov pou\u017ei\u0165. Priority defin\u00edci\u00ed: Kask\u00e1da Dedi\u010dnos\u0165 Vypo\u010d\u00edtan\u00e1 hodnota Predvolen\u00e1 hodnota Kask\u00e1da Pri existencii viacer\u00fdch zdrojov \u0161t\u00fdlov rovnakej d\u00f4le\u017eitosti rozhoduje o tom, ktor\u00fd \u0161t\u00fdl sa [&hellip;]<\/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-191","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/191","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=191"}],"version-history":[{"count":2,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/191\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/191\/revisions\/202"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}