{"id":389,"date":"2020-03-10T20:28:59","date_gmt":"2020-03-10T20:28:59","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=389"},"modified":"2020-03-11T13:08:55","modified_gmt":"2020-03-11T13:08:55","slug":"objektide-suurus-ja-paigutus","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/objektide-suurus-ja-paigutus\/","title":{"rendered":"Objektide suurus ja paigutus"},"content":{"raw":"Tavap\u00e4raselt paigutatakse objektid veebilehel \u00fcksteise suhtes nii, nagu nad HTML dokumendis j\u00e4rjestatud ja \u00fcksteise sisse paigutatud on ning originaalsuuruses. Soovi korral\u00a0 saab seda aga muuta. N\u00e4iteks v\u00f5ib m\u00f5ne elemendi kindlale kohale paigutada ning fikseerida ta selliselt, et ta p\u00fcsib kohal isegi veebilehe kerimisel (scroll<\/em>).\r\n

Suurus<\/h1>\r\nObjekti suuruse m\u00e4\u00e4ramiseks on omadused width<\/em> (laius) ja height<\/em> (k\u00f5rgus), millede arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides veebilehitseja akna m\u00f5\u00f5tude suhtes. N\u00e4iteks v\u00f5ime luua piltide jaoks kujundusklassi nimega \"pisipilt\", mille puhul on piltidel kindlad m\u00f5\u00f5tmed 100 X 75 pikslit:\r\n
img.pisipilt {\r\n  width= 100px; \r\n  height= 75px;\r\n}<\/pre>\r\n
Kasti mudel<\/h2>\r\nHTML elemente v\u00f5ib vaadelda kui kaste (box<\/em>). CSS-is kasutatakse elementide disainist ja paigutusest r\u00e4\u00e4kides m\u00f5istet \u201ekasti mudel\u201c (box model<\/em>), mis kirjeldab elementi \u00fcmbritsevat kasti. Kast koosneb tegelikult neljast osast: sisu (content<\/em>), polsterdus (padding<\/em>), raamjoon (border<\/em>) ja veerised (margin<\/em>).\r\n\r\n[caption id=\"attachment_385\" align=\"aligncenter\" width=\"533\"]\"Kasti Kasti mudel (box model)[\/caption]\r\n\r\nNB! T\u00e4htis on meeles pidada, et kasti ehk HTML elemendi tegelikud m\u00f5\u00f5tmed saadakse vaikimisi (nagu varasemate CSS versioonide puhul) k\u00f5igi nelja osa m\u00f5\u00f5tmete liitmisel!<\/span>\r\n\r\nCSS3 v\u00f5imaldab seda p\u00f5him\u00f5tet muuta! Kasutada saab omadust box-sizing<\/em>, millel on kaks v\u00f5imalikku v\u00e4\u00e4rtust:\r\n
    \r\n \t
  • content-box<\/em> \u2013 suurust arvutatakse nagu vana, CSS 2.1 puhul;<\/li>\r\n \t
  • border-box<\/em> \u2013 raamjoone paksus ja polsterdus arvatakse ploki m\u00f5\u00f5tmete sisse.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
    box-sizing: border-box;<\/em><\/p>\r\n\r\n
    Maksimaalsed ja minimaalsed m\u00f5\u00f5tmed<\/h2>\r\nKasutada on ka omadused suurimate ning v\u00e4iksemate v\u00f5imalike m\u00f5\u00f5tmete jaoks: max-width; max-height; min-width<\/em> ja min-height<\/em>. Neid on kasulik tarvitada, kui ei soovita, et kasutaja poolt veebilehitseja akna m\u00f5\u00f5tude muutmisel objektid liialt paigast \u00e4ra l\u00e4hevad.\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikude minimaalseks pikkuseks 200 ja maksimaalseks laiuseks 600 pikslit, et tekstiread kunagi liialt l\u00fchikeseks v\u00f5i pikaks ei muutuks:\r\n
    p {\r\n  min-width: 200px; max-width: 600px;\r\n}<\/pre>\r\n
    Elemendi m\u00f5\u00f5dud v\u00e4iksemad kui tema sisu<\/h2>\r\nSageli juhtub, et objekti sisu on suurem kui m\u00e4\u00e4ratud m\u00f5\u00f5dud (n\u00e4iteks alajaotuse <div><\/code> sisuks on suur hulk teksti v\u00f5i suurem\u00f5\u00f5duline pilt). Sellisel peab otsustama, mida teha m\u00f5\u00f5tudest v\u00e4lja j\u00e4\u00e4va osaga.\r\n\r\nKasutada saab omadust overflow<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
      \r\n \t
    • visible<\/em> \u2013 \u00fcle servade ulatuv sisu n\u00e4idataksegi v\u00e4ljaspool elementi (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
    • hidden<\/em> \u2013 \u00fcle servade j\u00e4\u00e4v osa peidetakse lihtsalt \u00e4ra;<\/li>\r\n \t
    • auto<\/em> \u2013 lisab vajaduse korral kerimisribad (scrollbar);<\/li>\r\n \t
    • scroll<\/em> \u2013lisab kerimisribad.<\/li>\r\n \t
    • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
    • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>)).<\/li>\r\n<\/ul>\r\nN\u00e4iteks loome elemendile <div> kujundusklassi nimega \"aken\", mille m\u00f5\u00f5tudeks on 300 X 300 pikselit ja \u00fcle servade j\u00e4\u00e4va osa jaoks kasutatakse kerimisribasid:\r\n
      div.aken {\r\n  width= 300px;\r\n  height= 300px;\r\n  overflow: auto;\r\n}<\/pre>\r\n[caption id=\"attachment_398\" align=\"aligncenter\" width=\"301\"]\"Elemendile Elemendile on lisatud kerimisribad (scroll)[\/caption]\r\n\r\n[caption id=\"attachment_399\" align=\"aligncenter\" width=\"301\"]\"\u00dcle \u00dcle servade j\u00e4\u00e4v sisu osa peidetakse (hidden)[\/caption]\r\n\r\n[caption id=\"attachment_400\" align=\"aligncenter\" width=\"301\"]\"Kerimisriba Kerimisriba lisatakse vajadusel (auto)[\/caption]\r\n\r\n[caption id=\"attachment_401\" align=\"aligncenter\" width=\"302\"]\"Elemendi Elemendi sisu n\u00e4idatakse \u00fcle servade (visible)[\/caption]\r\n\r\nV\u00f5imalik on \u00fcksteisest s\u00f5ltumatult kontrollida ka horisontaalseid ja vertikaalseid kerimisribasid kasutades omadusi overflow-x<\/em> ja overflow-y.\u00a0<\/em>Omadustele on v\u00f5imalik lisada samu v\u00e4\u00e4rtusi nagu\u00a0overflow\u00a0<\/em>puhul.\r\n\r\nN\u00e4iteks:\r\n
      div.aken { \r\n  width= 300px; \r\n  height= 300px; \r\n  overflow-y: scroll;\r\n  overflow-x: hidden;\r\n}<\/pre>\r\n
      Elemendi k\u00e4rpimine<\/h1>\r\nElemendi k\u00e4rpimiseks kasutatakse omadust clip<\/em>.\r\n\r\nNB! K\u00e4rpida saab objekte, mille paigutus on absoluutselt m\u00e4\u00e4ratud (omadus position<\/em> v\u00e4\u00e4rtus absolute<\/em> v\u00f5i fixed<\/em>)!<\/span>\r\n\r\nVaikimisi on selle omaduse v\u00e4\u00e4rtuseks auto, mille puhul elemendi kuju m\u00e4\u00e4ratakse brauseri poolt. Kasutada saab veel v\u00e4\u00e4rtust rect<\/em>, mis m\u00e4\u00e4rab k\u00e4rpimise:\r\n
      img.crop {\r\n  position:absolute;\r\n  clip:rect(50px 350px 250px 50px);\r\n}\r\n<\/pre>\r\nNB! K\u00e4rpimise v\u00e4\u00e4rtused m\u00e4\u00e4ravad pildi vastavate servade asukoha j\u00e4rjekorras: \u00fclemine, parem, alumine, vasak! Loomulikult on vaja teada pildi m\u00f5\u00f5tmeid!<\/span>\r\n\r\n[caption id=\"attachment_402\" align=\"aligncenter\" width=\"350\"]\"banaanid\" Originaal[\/caption]\r\n\r\n[caption id=\"attachment_403\" align=\"aligncenter\" width=\"350\"]\"banaanid Eeltoodud n\u00e4itele vastavalt k\u00e4rbitud pilt[\/caption]\r\n
      Elemendi kuvamisviis<\/h1>\r\nOsa veebilehe elemente kasutavad \u00e4ra terve vaba ruumi laiuse (neile eelneb ja j\u00e4rgneb reavahetus). Selliseid elemente nimetatakse plokielementideks (block<\/em> element<\/em>), t\u00fc\u00fcpilisteks n\u00e4ideteks on <h1><\/code>, <p><\/code> ja <div><\/code>.\r\n\r\nOsa elemente v\u00f5tavad vaid nii palju ruumi kui h\u00e4davajalik ning ei too kaasa kohustuslikke reavahetusi, neid nimetatakse reaelementideks (inline element<\/em>). T\u00fc\u00fcpilisteks n\u00e4ideteks on <a><\/code> ja <span><\/code>.\r\n\r\nVajaduse korral on v\u00f5imalik seda kuvaviisi muuta, reaelemente muuta plokielementideks ja vastupidi ning m\u00e4\u00e4rata veel teistsuguseidki kuvaviise.\r\n\r\nKasutada on omadus display<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
        \r\n \t
      • inline<\/em> \u2013 elementi kuvatakse reaelemendina (inline<\/em> element) nagu n\u00e4iteks <span><\/code>;<\/li>\r\n \t
      • block<\/em> \u2013 elementi kuvatakse plokielemendina (block<\/em> element) nagu n\u00e4iteks <h1><\/code>;<\/li>\r\n \t
      • inline-block<\/em> \u2013 elementi kuvatakse kui reaelementi, mille sisu vormindatakse kui plokielement;<\/li>\r\n \t
      • run-in<\/em> \u2013 elementi kuvatakse rea- v\u00f5i plokielemendina vastavalt kontekstile;<\/li>\r\n \t
      • list-item<\/em> \u2013 element k\u00e4itub nagu loendi liige <li><\/code>;<\/li>\r\n \t
      • table<\/em> \u2013 element k\u00e4itub nagu tabel;<\/li>\r\n \t
      • inline-table \u2013 element k\u00e4itub nagu reale paigutatud tabel;<\/li>\r\n \t
      • table-caption<\/em> \u2013 element k\u00e4itub nagu <caption><\/code> element;<\/li>\r\n \t
      • table-column-group<\/em> \u2013 element k\u00e4itub nagu <colgroup><\/code> element;<\/li>\r\n \t
      • table-header-group<\/em> \u2013 element k\u00e4itub nagu <thead><\/code> element;<\/li>\r\n \t
      • table-footer-group<\/em> \u2013 element k\u00e4itub nagu <tfoot><\/code> element;<\/li>\r\n \t
      • table-row-group<\/em> \u2013 element k\u00e4itub nagu <tbody><\/code> element;<\/li>\r\n \t
      • table-cell<\/em> \u2013 element k\u00e4itub nagu <td><\/code> element;<\/li>\r\n \t
      • table-column<\/em> \u2013 element k\u00e4itub nagu <col><\/code> element;<\/li>\r\n \t
      • table-row<\/em> \u2013 element k\u00e4itub nagu <tr><\/code> element;<\/li>\r\n \t
      • flex<\/em> \u2013 elementi kuvatakse ploki t\u00fc\u00fcpi flex<\/em>-konteinerina;<\/li>\r\n \t
      • inline-flex<\/em> \u2013 elementi kuvatakse rea t\u00fc\u00fcpi flex<\/em>-konteinerina;<\/li>\r\n \t
      • grid<\/em> \u2013 elementi kuvatakse ploki t\u00fc\u00fcpi grid<\/em>-konteinerina;<\/li>\r\n \t
      • inline-grid<\/em> \u2013 elementi kuvatakse rea t\u00fc\u00fcpi grid<\/em>-konteinerina;<\/li>\r\n \t
      • subgrid<\/em> \u2013 kasutusel grid<\/em>-konteineril, mis ise on grid<\/em>-element, tema ridade ja veergude m\u00f5\u00f5dud v\u00f5etakse vanemobjektilt (parent<\/em>);<\/li>\r\n \t
      • none<\/em> \u2013 elementi ei kuvata \u00fcldse;<\/li>\r\n \t
      • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
      • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>)).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
        span {\r\n  display: block;\r\n}\r\n.valikud {\r\n  display: flex;\r\n}<\/pre>\r\n
        Objektide paigutus<\/h1>\r\nObjekte saab paigutada soovitud kohale ning seda mitme erineva nullpunkti (ankurobjekt) suhtes. M\u00e4\u00e4ramaks, mille suhtes objekti koordinaadid kirja pannakse, kasutatakse omadust position<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
          \r\n \t
        • static<\/em> \u2013 element paigutatakse nii nagu ta teiste suhtes normaalselt paigutuks (see on ka vaikev\u00e4\u00e4rtus). Selline element ignoreerib igasuguseid koordinaatide m\u00e4\u00e4ramisi.<\/li>\r\n \t
        • relative<\/em> \u2013 element paigutatakse mingitele koordinaatidele oma originaalasukoha suhtes.<\/li>\r\n \t
        • absolute<\/em> \u2013 element paigutatakse mingitele koordinaatidele teda sisaldava ploki suhtes (n\u00e4iteks tabeli lahtri suhtes).<\/li>\r\n \t
        • fixed<\/em> \u2013 element paigutatakse mingitele koordinaatidele veebilehitseja akna suhtes<\/li>\r\n<\/ul>\r\nNB! Kasutades position<\/em> omaduse v\u00e4\u00e4rtust relative<\/em> hoitakse veebilehel elemendi originaalkoht originaalsuuruses ikka selle sama elemendi jaoks t\u00fchjana. Element ise nihutatakse teise kohta.<\/span>\r\n\r\nObjekti koordinaadid saab kirja panna erinevatest servadest l\u00e4htudes:\r\n
            \r\n \t
          • left<\/em> \u2013 elemendi vasaku serva kaugus teda sisaldava elemendi vasakust servast;<\/li>\r\n \t
          • right<\/em> \u2013 elemendi parema serva kaugus teda sisaldava elemendi paremast servast;<\/li>\r\n \t
          • top<\/em> \u2013 elemendi \u00fclemise serva kaugus teda sisaldava elemendi \u00fclemisest servast;<\/li>\r\n \t
          • bottom<\/em> \u2013 elemendi alumise serva kaugus teda sisaldava elemendi alumisest servast.<\/li>\r\n<\/ul>\r\nN\u00e4iteks m\u00e4\u00e4rame elemendile <div><\/code> kujundusklass nimega \"paremal\" \u00fclemise ja vasaku serva koordinaadid veebilehitseja akna suhtes:\r\n
            div.paremal {\r\n  position: fixed;\r\n  rght:0px;\r\n  top: 100px;\r\n}\r\n<\/pre>\r\nNB! Kasutades neid vahendeid objektide paigutamiseks on m\u00f5istlik m\u00e4\u00e4rata veebilehele veerised ja polsterduse (et v\u00e4ltida visuaalseid erinevusi erinevate veebilehitsejate kasutamisel)!<\/span>\r\n\r\nN\u00e4iteks:\r\n
            body {\r\n  margin:0; padding:0;\r\n}\r\n<\/pre>\r\n \r\n\r\n \r\n\r\nNB! Selleks, et mingi elemendi sees saaks tema t\u00fctarelemente absoluutsete koordinaatidega paigutada, peaks elemendil olema position<\/em> omaduse v\u00e4\u00e4rtus selline, mis laseb koordinaate kasutada, n\u00e4iteks relative<\/em>. Seejuure pole vaja talle mingeid koordinaate \u00fcldse m\u00e4\u00e4rata \u2013 siis ta asub ikka oma vaikimisi kohal.\r\n\r\nSeda kasutatakse n\u00e4iteks <div><\/code> elementidel, mille sees luuakse CSS-animatsioon.\r\n
            Objekti paigutus z-teljel<\/h1>\r\nKui on tarvis objekte \u00fcksteise peale v\u00f5i alla asetada, siis kasutatakse omadust z-index<\/em> (nagu koordinaadid z-teljel). V\u00e4\u00e4rtustena saab kasutada positiivseid aga ka negatiivseid t\u00e4isarve, vaikev\u00e4\u00e4rtuseks (default<\/em>) on \u201eauto\u201c, mis sisuliselt on 0.\r\n\r\nN\u00e4iteks loome piltide jaoks kujundusklassi nimega \"esiplaan\", mille abil asetame pildid teiste objektide suhtes k\u00f5rgemale kihile (n\u00e4ites on v\u00e4\u00e4rtuseks 10):\r\n
            img.esiplaan {\r\n  z-index: 10;\r\n}<\/pre>\r\nNB! Selle omaduse kasutamisel peab objektile olema m\u00e4\u00e4ratud position omaduse v\u00e4\u00e4rtus relative<\/em>, absolute<\/em> v\u00f5i fixed<\/em>!<\/span>\r\n
            Objekti \u201eh\u00f5ljumine\u201c vasakul\/paremal<\/h1>\r\nNiinimetatud kastikujulisi elemente (box elements<\/em>) saab lasta teiste elementide (n\u00e4iteks teksti) k\u00f5rval vasakul v\u00f5i paremal serval \u201eh\u00f5ljuda\u201c (float<\/em>). Selleks kasutatakse float<\/em> omadust, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
              \r\n \t
            • none<\/em> \u2013 objekt ei \u201eh\u00f5lju\u201c, paikneb seal, kus ta tekstis paigutatud on, see on ka vaikev\u00e4\u00e4rtus;<\/li>\r\n \t
            • inherit<\/em> \u2013 objekt p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>);<\/li>\r\n \t
            • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
            • left<\/em> \u2013 objekt \u201eh\u00f5ljub\u201c vasakul pool;<\/li>\r\n \t
            • right<\/em> \u2013 objekt \u201eh\u00f5ljub\u201c paremal pool.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
              img {\r\n  float: right;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_404\" align=\"aligncenter\" width=\"500\"]\"Paremale Paremale poole paigutatud pilt[\/caption]\r\n\r\nElemendid h\u00f5ljuvad nii kaugel servas kui v\u00f5imalik. K\u00f5ik h\u00f5ljuvale elemendile j\u00e4rgnevad HTML elemendid paigutatakse \u00fcmber tema. H\u00f5ljuvale elemendile eelnevaid elemente see omadus ei m\u00f5juta.\r\n\r\nFloat omadusega on seotud omadus clear<\/em>, mille v\u00e4\u00e4rtus m\u00e4\u00e4rab, kus mingi elemendi k\u00f5rval \u201eh\u00f5ljuvate\u201c objektide kasutamist keelatakse. V\u00f5imalikud v\u00e4\u00e4rtused on:\r\n
                \r\n \t
              • none<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte lubatakse m\u00f5lemale poole (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
              • inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent<\/em>);<\/li>\r\n \t
              • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
              • both<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata kummalegi poole;<\/li>\r\n \t
              • left<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata vasakule poole;<\/li>\r\n \t
              • right<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata paremale poole.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                ul {\r\n  clear: both;\r\n}<\/pre>\r\n
                Vertikaalne joondus<\/h1>\r\nVeebilehe elemente saab ka vertikaalselt joondada, n\u00e4iteks keskele. Kasutatakse omadust vertical-align<\/em>, millel on n\u00e4iteks j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
                  \r\n \t
                • baseline<\/em> \u2013 elemendi baasjoon joondatakse teda sisaldava elemendi (parent<\/em>) baasjoonega (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
                • sub<\/em> \u2013 element joondatakse nagu oleks tegemist alaindeksiga (subscript<\/em>);<\/li>\r\n \t
                • super<\/em> \u2013 element joondatakse nagu oleks tegemist \u00fclaindeksiga (superscript<\/em>);<\/li>\r\n \t
                • top<\/em> \u2013 elemendi \u00fclemine serv joondatakse k\u00f5rgeima samal real asuva elemendi \u00fclaserva j\u00e4rgi;<\/li>\r\n \t
                • middle<\/em> \u2013 element joondatakse teda sisaldava elemendi keskele;<\/li>\r\n \t
                • bottom<\/em> \u2013 element joondatakse k\u00f5ige madalama samal real asuva elemendi j\u00e4rgi;<\/li>\r\n \t
                • text-top<\/em> \u2013 element joondatakse teda sisaldava elemendi (parent<\/em>) teksti fondi \u00fclemise serva j\u00e4rgi;<\/li>\r\n \t
                • text-bottom<\/em> \u2013 element joondatakse teda sisaldava elemendi (parent<\/em>) teksti fondi alumise serva j\u00e4rgi;<\/li>\r\n \t
                • inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent<\/em>);<\/li>\r\n \t
                • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                  img {\r\n  vertical-align: middle;\r\n}\r\n<\/pre>\r\nKasutada saab ka arvv\u00e4\u00e4rtuseid pikslite v\u00f5i protsentidena (line-height<\/em> omaduse v\u00e4\u00e4rtuse suhtes). Sellisel juhul elementi kas kergitatakse (positiivsed v\u00e4\u00e4rtused) v\u00f5i nihutatakse allapoole (negatiivsed v\u00e4\u00e4rtused).\r\n\r\nN\u00e4iteks:\r\n
                  span {\r\n  vertical-align: -25%;\r\n}<\/pre>\r\n ","rendered":"
                  Tavap\u00e4raselt paigutatakse objektid veebilehel \u00fcksteise suhtes nii, nagu nad HTML dokumendis j\u00e4rjestatud ja \u00fcksteise sisse paigutatud on ning originaalsuuruses. Soovi korral\u00a0 saab seda aga muuta. N\u00e4iteks v\u00f5ib m\u00f5ne elemendi kindlale kohale paigutada ning fikseerida ta selliselt, et ta p\u00fcsib kohal isegi veebilehe kerimisel (scroll<\/em>).<\/p>\n
                  Suurus<\/h1>\n
                  Objekti suuruse m\u00e4\u00e4ramiseks on omadused width<\/em> (laius) ja height<\/em> (k\u00f5rgus), millede arvv\u00e4\u00e4rtuse v\u00f5ib m\u00e4\u00e4rata pikkus\u00fchikutes v\u00f5i protsentides veebilehitseja akna m\u00f5\u00f5tude suhtes. N\u00e4iteks v\u00f5ime luua piltide jaoks kujundusklassi nimega “pisipilt”, mille puhul on piltidel kindlad m\u00f5\u00f5tmed 100 X 75 pikslit:<\/p>\n
                  img.pisipilt {\r\n  width= 100px; \r\n  height= 75px;\r\n}<\/pre>\n
                  Kasti mudel<\/h2>\n
                  HTML elemente v\u00f5ib vaadelda kui kaste (box<\/em>). CSS-is kasutatakse elementide disainist ja paigutusest r\u00e4\u00e4kides m\u00f5istet \u201ekasti mudel\u201c (box model<\/em>), mis kirjeldab elementi \u00fcmbritsevat kasti. Kast koosneb tegelikult neljast osast: sisu (content<\/em>), polsterdus (padding<\/em>), raamjoon (border<\/em>) ja veerised (margin<\/em>).<\/p>\n
                  \"Kasti
                  Kasti mudel (box model)<\/figcaption><\/figure>\n
                  NB! T\u00e4htis on meeles pidada, et kasti ehk HTML elemendi tegelikud m\u00f5\u00f5tmed saadakse vaikimisi (nagu varasemate CSS versioonide puhul) k\u00f5igi nelja osa m\u00f5\u00f5tmete liitmisel!<\/span><\/p>\n
                  CSS3 v\u00f5imaldab seda p\u00f5him\u00f5tet muuta! Kasutada saab omadust box-sizing<\/em>, millel on kaks v\u00f5imalikku v\u00e4\u00e4rtust:<\/p>\n
                    \n
                  • content-box<\/em> \u2013 suurust arvutatakse nagu vana, CSS 2.1 puhul;<\/li>\n
                  • border-box<\/em> \u2013 raamjoone paksus ja polsterdus arvatakse ploki m\u00f5\u00f5tmete sisse.<\/li>\n<\/ul>\n
                    N\u00e4iteks:<\/p>\n
                    box-sizing: border-box;<\/em><\/p>\n
                    Maksimaalsed ja minimaalsed m\u00f5\u00f5tmed<\/h2>\n
                    Kasutada on ka omadused suurimate ning v\u00e4iksemate v\u00f5imalike m\u00f5\u00f5tmete jaoks: max-width; max-height; min-width<\/em> ja min-height<\/em>. Neid on kasulik tarvitada, kui ei soovita, et kasutaja poolt veebilehitseja akna m\u00f5\u00f5tude muutmisel objektid liialt paigast \u00e4ra l\u00e4hevad.<\/p>\n
                    N\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikude minimaalseks pikkuseks 200 ja maksimaalseks laiuseks 600 pikslit, et tekstiread kunagi liialt l\u00fchikeseks v\u00f5i pikaks ei muutuks:<\/p>\n
                    p {\r\n  min-width: 200px; max-width: 600px;\r\n}<\/pre>\n
                    Elemendi m\u00f5\u00f5dud v\u00e4iksemad kui tema sisu<\/h2>\n
                    Sageli juhtub, et objekti sisu on suurem kui m\u00e4\u00e4ratud m\u00f5\u00f5dud (n\u00e4iteks alajaotuse <div><\/code> sisuks on suur hulk teksti v\u00f5i suurem\u00f5\u00f5duline pilt). Sellisel peab otsustama, mida teha m\u00f5\u00f5tudest v\u00e4lja j\u00e4\u00e4va osaga.<\/p>\n
                    Kasutada saab omadust overflow<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                      \n
                    • visible<\/em> \u2013 \u00fcle servade ulatuv sisu n\u00e4idataksegi v\u00e4ljaspool elementi (vaikev\u00e4\u00e4rtus);<\/li>\n
                    • hidden<\/em> \u2013 \u00fcle servade j\u00e4\u00e4v osa peidetakse lihtsalt \u00e4ra;<\/li>\n
                    • auto<\/em> \u2013 lisab vajaduse korral kerimisribad (scrollbar);<\/li>\n
                    • scroll<\/em> \u2013lisab kerimisribad.<\/li>\n
                    • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                    • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>)).<\/li>\n<\/ul>\n
                      N\u00e4iteks loome elemendile <div> kujundusklassi nimega “aken”, mille m\u00f5\u00f5tudeks on 300 X 300 pikselit ja \u00fcle servade j\u00e4\u00e4va osa jaoks kasutatakse kerimisribasid:<\/p>\n
                      div.aken {\r\n  width= 300px;\r\n  height= 300px;\r\n  overflow: auto;\r\n}<\/pre>\n
                      \"Elemendile
                      Elemendile on lisatud kerimisribad (scroll)<\/figcaption><\/figure>\n
                      \"\u00dcle
                      \u00dcle servade j\u00e4\u00e4v sisu osa peidetakse (hidden)<\/figcaption><\/figure>\n
                      \"Kerimisriba
                      Kerimisriba lisatakse vajadusel (auto)<\/figcaption><\/figure>\n
                      \"Elemendi
                      Elemendi sisu n\u00e4idatakse \u00fcle servade (visible)<\/figcaption><\/figure>\n
                      V\u00f5imalik on \u00fcksteisest s\u00f5ltumatult kontrollida ka horisontaalseid ja vertikaalseid kerimisribasid kasutades omadusi overflow-x<\/em> ja overflow-y.\u00a0<\/em>Omadustele on v\u00f5imalik lisada samu v\u00e4\u00e4rtusi nagu\u00a0overflow\u00a0<\/em>puhul.<\/p>\n
                      N\u00e4iteks:<\/p>\n
                      div.aken { \r\n  width= 300px; \r\n  height= 300px; \r\n  overflow-y: scroll;\r\n  overflow-x: hidden;\r\n}<\/pre>\n
                      Elemendi k\u00e4rpimine<\/h1>\n
                      Elemendi k\u00e4rpimiseks kasutatakse omadust clip<\/em>.<\/p>\n
                      NB! K\u00e4rpida saab objekte, mille paigutus on absoluutselt m\u00e4\u00e4ratud (omadus position<\/em> v\u00e4\u00e4rtus absolute<\/em> v\u00f5i fixed<\/em>)!<\/span><\/p>\n
                      Vaikimisi on selle omaduse v\u00e4\u00e4rtuseks auto, mille puhul elemendi kuju m\u00e4\u00e4ratakse brauseri poolt. Kasutada saab veel v\u00e4\u00e4rtust rect<\/em>, mis m\u00e4\u00e4rab k\u00e4rpimise:<\/p>\n
                      img.crop {\r\n  position:absolute;\r\n  clip:rect(50px 350px 250px 50px);\r\n}\r\n<\/pre>\n
                      NB! K\u00e4rpimise v\u00e4\u00e4rtused m\u00e4\u00e4ravad pildi vastavate servade asukoha j\u00e4rjekorras: \u00fclemine, parem, alumine, vasak! Loomulikult on vaja teada pildi m\u00f5\u00f5tmeid!<\/span><\/p>\n
                      \"banaanid\"
                      Originaal<\/figcaption><\/figure>\n
                      \"banaanid
                      Eeltoodud n\u00e4itele vastavalt k\u00e4rbitud pilt<\/figcaption><\/figure>\n
                      Elemendi kuvamisviis<\/h1>\n
                      Osa veebilehe elemente kasutavad \u00e4ra terve vaba ruumi laiuse (neile eelneb ja j\u00e4rgneb reavahetus). Selliseid elemente nimetatakse plokielementideks (block<\/em> element<\/em>), t\u00fc\u00fcpilisteks n\u00e4ideteks on <h1><\/code>, <p><\/code> ja <div><\/code>.<\/p>\n
                      Osa elemente v\u00f5tavad vaid nii palju ruumi kui h\u00e4davajalik ning ei too kaasa kohustuslikke reavahetusi, neid nimetatakse reaelementideks (inline element<\/em>). T\u00fc\u00fcpilisteks n\u00e4ideteks on <a><\/code> ja <span><\/code>.<\/p>\n
                      Vajaduse korral on v\u00f5imalik seda kuvaviisi muuta, reaelemente muuta plokielementideks ja vastupidi ning m\u00e4\u00e4rata veel teistsuguseidki kuvaviise.<\/p>\n
                      Kasutada on omadus display<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                        \n
                      • inline<\/em> \u2013 elementi kuvatakse reaelemendina (inline<\/em> element) nagu n\u00e4iteks <span><\/code>;<\/li>\n
                      • block<\/em> \u2013 elementi kuvatakse plokielemendina (block<\/em> element) nagu n\u00e4iteks <h1><\/code>;<\/li>\n
                      • inline-block<\/em> \u2013 elementi kuvatakse kui reaelementi, mille sisu vormindatakse kui plokielement;<\/li>\n
                      • run-in<\/em> \u2013 elementi kuvatakse rea- v\u00f5i plokielemendina vastavalt kontekstile;<\/li>\n
                      • list-item<\/em> \u2013 element k\u00e4itub nagu loendi liige <li><\/code>;<\/li>\n
                      • table<\/em> \u2013 element k\u00e4itub nagu tabel;<\/li>\n
                      • inline-table \u2013 element k\u00e4itub nagu reale paigutatud tabel;<\/li>\n
                      • table-caption<\/em> \u2013 element k\u00e4itub nagu <caption><\/code> element;<\/li>\n
                      • table-column-group<\/em> \u2013 element k\u00e4itub nagu <colgroup><\/code> element;<\/li>\n
                      • table-header-group<\/em> \u2013 element k\u00e4itub nagu <thead><\/code> element;<\/li>\n
                      • table-footer-group<\/em> \u2013 element k\u00e4itub nagu <tfoot><\/code> element;<\/li>\n
                      • table-row-group<\/em> \u2013 element k\u00e4itub nagu <tbody><\/code> element;<\/li>\n
                      • table-cell<\/em> \u2013 element k\u00e4itub nagu <td><\/code> element;<\/li>\n
                      • table-column<\/em> \u2013 element k\u00e4itub nagu <col><\/code> element;<\/li>\n
                      • table-row<\/em> \u2013 element k\u00e4itub nagu <tr><\/code> element;<\/li>\n
                      • flex<\/em> \u2013 elementi kuvatakse ploki t\u00fc\u00fcpi flex<\/em>-konteinerina;<\/li>\n
                      • inline-flex<\/em> \u2013 elementi kuvatakse rea t\u00fc\u00fcpi flex<\/em>-konteinerina;<\/li>\n
                      • grid<\/em> \u2013 elementi kuvatakse ploki t\u00fc\u00fcpi grid<\/em>-konteinerina;<\/li>\n
                      • inline-grid<\/em> \u2013 elementi kuvatakse rea t\u00fc\u00fcpi grid<\/em>-konteinerina;<\/li>\n
                      • subgrid<\/em> \u2013 kasutusel grid<\/em>-konteineril, mis ise on grid<\/em>-element, tema ridade ja veergude m\u00f5\u00f5dud v\u00f5etakse vanemobjektilt (parent<\/em>);<\/li>\n
                      • none<\/em> \u2013 elementi ei kuvata \u00fcldse;<\/li>\n
                      • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                      • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>)).<\/li>\n<\/ul>\n
                        N\u00e4iteks:<\/p>\n
                        span {\r\n  display: block;\r\n}\r\n.valikud {\r\n  display: flex;\r\n}<\/pre>\n
                        Objektide paigutus<\/h1>\n
                        Objekte saab paigutada soovitud kohale ning seda mitme erineva nullpunkti (ankurobjekt) suhtes. M\u00e4\u00e4ramaks, mille suhtes objekti koordinaadid kirja pannakse, kasutatakse omadust position<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                          \n
                        • static<\/em> \u2013 element paigutatakse nii nagu ta teiste suhtes normaalselt paigutuks (see on ka vaikev\u00e4\u00e4rtus). Selline element ignoreerib igasuguseid koordinaatide m\u00e4\u00e4ramisi.<\/li>\n
                        • relative<\/em> \u2013 element paigutatakse mingitele koordinaatidele oma originaalasukoha suhtes.<\/li>\n
                        • absolute<\/em> \u2013 element paigutatakse mingitele koordinaatidele teda sisaldava ploki suhtes (n\u00e4iteks tabeli lahtri suhtes).<\/li>\n
                        • fixed<\/em> \u2013 element paigutatakse mingitele koordinaatidele veebilehitseja akna suhtes<\/li>\n<\/ul>\n
                          NB! Kasutades position<\/em> omaduse v\u00e4\u00e4rtust relative<\/em> hoitakse veebilehel elemendi originaalkoht originaalsuuruses ikka selle sama elemendi jaoks t\u00fchjana. Element ise nihutatakse teise kohta.<\/span><\/p>\n
                          Objekti koordinaadid saab kirja panna erinevatest servadest l\u00e4htudes:<\/p>\n
                            \n
                          • left<\/em> \u2013 elemendi vasaku serva kaugus teda sisaldava elemendi vasakust servast;<\/li>\n
                          • right<\/em> \u2013 elemendi parema serva kaugus teda sisaldava elemendi paremast servast;<\/li>\n
                          • top<\/em> \u2013 elemendi \u00fclemise serva kaugus teda sisaldava elemendi \u00fclemisest servast;<\/li>\n
                          • bottom<\/em> \u2013 elemendi alumise serva kaugus teda sisaldava elemendi alumisest servast.<\/li>\n<\/ul>\n
                            N\u00e4iteks m\u00e4\u00e4rame elemendile <div><\/code> kujundusklass nimega “paremal” \u00fclemise ja vasaku serva koordinaadid veebilehitseja akna suhtes:<\/p>\n
                            div.paremal {\r\n  position: fixed;\r\n  rght:0px;\r\n  top: 100px;\r\n}\r\n<\/pre>\n
                            NB! Kasutades neid vahendeid objektide paigutamiseks on m\u00f5istlik m\u00e4\u00e4rata veebilehele veerised ja polsterduse (et v\u00e4ltida visuaalseid erinevusi erinevate veebilehitsejate kasutamisel)!<\/span><\/p>\n
                            N\u00e4iteks:<\/p>\n
                            body {\r\n  margin:0; padding:0;\r\n}\r\n<\/pre>\n
                             <\/p>\n
                             <\/p>\n
                            NB! Selleks, et mingi elemendi sees saaks tema t\u00fctarelemente absoluutsete koordinaatidega paigutada, peaks elemendil olema position<\/em> omaduse v\u00e4\u00e4rtus selline, mis laseb koordinaate kasutada, n\u00e4iteks relative<\/em>. Seejuure pole vaja talle mingeid koordinaate \u00fcldse m\u00e4\u00e4rata \u2013 siis ta asub ikka oma vaikimisi kohal.<\/p>\n
                            Seda kasutatakse n\u00e4iteks <div><\/code> elementidel, mille sees luuakse CSS-animatsioon.<\/p>\n
                            Objekti paigutus z-teljel<\/h1>\n
                            Kui on tarvis objekte \u00fcksteise peale v\u00f5i alla asetada, siis kasutatakse omadust z-index<\/em> (nagu koordinaadid z-teljel). V\u00e4\u00e4rtustena saab kasutada positiivseid aga ka negatiivseid t\u00e4isarve, vaikev\u00e4\u00e4rtuseks (default<\/em>) on \u201eauto\u201c, mis sisuliselt on 0.<\/p>\n
                            N\u00e4iteks loome piltide jaoks kujundusklassi nimega “esiplaan”, mille abil asetame pildid teiste objektide suhtes k\u00f5rgemale kihile (n\u00e4ites on v\u00e4\u00e4rtuseks 10):<\/p>\n
                            img.esiplaan {\r\n  z-index: 10;\r\n}<\/pre>\n
                            NB! Selle omaduse kasutamisel peab objektile olema m\u00e4\u00e4ratud position omaduse v\u00e4\u00e4rtus relative<\/em>, absolute<\/em> v\u00f5i fixed<\/em>!<\/span><\/p>\n
                            Objekti \u201eh\u00f5ljumine\u201c vasakul\/paremal<\/h1>\n
                            Niinimetatud kastikujulisi elemente (box elements<\/em>) saab lasta teiste elementide (n\u00e4iteks teksti) k\u00f5rval vasakul v\u00f5i paremal serval \u201eh\u00f5ljuda\u201c (float<\/em>). Selleks kasutatakse float<\/em> omadust, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                              \n
                            • none<\/em> \u2013 objekt ei \u201eh\u00f5lju\u201c, paikneb seal, kus ta tekstis paigutatud on, see on ka vaikev\u00e4\u00e4rtus;<\/li>\n
                            • inherit<\/em> \u2013 objekt p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>);<\/li>\n
                            • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                            • left<\/em> \u2013 objekt \u201eh\u00f5ljub\u201c vasakul pool;<\/li>\n
                            • right<\/em> \u2013 objekt \u201eh\u00f5ljub\u201c paremal pool.<\/li>\n<\/ul>\n
                              N\u00e4iteks:<\/p>\n
                              img {\r\n  float: right;\r\n}\r\n<\/pre>\n
                              \"Paremale
                              Paremale poole paigutatud pilt<\/figcaption><\/figure>\n
                              Elemendid h\u00f5ljuvad nii kaugel servas kui v\u00f5imalik. K\u00f5ik h\u00f5ljuvale elemendile j\u00e4rgnevad HTML elemendid paigutatakse \u00fcmber tema. H\u00f5ljuvale elemendile eelnevaid elemente see omadus ei m\u00f5juta.<\/p>\n
                              Float omadusega on seotud omadus clear<\/em>, mille v\u00e4\u00e4rtus m\u00e4\u00e4rab, kus mingi elemendi k\u00f5rval \u201eh\u00f5ljuvate\u201c objektide kasutamist keelatakse. V\u00f5imalikud v\u00e4\u00e4rtused on:<\/p>\n
                                \n
                              • none<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte lubatakse m\u00f5lemale poole (vaikev\u00e4\u00e4rtus);<\/li>\n
                              • inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent<\/em>);<\/li>\n
                              • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                              • both<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata kummalegi poole;<\/li>\n
                              • left<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata vasakule poole;<\/li>\n
                              • right<\/em> \u2013 \u201eh\u00f5ljuvaid\u201c objekte ei lubata paremale poole.<\/li>\n<\/ul>\n
                                N\u00e4iteks:<\/p>\n
                                ul {\r\n  clear: both;\r\n}<\/pre>\n
                                Vertikaalne joondus<\/h1>\n
                                Veebilehe elemente saab ka vertikaalselt joondada, n\u00e4iteks keskele. Kasutatakse omadust vertical-align<\/em>, millel on n\u00e4iteks j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                                  \n
                                • baseline<\/em> \u2013 elemendi baasjoon joondatakse teda sisaldava elemendi (parent<\/em>) baasjoonega (vaikev\u00e4\u00e4rtus);<\/li>\n
                                • sub<\/em> \u2013 element joondatakse nagu oleks tegemist alaindeksiga (subscript<\/em>);<\/li>\n
                                • super<\/em> \u2013 element joondatakse nagu oleks tegemist \u00fclaindeksiga (superscript<\/em>);<\/li>\n
                                • top<\/em> \u2013 elemendi \u00fclemine serv joondatakse k\u00f5rgeima samal real asuva elemendi \u00fclaserva j\u00e4rgi;<\/li>\n
                                • middle<\/em> \u2013 element joondatakse teda sisaldava elemendi keskele;<\/li>\n
                                • bottom<\/em> \u2013 element joondatakse k\u00f5ige madalama samal real asuva elemendi j\u00e4rgi;<\/li>\n
                                • text-top<\/em> \u2013 element joondatakse teda sisaldava elemendi (parent<\/em>) teksti fondi \u00fclemise serva j\u00e4rgi;<\/li>\n
                                • text-bottom<\/em> \u2013 element joondatakse teda sisaldava elemendi (parent<\/em>) teksti fondi alumise serva j\u00e4rgi;<\/li>\n
                                • inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent<\/em>);<\/li>\n
                                • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n
                                  N\u00e4iteks:<\/p>\n
                                  img {\r\n  vertical-align: middle;\r\n}\r\n<\/pre>\n
                                  Kasutada saab ka arvv\u00e4\u00e4rtuseid pikslite v\u00f5i protsentidena (line-height<\/em> omaduse v\u00e4\u00e4rtuse suhtes). Sellisel juhul elementi kas kergitatakse (positiivsed v\u00e4\u00e4rtused) v\u00f5i nihutatakse allapoole (negatiivsed v\u00e4\u00e4rtused).<\/p>\n
                                  N\u00e4iteks:<\/p>\n
                                  span {\r\n  vertical-align: -25%;\r\n}<\/pre>\n
                                   <\/p>\n","protected":false},"author":1,"menu_order":5,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/389"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":4,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/389\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/389\/revisions\/451"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/389\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=389"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=389"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=389"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}