{"id":146,"date":"2023-10-01T15:21:49","date_gmt":"2023-10-01T13:21:49","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=146"},"modified":"2023-10-02T07:43:44","modified_gmt":"2023-10-02T05:43:44","slug":"selektory-a-triedy-kaskadovych-stylov","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=146","title":{"rendered":"3. SELEKTORY A TRIEDY KASK\u00c1DOV\u00ddCH \u0160T\u00ddLOV"},"content":{"rendered":"

Syntax CSS je zalo\u017een\u00e1 na princ\u00edpe selektora a deklar\u00e1cie.\u00a0Selektory vo svojej podstate\u00a0ur\u010duj\u00fa konkr\u00e9tne pravidl\u00e1 vzh\u013eadu \u010di\u017ee prvky<\/strong> , ku ktor\u00fdm sa bud\u00fa vz\u0165ahova\u0165 r\u00f4zne vlastnosti a priradia im (deklaruj\u00fa) \u0161pecifick\u00fa hodnotu.\u00a0Ka\u017ed\u00e1 deklar\u00e1cia je potom oddelen\u00e1 spojovn\u00edkom.<\/p>\n

V k\u00f3de zapisujeme ako: Selektor {atrib\u00fat:hodnota;}.<\/p>\n

\"\"<\/p>\n

Pr\u00edklad:<\/p>\n

HTML:\u00a0 \u00a0 \u00a0 \u00a0<H2>Nadpis druhej \u00farovne<\/H2><\/span><\/strong>
\nCSS:\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 H2 {color:blue;}<\/span><\/strong><\/p>\n

Na miesto selektora\u00a0m\u00f4\u017eeme pou\u017ei\u0165 rad elementov , okrem spom\u00ednan\u00fdch nadpisov napr\u00edklad body\u00a0,\u00a0p\u00a0,\u00a0div\u00a0alebo\u00a0triedy\u00a0, pri\u010dom je mo\u017en\u00e9 ur\u010di\u0165 vlastnosti aj pre viac prvkov s\u00fa\u010dasne:\u00a0H2, H3, H4 {color:blue;}\u00a0.\u00a0Text v zlo\u017een\u00fdch z\u00e1tvork\u00e1ch potom naz\u00fdvame blok deklar\u00e1ci\u00ed.<\/p>\n

Hodnotu deklar\u00e1cie, m\u00f4\u017eeme e\u0161te nav\u00fd\u0161i\u0165 pou\u017eit\u00edm pr\u00edkazu\u00a0!important<\/em><\/span>\u00a0<\/strong>, ktor\u00fd zabra\u0148uje jej \u010fal\u0161\u00edm \u00faprav\u00e1m.\u00a0Pou\u017eitie pr\u00edkazu by sme v\u0161ak mali zv\u00e1\u017ei\u0165, napr\u00edklad\u00a0AMP\u00a0weby ho z d\u00f4vodu\u00a0optimaliz\u00e1cie k\u00f3du<\/strong>\u00a0v\u00f4bec neumo\u017e\u0148uj\u00fa.\u00a0Pri syntaxii je vhodn\u00e9 spomen\u00fa\u0165 aj koment\u00e1re, ktor\u00e9 v tomto pr\u00edpade uzatv\u00e1rame do lom\u00edtok a hviezd: \/**\/<\/em>\u00a0.<\/p>\n

Rovnak\u00fdm sp\u00f4sobom m\u00f4\u017eeme pracova\u0165 aj s triedami.\u00a0Triedy\u00a0u\u013eah\u010duj\u00fa opakovan\u00e9 pou\u017eitie rovnak\u00e9ho \u0161t\u00fdlovania<\/strong>\u00a0na r\u00f4zne \u010dasti obsahu.\u00a0Pokia\u013e tak napr\u00edklad m\u00e1me vo v\u00e4\u010d\u0161ine obsahu pou\u017eit\u00fa \u010diernu farbu fontu, ale potrebujeme aj nieko\u013eko odsekov nap\u00edsa\u0165 zelene, m\u00f4\u017eeme si pre tento \u00fakon vytvori\u0165 triedu, ktor\u00fa n\u00e1sledne prirad\u00edme potrebn\u00fdm textom.\u00a0Triedu zapisujeme s bodkou na za\u010diatku:\u00a0.trieda{atrib\u00fat:hodnota;}<\/em><\/span>\u00a0<\/strong>.<\/p>\n

 <\/p>\n

\n

Selektory<\/h2>\n
\n
\n

Selektory ur\u010duj\u00fa prvky, pre ktor\u00e9 m\u00e1 defin\u00edcia plati\u0165. \u010ealej s\u00fa uveden\u00e9 najpou\u017e\u00edvanej\u0161ie selektory CSS:<\/p>\n

1.Univerz\u00e1lny selektor<\/h3>\n

Vyber\u00e1 \u013eubovo\u013en\u00fd element (v\u0161etky elementy v danej hierarchii).<\/p>\n

Pr\u00edklad CSS:<\/p>\n

*<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
2. Typov\u00fd selektor<\/h3>\n
Vyber\u00e1 element pod\u013ea typu.<\/p>\n
\u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
<p><\/strong> text odseku <\/p><\/strong><\/span><\/pre>\n
Pr\u00edklad CSS:<\/p>\n
p<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
3. Selektor triedy<\/h3>\n
Vyberie element ozna\u010den\u00fd definovanou triedou.<\/p>\n
\u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
<p class=\"odsek\"<\/strong> >text odstavca<\/p>\r\n<p class=\"poznamka\"<\/strong> >text pozn\u00e1mky<\/p>\r\n<div class=\"poznamka\"<\/strong> >text pozn\u00e1mky<\/div><\/span><\/pre>\n
Pr\u00edklad CSS:<\/p>\n
.odsek<\/strong> {\r\n  color: blue;\r\n}\r\n.poznamka<\/strong> {\r\n  color: red;\r\n}\r\ndiv.poznamka<\/strong> {\r\n  border: 1px solid red;\r\n  padding: 2px;\r\n}<\/span><\/pre>\n
Na str\u00e1nke m\u00f4\u017ee by\u0165 \u013eubovo\u013en\u00e9 mno\u017estvo prvkov s rovnakou triedou.<\/p>\n
4. Selektor pseudo-triedy<\/h3>\n
Pr\u00edklad pou\u017eitia CSS na v\u0161etky nenav\u0161t\u00edven\u00e9 odkazy:<\/p>\n
a:link<\/strong> {\r\n  color: #039;\r\n}<\/span><\/pre>\n
Pr\u00edklad pou\u017eitia CSS na v\u0161etky nav\u0161t\u00edven\u00e9 odkazy:<\/p>\n
a:visited<\/strong> {\r\n  color: #930;\r\n}<\/span><\/pre>\n
Pr\u00edklad pou\u017eitia dynamick\u00e9ho CSS aktivovanej vo chv\u00edli, ke\u010f pou\u017e\u00edvate\u013e na odkaz nabehne kurzorom my\u0161i (:hover pou\u017e\u00edvajte a\u017e za :link a :visited):<\/p>\n
a:hover<\/strong> {\r\n  color: #f30;\r\n  text-decoration: underline;\r\n}<\/span><\/pre>\n
Pr\u00edklad pou\u017eitia dynamick\u00e9ho CSS aktivovan\u00e9ho prvku, ktor\u00fd je pripraven\u00fd pre pr\u00edjem vstupu zo vstupn\u00e9ho zariadenia napr. na ktor\u00fd je pr\u00e1ve kliknut\u00e9 my\u0161ou, stla\u010den\u00fd kl\u00e1ves Enter alebo medzern\u00edk (:active pou\u017e\u00edvajte a\u017e za :link, :visited a :hover):<\/p>\n
a:active<\/strong> {\r\n  color: #f30;\r\n  text-decoration: underline;\r\n}<\/span><\/pre>\n
Pr\u00edklad pou\u017eitia dynamick\u00e9ho CSS pri v\u00fdbere odkazu, tla\u010didla, v\u00fdberov\u00e9ho zoznamu a \u010fal\u0161\u00edch formul\u00e1rov\u00fdch prvkov u\u017e\u00edvate\u013eom napr. pomocou kl\u00e1vesnice:<\/p>\n
a:focus<\/strong> {background: yellow;}\r\na:focus<\/strong> :hover {background: white;}<\/span><\/pre>\n
Prv\u00fd podriaden\u00fd prvok in\u00e9ho prvku:<\/p>\n
p:first-child<\/strong> {text-indent: 2em;}\r\np:first-child<\/strong> em {font-weight: bold;}<\/span><\/pre>\n
Prv\u00e1, druh\u00e1, predposledn\u00e1 a posledn\u00e1 bunka tabu\u013eky:<\/p>\n
 td:first-child<\/strong> {width: 20%;}\r\n td:nth-child(2)<\/strong> { width: 60%; }\r\n td:nth-last-child(2)<\/strong> {width: 40%;} td: last-child<\/strong> {width: 20%;}\r\n<\/span><\/pre>\n
Ka\u017ed\u00fd tret\u00ed riadok „counter“ (3n) \u2013 pozor za\u010diatok je nula, preto je posun „offset“ nastaven\u00fd na jedni\u010dku (+1):<\/p>\n
tr:nth-child( 3n<\/strong> +1) {\r\n    background-color: #eee;\r\n}<\/span><\/pre>\n
Pr\u00edklad r\u00f4zneho nastavenia dvojice \u00favodzoviek pre cel\u00fd dokument a atrib\u00fat prvku <cite> v jazyku sloven\u010dina a angli\u010dtina:<\/p>\n
:lang(sk)<\/strong> {quotes: '\u201e' '\u201c' \"\u201a\" \"'\"}\r\n:lang(en)<\/strong> {quotes: '\u201c' '\u201d' \"'\" \"'\"}<\/span><\/pre>\n
cite[ lang=\"sk\"<\/strong> ] {quotes: '\u201e' '\u201c' \"\u201a\" \"'\"}\r\ncite[ lang=\"en\"<\/strong> ] {quotes: '\u201c' '\u201d' \"'\" \"'\"}<\/span><\/pre>\n
5. Selektor pseudo-elementu<\/h3>\n
CSS3 od seba ozna\u010den\u00edm odli\u0161uje pseudo-triedy, ktor\u00e9 pou\u017e\u00edvaj\u00fa jednu dvojbodku\u00a0:<\/code>a pseudo-elementy u ktor\u00fdch sa pou\u017e\u00edva „dvojit\u00e1 dvojbodka“\u00a0::<\/code>(v CSS2 sa pri v\u0161etk\u00fdch pseudo-prvkoch pou\u017e\u00edva dvojbodka jednoduch\u00e1).<\/p>\n
IE8 podporuje iba CSS2, od IE9+ je u\u017e pln\u00e1 podpora CSS3 pseudo prvkov.\u00a0\"enlightened\"<\/p>\n
Pr\u00edklad prv\u00e9ho riadku odseku:<\/p>\n
p:first-line<\/strong> {text-transform: uppercase;}<\/span><\/pre>\n
Pr\u00edklad pou\u017eitia CSS na prv\u00e9 p\u00edsmeno odseku (vyberie iba \u010das\u0165 skuto\u010dn\u00e9ho elementu):<\/p>\n
p:first-letter<\/strong> {\r\n  font-size: 300%;\r\n  font-weight: bold;\r\n  float: left;\r\n  margin-right: .1em;\r\n}<\/span><\/pre>\n
Vlastnos\u0165 content<\/h4>\n
Vlastnos\u0165 content umo\u017e\u0148uje vklada\u0165\u00a0textov\u00fd obsah<\/strong>\u00a0a je mo\u017en\u00e9 ju pou\u017e\u00edva\u0165 v spojen\u00ed so pseudo-elementmi :before a :after.\u00a0Vlastnos\u0165 content nie je mo\u017en\u00e9 aplikova\u0165 na „neobsahov\u00e9“ elementy ako je napr. <input>, <select>, <img> at\u010f.\u00a0\"enlightened\"<\/p>\n
Pr\u00edklad \u00favodzoviek definovan\u00fdch na \u00farovni odseku a z\u00e1rove\u0148 okolo neho vlo\u017een\u00fdch \u201epr\u00e1zdnych\u201c \u00favodzoviek:<\/p>\n
p {quotes: '\u201e' '\u201c' \"\u201a\" \"'\"}\r\np:before<\/strong> { content<\/strong> : no-open-quote}\r\np:after<\/strong> { content<\/strong> : no-close-quote}\r\ncite:before<\/strong> { content<\/strong> : open-quote}\r\ncite:after<\/strong> { content<\/strong> : close-quote}<\/span><\/pre>\n
Pr\u00edklad pridania nov\u00e9ho obsahu „medzery a \u0161\u00edpky“ za prvok triedy .slideshow-next:<\/p>\n
.slideshow-next {\r\n  position: reletive\r\n}\r\n.slideshow-next: after<\/b> {\r\n   content<\/strong> : ' >';\r\n  display: block;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 40px;\r\n  height: 40px;\r\n  background: url('design.png') no-repeat -100px 6px;\r\n}<\/span><\/pre>\n
6. Selektor identifik\u00e1tora<\/h3>\n
Vyberie element ozna\u010den\u00fd definovan\u00fdm identifik\u00e1torom.<\/p>\n
\u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
<div id=\"zahlavie\"<\/strong> >Z\u00e1hlavie<\/div><\/span><\/pre>\n
Pr\u00edklad CSS:<\/p>\n
#zahlavie<\/strong> {\r\n  color: green;\r\n}\r\n<\/span><\/pre>\n
V jednom dokumente (str\u00e1nke) je mo\u017en\u00e9\u00a0id<\/strong>\u00a0priradi\u0165 iba jedin\u00e9mu prvku.<\/p>\n
7. Selektor n\u00e1sledn\u00edka<\/h3>\n
Vyberie element n\u00e1sledn\u00edka, ktor\u00fd je vnoren\u00fd do elementu predka bez oh\u013eadu na h\u013abku vnorenia.<\/p>\n
\u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
<div>\r\n  < img<\/strong> src=\"logo.gif\" alt=\"Logo\" \/<\/strong> >\r\n  <p>\r\n    Podrobnosti pozri <a href=\"#\">\u0161tatistika pr\u00edstupnosti\r\n     < img<\/strong> src=\"stat.gif\" alt=\"\u0160tatistika\" \/<\/strong> ><\/a>.\r\n  <\/p>\r\n<\/div><\/span><\/pre>\n
Pr\u00edklad CSS:<\/p>\n
div img<\/strong> {\r\n  border: none;\r\n}\r\n<\/span><\/pre>\n
8. Selektor potomka<\/h3>\n
Vyberie element potomka, ktor\u00fd je vnoren\u00fd\u00a0priamo<\/strong>\u00a0do elementu rodi\u010da.<\/p>\n
\u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
<div>\r\n  < img<\/strong> src=\"logo.gif\" alt=\"Logo\" \/<\/strong> >\r\n  <p>\r\n    Podrobnosti pozri <a href=\"#\">\u0161tatistika pr\u00edstupnosti\r\n     <img src=\"stat.gif\" alt=\"\u0160tatistika\" \/><\/a>.\r\n  <\/p>\r\n<\/div><\/span><\/pre>\n
Pr\u00edklad CSS:<\/p>\n
div > img<\/strong> {\r\n  border: none;\r\n}\r\n<\/span><\/pre>\n
Pozn\u00e1mky<\/strong>\u00a0:<\/p>\n
    \n
  • medzera medzi elementmi a ostrou z\u00e1tvorkou je nepovinn\u00e1<\/li>\n
  • \"\"nepoporuje\u00a0IE6-<\/span><\/li>\n<\/ul>\n
    9. Selektor v\u0161eobecn\u00e9ho s\u00farodenca<\/h3>\n
    Vyberie druh\u00fd definovan\u00fd element, ktor\u00fd je s\u00farodencom prv\u00e9ho definovan\u00e9ho elementu.\u00a0Obaja s\u00farodenci musia ma\u0165 rovnak\u00e9ho rodi\u010da, musia le\u017ea\u0165 na rovnakej \u00farovni v hierarchii dokumentu, ale nemusia le\u017ea\u0165 bezprostredne za sebou.<\/p>\n
    \u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
    <body>\r\n  <h1>Nadpis<\/h1>\r\n  <p>Prv\u00fd odsek<\/p>\r\n  <p>Druh\u00fd odsek<\/p>\r\n  <h2>Nadpis 2. \u00farovne<\/h2>\r\n  < p<\/strong> >Druh\u00fd odsek<\/ p<\/strong> >\r\n  < p<\/strong> >Druh\u00fd odsek<\/ p<\/strong> >\r\n  <h3>Nadpis 3. \u00farovne<\/h3>\r\n  < p<\/strong> >Druh\u00fd odsek<\/ p<\/strong> >\r\n  < p<\/strong> >Druh\u00fd odsek<\/ p<\/strong> >\r\n<\/body><\/span><\/pre>\n
    Pr\u00edklad CSS:<\/p>\n
    h2 ~ p<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
    V tomto pr\u00edklade sa deklarovan\u00e1 vlastnos\u0165 odseku nepou\u017eije sk\u00f4r, ako pri nadpise 2. \u00farovne.<\/p>\n
    Pozn\u00e1mky<\/strong>\u00a0:<\/p>\n
      \n
    • medzera medzi elementmi a znakom tilda je nepovinn\u00e1<\/li>\n
    • \"\"nepoporuje\u00a0IE6-<\/span><\/li>\n<\/ul>\n
      10. Selektor susediaceho s\u00farodenca<\/h3>\n
      Vyberie druh\u00fd definovan\u00fd element, ktor\u00fd je s\u00farodencom prv\u00e9ho definovan\u00e9ho elementu.\u00a0Obaja s\u00farodenci musia ma\u0165 rovnak\u00e9ho rodi\u010da, musia le\u017ea\u0165 na rovnakej \u00farovni v hierarchii dokumentu a musia le\u017ea\u0165 bezprostredne za sebou.<\/p>\n
      \u010cas\u0165 zdrojov\u00e9ho k\u00f3du:<\/p>\n
      <body>\r\n  <h1>Nadpis<\/h1>\r\n  <p>Prv\u00fd odsek<\/p>\r\n  <p>Druh\u00fd odsek<\/p>\r\n  <h2>Nadpis 2. \u00farovne<\/h2>\r\n  < p<\/strong> >Druh\u00fd odsek<\/ p<\/strong> >\r\n  <p>Druh\u00fd odsek<\/p>\r\n  <h3>Nadpis 3. \u00farovne<\/h3>\r\n  <p>Druh\u00fd odsek<\/p>\r\n  <p>Druh\u00fd odsek<\/p>\r\n<\/body>\r\n<\/span><\/pre>\n
      Pr\u00edklad CSS:<\/p>\n
      h2 + p<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
      Pozn\u00e1mky<\/strong>\u00a0:<\/p>\n
        \n
      • medzera medzi elementmi a znakom plus je nepovinn\u00e1<\/li>\n
      • \"\"nepoporuje\u00a0IE6-<\/span><\/li>\n<\/ul>\n
        11. Selektory atrib\u00fatov (parametrov)<\/h3>\n
        Vyberie element, obsahuj\u00faci definovan\u00fd atrib\u00fat, hodnotu atrib\u00fatu, alebo jeho \u010das\u0165.<\/p>\n
        Pr\u00edklad pou\u017eitia CSS iba na elementy\u00a0a<\/code>obsahuj\u00face atrib\u00fat\u00a0title<\/code>s hodnotou\u00a0odkaz<\/code>:<\/p>\n
        a[title=\"odkaz\"]<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
        Pr\u00edklad pou\u017eitia CSS iba na elementy\u00a0span<\/code>obsahuj\u00face atrib\u00fat\u00a0lang<\/code>, ktor\u00e9ho hodnoty za\u010d\u00ednaj\u00fa re\u0165azcom\u00a0en<\/code>(en-us, en-uk):<\/p>\n
        span[lang|=\"en\"]<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
        Pr\u00edklad pou\u017eitia CSS iba na elementy\u00a0p<\/code>obsahuj\u00face atrib\u00fat\u00a0class<\/code>, ktor\u00e9ho hodnota obsahuje re\u0165azec\u00a0nadpis<\/code>(nadpis1, nadpis2, ale aj podnadpis):<\/p>\n
        p[class*=\"nadpis\"]<\/strong> {\r\n  color: blue;\r\n}<\/span><\/pre>\n
        Pr\u00edklad pou\u017eitia CSS iba na elementy\u00a0p<\/code>obsahuj\u00face atrib\u00fat\u00a0class<\/code>, ktor\u00e9ho hodnota za\u010d\u00edna re\u0165azcom\u00a0nadpis<\/code>(nadpis1, nadpis2):<\/p>\n
        p[class^=\"nadpis\"]<\/strong> {\r\n  color: blue;\r\n}<\/span><\/pre>\n
        Pr\u00edklad pou\u017eitia CSS iba na elementy\u00a0p<\/code>obsahuj\u00face atrib\u00fat\u00a0class<\/code>, ktor\u00e9ho hodnota kon\u010d\u00ed re\u0165azcom\u00a0\u00a0pis<\/code>(nadpis, podnadpis):<\/p>\n
        p[class$=\"pis\"]<\/strong> {\r\n  color: blue;\r\n}\r\n\r\n<\/span><\/pre>\n
        Deklar\u00e1cia<\/h2>\n
        \n
        \n
        Jednoduch\u00e1<\/h3>\n
        Jednoduch\u00e1 deklar\u00e1cia prira\u010fuje vlastnosti jedn\u00e9mu selektoru.<\/p>\n
        h1<\/strong> {\r\n  color: blue;\r\n}\r\n<\/span><\/pre>\n
        Viacn\u00e1sobn\u00e1<\/h3>\n
        Viacn\u00e1sobn\u00e1 deklar\u00e1cia prira\u010fuje vlastnosti viacer\u00fdm selektorom oddelen\u00fdm \u010diarkou.<\/p>\n
        h1, h2, h3, h4, h5, h6<\/strong> {\r\n  color: blue;\r\n}\r\n\r\n<\/span><\/pre>\n
        Koment\u00e1re<\/h2>\n
        \n
        \n
        Prehliada\u010de koment\u00e1re ignoruj\u00fa.\u00a0Koment\u00e1re sl\u00fa\u017eia iba autorovi na zap\u00edsanie pozn\u00e1mok napr. k lep\u0161ej orient\u00e1cii v k\u00f3de.<\/p>\n
        \/* odsek *\/<\/strong>\r\np {\r\n  color: blue; \/* modra farba *\/<\/strong> \r\n  font-size: 90%; \/* ve\u013ekos\u0165 textu *\/<\/strong>\r\n}\r\n<\/span><\/pre>\n
        Pozn\u00e1mka<\/strong>\u00a0:
        \nKoment\u00e1re je vhodn\u00e9 p\u00edsa\u0165 bez diakritiky.<\/p>\n<\/div>\n<\/div>\n
        \u00a0<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        Syntax CSS je zalo\u017een\u00e1 na princ\u00edpe selektora a deklar\u00e1cie.\u00a0Selektory vo svojej podstate\u00a0ur\u010duj\u00fa konkr\u00e9tne pravidl\u00e1 vzh\u013eadu \u010di\u017ee prvky , ku ktor\u00fdm sa bud\u00fa vz\u0165ahova\u0165 r\u00f4zne vlastnosti a priradia im (deklaruj\u00fa) \u0161pecifick\u00fa hodnotu.\u00a0Ka\u017ed\u00e1 deklar\u00e1cia je potom oddelen\u00e1 spojovn\u00edkom. V k\u00f3de zapisujeme ako: Selektor {atrib\u00fat:hodnota;}. Pr\u00edklad: HTML:\u00a0 \u00a0 \u00a0 \u00a0<H2>Nadpis druhej \u00farovne<\/H2> CSS:\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 […]<\/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-146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/146","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=146"}],"version-history":[{"count":12,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}