{"id":144,"date":"2023-10-01T15:15:31","date_gmt":"2023-10-01T13:15:31","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=144"},"modified":"2023-10-01T17:37:41","modified_gmt":"2023-10-01T15:37:41","slug":"co-su-kaskadove-styly-css","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=144","title":{"rendered":"1. \u010cO S\u00da KASK\u00c1DOV\u00c9 \u0160T\u00ddLY (CSS)?"},"content":{"rendered":"

Kask\u00e1dov\u00e9 \u0161t\u00fdly, anglicky Cascading Style Sheets, je jazyk\u00a0ur\u010duj\u00faci z\u00e1kladn\u00fa grafick\u00fa podobu<\/strong>\u00a0webov\u00fdch str\u00e1nok a ich rozlo\u017eenie.\u00a0Pou\u017e\u00edva sa v kombin\u00e1cii s HTML, XHTML alebo XML, kde popisuje sp\u00f4sob zobrazenia jednotliv\u00fdch komponentov.\u00a0Elementy, ktor\u00e9 CSS nedefinuj\u00fa zost\u00e1vaj\u00fa v defaultnej (p\u00f4vodnej) podobe.<\/p>\n

\u0160trukt\u00fara webu, respekt\u00edve dokumentu,\u00a0vytvoren\u00e1 v HTML tak zost\u00e1va oddelen\u00e1<\/strong>\u00a0od vzh\u013eadu.\u00a0V\u010faka tomu z\u00edskavame priestor na jednoduch\u0161ie a komplexnej\u0161ie \u00fapravy aj\u00a0r\u00fdchlej\u0161ie zobrazenie obsahu\u00a0str\u00e1nok.\u00a0Kask\u00e1dov\u00e9 \u0161t\u00fdly sa preto postupom \u010dasu stali \u0161tandardnou n\u00e1hradou p\u00f4vodn\u00e9ho definovania prostredn\u00edctvom HTML tagov.<\/p>\n

V\u00ddHODY A NEV\u00ddHODY KASK\u00c1DOV\u00ddCH \u0160T\u00ddLOV<\/h2>\n

Kask\u00e1dov\u00e9 \u0161t\u00fdly s\u00fa teda modernej\u0161ou\u00a0alternat\u00edvou k p\u00f4vodn\u00e9mu rozvrhnutiu str\u00e1nky prostredn\u00edctvom tabuliek<\/strong>\u00a0a \u0161pecifik\u00e1cii vzh\u013eadu obsahu pomocou zna\u010dkovacieho jazyka HTML.\u00a0Tvorba webu s CSS oproti p\u00f4vodn\u00e9mu rie\u0161eniu pon\u00fakne nasleduj\u00face v\u00fdhody:<\/p>\n

    \n
  • rozsiahlej\u0161ie mo\u017enosti form\u00e1tovania,<\/li>\n
  • jednoduch\u0161ia a r\u00fdchlej\u0161ia aktualiz\u00e1cia \u010di \u00faprava obsahu (napr\u00edklad \u00faprava jedn\u00e9ho nadpisu H2 m\u00f4\u017ee ovplyvni\u0165 v\u0161etky nadpisy H2),<\/li>\n
  • jednoduch\u0161ie spracovanie obsahu v\u010faka oddeleniu \u0161trukt\u00fary od \u0161t\u00fdlu,<\/li>\n
  • ke\u0161ovanie \u0161t\u00fdlov a s t\u00fdm aj r\u00fdchlej\u0161ie na\u010d\u00edtanie str\u00e1nky,<\/li>\n
  • pokro\u010dil\u00e9 \u00fapravy CSS s vyu\u017eit\u00edm JavaScriptu alebo jeho frameworkov,<\/li>\n
  • priestor pre\u00a0responz\u00edvne weby\u00a0a \u0161pecifick\u00e9 \u0161tylovanie pre r\u00f4zne zariadenia a rozl\u00ed\u0161enia.<\/li>\n<\/ul>\n

    Hlavnou nev\u00fdhodou kask\u00e1dov\u00fdch \u0161t\u00fdlov bola v\u017edy r\u00f4zna\u00a0\u00farove\u0148 podpory webov\u00fdch<\/strong>\u00a0prehliada\u010dov.\u00a0Str\u00e1nka sa tak nemusela v\u0161etk\u00fdm pou\u017e\u00edvate\u013eom zobrazova\u0165 rovnako.\u00a0Ur\u010dit\u00fdm probl\u00e9mom bola aj manipul\u00e1cia s vertik\u00e1lnym \u0161t\u00fdlovan\u00edm. S roz\u0161\u00edren\u00edm jadra Chromium a pr\u00edchodom CSS Gridu s\u00fa v\u0161ak oba nedostatky v podstate eliminovan\u00e9.<\/p>\n

    VLASTNOSTI A VYU\u017dITIE CSS<\/h2>\n

    Medzi z\u00e1kladn\u00e9 vlastnosti alebo charakteristiku kask\u00e1dov\u00fdch \u0161t\u00fdlov patr\u00ed dedi\u010dnos\u0165.\u00a0Vlastnos\u0165 deklarovan\u00e1 pre\u00a0rodi\u010dovsk\u00fd element sa v\u010faka tomu pren\u00e1\u0161a<\/strong>\u00a0aj na v\u0161etk\u00fdch potomkov triedy.\u00a0Pokia\u013e napr\u00edklad prirad\u00edme odseku \u010derven\u00fd font, tak t\u00fato farbu automaticky prevezm\u00fa v\u0161etky dedi\u010dn\u00e9 odseky.\u00a0M\u00f4\u017eeme tak meni\u0165 iba vlastnosti, ktor\u00e9 s\u00fa \u0161pecifick\u00e9 len pre jeden prvok.<\/p>\n

    CSS potom\u00a0n\u00e1jde vyu\u017eitie<\/strong>\u00a0pri definovan\u00ed:<\/p>\n

      \n
    • layoutu (rozvrhnutie),<\/li>\n
    • tabuliek,<\/li>\n
    • r\u00e1m\u010dekov,<\/li>\n
    • ve\u013ekosti a obtekania,<\/li>\n
    • fontu a farieb.<\/li>\n<\/ul>\n

      Z\u00c1KLADY SYNTAXE\u00a0CSS<\/h2>\n

      Pred za\u010dat\u00edm pr\u00e1ce s kask\u00e1dov\u00fdmi \u0161t\u00fdlmi je nutn\u00e9\u00a0CSS s\u00fabor s p\u00f4vodn\u00fdm HTML dokumentom<\/strong>\u00a0nejak\u00fdm sp\u00f4sobom prepoji\u0165.\u00a0K tomu m\u00f4\u017eeme prist\u00fapi\u0165 tromi sp\u00f4sobmi.<\/p>\n

      Prv\u00fdm sp\u00f4sobom je pou\u017eitie atrib\u00fatu\u00a0<style><\/em><\/span>\u00a0priamo v HTML.\u00a0Tento sp\u00f4sob v\u0161ak do istej miery eliminuje v\u00fdhodu v podobe vy\u0161\u0161ej preh\u013eadnosti a \u0161trukt\u00farovanosti k\u00f3du.<\/p>\n

      Druh\u00fdm variantom je vlo\u017eenie CSS do hlavi\u010dky webu:\u00a0<style type=\u201ctext\/css\u201c> K\u00f3d \u0161tylovania <\/style><\/em>\u00a0<\/span>.<\/p>\n

      Z\u010faleka\u00a0najelegantnej\u0161ie je v\u0161ak vytvorenie extern\u00e9ho<\/strong>\u00a0s\u00faboru.\u00a0V tomto pr\u00edpade je nutn\u00e9 do HTML dokumentu vlo\u017ei\u0165 odkaz na s\u00fabor:\u00a0<link rel=\u201cstylesheet\u201c ref=\u201cs\u00fabor.css\u201c type=\u201ctext\/css\u201c><\/em><\/span>\u00a0.<\/p>\n

       <\/p>\n

      Kask\u00e1dov\u00e9 \u0161t\u00fdly predstavuj\u00fa pravidl\u00e1, ktor\u00fdmi hovor\u00edme:<\/p>\n

        \n
      1. Kde sa maj\u00fa pou\u017ei\u0165 \u2013 Selektor (identifik\u00e1tor prvku)\n
          \n
        • blok vlastnost\u00ed je uzavret\u00fd do zlo\u017een\u00fdch z\u00e1tvoriek{}<\/code><\/li>\n<\/ul>\n<\/li>\n
        • \u010co maj\u00fa ovplyvni\u0165 vo v\u00fdslednej str\u00e1nke \u2013 Deklar\u00e1cia vlastnosti (defin\u00edcia \u0161t\u00fdlu)\n
            \n
          • n\u00e1zov vlastnosti<\/li>\n
          • odde\u013eova\u010d:<\/code><\/strong><\/li>\n
          • jedna alebo viac hodn\u00f4t (hodnoty sa od seba odde\u013euj\u00fa medzerou\u00a0\u00a0<\/code>)<\/li>\n
          • ukon\u010denie defin\u00edcie;<\/code><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

            Ni\u017e\u0161ie uveden\u00e9 pravidlo sa aplikuje na nadpis 1. \u00farovne, ktor\u00e9mu nastav\u00ed modr\u00fa farbu.<\/p>\n

            \"\"<\/p>\n

            Predpokladom pre tvorbu kask\u00e1dov\u00fdch \u0161t\u00fdlov je spr\u00e1vne \u0161trukt\u00farovan\u00fd dokument (X)HTML alebo XML:<\/p>\n

              \n
            • ozna\u010den\u00e9 jednotliv\u00e9 \u010dasti dokumentu (blokov\u00e9 prvky div)<\/li>\n
            • hierarchia dokumentu (jednotliv\u00e9 \u00farovne nadpisov)<\/li>\n
            • vhodn\u00e9 ozna\u010denie \u00fasekov textov (odsek, adresa, cit\u00e1t…)<\/li>\n
            • platn\u00e9 vz\u00e1jomn\u00e9 v\u00e4zby medzi dokumentmi (odkazy)<\/li>\n<\/ul>\n

              V\u00fdsledn\u00fd dokument by mal by\u0165 preh\u013eadn\u00fd.\u00a0Za\u010d\u00edna\u0165 najd\u00f4le\u017eitej\u0161\u00edmi inform\u00e1ciami a postupova\u0165 k menej d\u00f4le\u017eit\u00fdm.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Kask\u00e1dov\u00e9 \u0161t\u00fdly, anglicky Cascading Style Sheets, je jazyk\u00a0ur\u010duj\u00faci z\u00e1kladn\u00fa grafick\u00fa podobu\u00a0webov\u00fdch str\u00e1nok a ich rozlo\u017eenie.\u00a0Pou\u017e\u00edva sa v kombin\u00e1cii s HTML, XHTML alebo XML, kde popisuje sp\u00f4sob zobrazenia jednotliv\u00fdch komponentov.\u00a0Elementy, ktor\u00e9 CSS nedefinuj\u00fa zost\u00e1vaj\u00fa v defaultnej (p\u00f4vodnej) podobe. \u0160trukt\u00fara webu, respekt\u00edve dokumentu,\u00a0vytvoren\u00e1 v HTML tak zost\u00e1va oddelen\u00e1\u00a0od vzh\u013eadu.\u00a0V\u010faka tomu z\u00edskavame priestor na jednoduch\u0161ie a komplexnej\u0161ie \u00fapravy […]<\/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-144","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/144","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=144"}],"version-history":[{"count":5,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}