{"id":339,"date":"2020-03-07T23:12:26","date_gmt":"2020-03-07T23:12:26","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=339"},"modified":"2020-12-15T16:15:12","modified_gmt":"2020-12-15T16:15:12","slug":"mootuhikud","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/mootuhikud\/","title":{"rendered":"M\u00f5\u00f5t\u00fchikud"},"content":{"raw":"Mitmele CSS omaduste v\u00e4\u00e4rtuste puhul tuleb kirja panna pikkusv\u00e4\u00e4rtus. N\u00e4iteks <em>width, margin, padding, font-size<\/em> jt.\r\n\r\nSellisel juhul j\u00e4rgneb v\u00e4\u00e4rtusele m\u00f5\u00f5t\u00fchik (t\u00fchikut ei tohi v\u00e4\u00e4rtuse ja m\u00f5\u00f5t\u00fchiku vahele j\u00e4tta). N\u00e4iteks: 20px, 3cm, 4em jne.\r\n\r\nM\u00f5ne CSS omaduse puhul saab kasutada ka negatiivseid v\u00e4\u00e4rtusi.\r\n\r\nM\u00f5\u00f5t\u00fchikud jaotatakse kahte suuremasse gruppi: absoluutsed ja suhtelised m\u00f5\u00f5t\u00fchikud.\r\n<h1>Absoluutsed m\u00f5\u00f5t\u00fchikud<\/h1>\r\nAbsoluutsetel m\u00f5\u00f5t\u00fchikutel on kindel v\u00e4\u00e4rtus ning k\u00f5ik nad kuvatakse alati kindlalt just sama suurusega. Absoluutsete m\u00f5\u00f5t\u00fchikute kasutamisel tuleb olla ettevaatlik kuna ekraanide suurused ja resolutsioonid on veebilehe k\u00fclastajatel varieeruvad. Absoluutsed m\u00f5\u00f5t\u00fchikud:\r\n<ul>\r\n \t<li><em>cm<\/em> - sentimeeter<\/li>\r\n \t<li><em>mm<\/em> - millimeeter<\/li>\r\n \t<li><em>in (inches)<\/em> - toll = 2.54cm<\/li>\r\n \t<li><em>pt<\/em> - punkt = 1\/72 tolli<\/li>\r\n \t<li><em>pc<\/em> - pica = 12 punkti<\/li>\r\n<\/ul>\r\nAbsoluutseid \u00fchikuid on m\u00f5istlik kasutada vaid seal, kus v\u00f5ib nende peale kindel olla. N\u00e4iteks kasutada punkti tr\u00fckkimiseks m\u00f5eldud kujunduses teksti fondi suuruse ja reavahe m\u00e4\u00e4ramisel ning millimeetrit ja sentimeetrit piltide suuruse m\u00e4\u00e4ramisel.\r\n\r\nAbsoluutsete m\u00f5\u00f5t\u00fchikute alla kuulub ka piksel:\r\n<ul>\r\n \t<li><em>px<\/em> - piksel = 1\/96in<\/li>\r\n<\/ul>\r\nKuna aga piksli suurus oleneb osaliselt ka kasutaja ekraani resolutsioonist, siis saab teda m\u00f5ningal m\u00e4\u00e4ral lugeda ka suhteliseks \u00fchikuks. Pikslid sobivad h\u00e4sti kasutamiseks koos rastergraafikaga, n\u00e4iteks s\u00e4ttimiseks tekstiblokki sama laiaks kui taustapilt.\r\n<h1>Suhtelised m\u00f5\u00f5t\u00fchikud<\/h1>\r\nSuhtelised m\u00f5\u00f5t\u00fchikud on defineeritud suhtega m\u00f5nesse absoluutsesse m\u00f5\u00f5t\u00fchikusse. Suhtelisi m\u00f5\u00f5t\u00fchikuid on parem kasutada juhtudel, kui on teada, et veebilehte k\u00fclastatakse mitmete erinevate seadmetega. Suhtelised m\u00f5\u00f5t\u00fchikud:\r\n<ul>\r\n \t<li><em>em<\/em> - suurus oleneb omadusest font-size (2em on kaks korda suurem kui parasjagu on fondi suurus).<\/li>\r\n \t<li><em>ex<\/em> - suurus oleneb kasutusel oleva fondi k\u00f5rgusest (kasutatakse v\u00e4ga harva).<\/li>\r\n \t<li><em>ch<\/em> - suurus oleneb numbri 0 laiusest.<\/li>\r\n \t<li><em>rem<\/em> - suurus oleneb juurelemendi suurusest.<\/li>\r\n \t<li><em>vw<\/em> - suurus on 1% brauseri akna laiusest.<\/li>\r\n \t<li><em>vh<\/em> - suurus on 1% brauseri akna k\u00f5rgusest.<\/li>\r\n \t<li><em>vmin<\/em> - suurus on 1% brauseri v\u00e4iksemast dimensioonist.<\/li>\r\n \t<li><em>vmax<\/em> - suur on 1% brauseri suuremast dimensioonist.<\/li>\r\n \t<li><em>%<\/em> - suurus oleneb elemendist, milles antud element sisaldub.<\/li>\r\n<\/ul>\r\nEnim leiab suhtelistest m\u00f5\u00f5t\u00fchikutest kasutust <em>em<\/em> ja <em>rem<\/em>.\r\n\r\nAntud m\u00f5\u00f5t\u00fchikud sobivad h\u00e4sti pikkuste m\u00e4\u00e4ramiseks ekraanil. Teksti suurusega seotud \u00fchikud nagu <em>em<\/em> sobivad sinna, kus m\u00f5\u00f5tmed peavad olema proportsionaalsed tekstiga. Eriti oluline on arvestades seda, et enamik brausereid pakuvad v\u00f5imalust teksti suurust vastavalt soovile muuta. Nii n\u00e4iteks j\u00e4\u00e4b taandrida, mille suuruseks 2em ka siis, kui fonti suurendada 5 korda, ikka kahe t\u00e4hepikkuse laiuseks samas, kui m\u00f5\u00f5duga 20px m\u00e4\u00e4ratud taane kahaneb vaevum\u00e4rgatavaks.\r\n<div id=\"gtx-trans\" style=\"position: absolute; left: 310px; top: 1053.16px;\">\r\n<div class=\"gtx-trans-icon\"><\/div>\r\n<\/div>","rendered":"<p>Mitmele CSS omaduste v\u00e4\u00e4rtuste puhul tuleb kirja panna pikkusv\u00e4\u00e4rtus. N\u00e4iteks <em>width, margin, padding, font-size<\/em> jt.<\/p>\n<p>Sellisel juhul j\u00e4rgneb v\u00e4\u00e4rtusele m\u00f5\u00f5t\u00fchik (t\u00fchikut ei tohi v\u00e4\u00e4rtuse ja m\u00f5\u00f5t\u00fchiku vahele j\u00e4tta). N\u00e4iteks: 20px, 3cm, 4em jne.<\/p>\n<p>M\u00f5ne CSS omaduse puhul saab kasutada ka negatiivseid v\u00e4\u00e4rtusi.<\/p>\n<p>M\u00f5\u00f5t\u00fchikud jaotatakse kahte suuremasse gruppi: absoluutsed ja suhtelised m\u00f5\u00f5t\u00fchikud.<\/p>\n<h1>Absoluutsed m\u00f5\u00f5t\u00fchikud<\/h1>\n<p>Absoluutsetel m\u00f5\u00f5t\u00fchikutel on kindel v\u00e4\u00e4rtus ning k\u00f5ik nad kuvatakse alati kindlalt just sama suurusega. Absoluutsete m\u00f5\u00f5t\u00fchikute kasutamisel tuleb olla ettevaatlik kuna ekraanide suurused ja resolutsioonid on veebilehe k\u00fclastajatel varieeruvad. Absoluutsed m\u00f5\u00f5t\u00fchikud:<\/p>\n<ul>\n<li><em>cm<\/em> &#8211; sentimeeter<\/li>\n<li><em>mm<\/em> &#8211; millimeeter<\/li>\n<li><em>in (inches)<\/em> &#8211; toll = 2.54cm<\/li>\n<li><em>pt<\/em> &#8211; punkt = 1\/72 tolli<\/li>\n<li><em>pc<\/em> &#8211; pica = 12 punkti<\/li>\n<\/ul>\n<p>Absoluutseid \u00fchikuid on m\u00f5istlik kasutada vaid seal, kus v\u00f5ib nende peale kindel olla. N\u00e4iteks kasutada punkti tr\u00fckkimiseks m\u00f5eldud kujunduses teksti fondi suuruse ja reavahe m\u00e4\u00e4ramisel ning millimeetrit ja sentimeetrit piltide suuruse m\u00e4\u00e4ramisel.<\/p>\n<p>Absoluutsete m\u00f5\u00f5t\u00fchikute alla kuulub ka piksel:<\/p>\n<ul>\n<li><em>px<\/em> &#8211; piksel = 1\/96in<\/li>\n<\/ul>\n<p>Kuna aga piksli suurus oleneb osaliselt ka kasutaja ekraani resolutsioonist, siis saab teda m\u00f5ningal m\u00e4\u00e4ral lugeda ka suhteliseks \u00fchikuks. Pikslid sobivad h\u00e4sti kasutamiseks koos rastergraafikaga, n\u00e4iteks s\u00e4ttimiseks tekstiblokki sama laiaks kui taustapilt.<\/p>\n<h1>Suhtelised m\u00f5\u00f5t\u00fchikud<\/h1>\n<p>Suhtelised m\u00f5\u00f5t\u00fchikud on defineeritud suhtega m\u00f5nesse absoluutsesse m\u00f5\u00f5t\u00fchikusse. Suhtelisi m\u00f5\u00f5t\u00fchikuid on parem kasutada juhtudel, kui on teada, et veebilehte k\u00fclastatakse mitmete erinevate seadmetega. Suhtelised m\u00f5\u00f5t\u00fchikud:<\/p>\n<ul>\n<li><em>em<\/em> &#8211; suurus oleneb omadusest font-size (2em on kaks korda suurem kui parasjagu on fondi suurus).<\/li>\n<li><em>ex<\/em> &#8211; suurus oleneb kasutusel oleva fondi k\u00f5rgusest (kasutatakse v\u00e4ga harva).<\/li>\n<li><em>ch<\/em> &#8211; suurus oleneb numbri 0 laiusest.<\/li>\n<li><em>rem<\/em> &#8211; suurus oleneb juurelemendi suurusest.<\/li>\n<li><em>vw<\/em> &#8211; suurus on 1% brauseri akna laiusest.<\/li>\n<li><em>vh<\/em> &#8211; suurus on 1% brauseri akna k\u00f5rgusest.<\/li>\n<li><em>vmin<\/em> &#8211; suurus on 1% brauseri v\u00e4iksemast dimensioonist.<\/li>\n<li><em>vmax<\/em> &#8211; suur on 1% brauseri suuremast dimensioonist.<\/li>\n<li><em>%<\/em> &#8211; suurus oleneb elemendist, milles antud element sisaldub.<\/li>\n<\/ul>\n<p>Enim leiab suhtelistest m\u00f5\u00f5t\u00fchikutest kasutust <em>em<\/em> ja <em>rem<\/em>.<\/p>\n<p>Antud m\u00f5\u00f5t\u00fchikud sobivad h\u00e4sti pikkuste m\u00e4\u00e4ramiseks ekraanil. Teksti suurusega seotud \u00fchikud nagu <em>em<\/em> sobivad sinna, kus m\u00f5\u00f5tmed peavad olema proportsionaalsed tekstiga. Eriti oluline on arvestades seda, et enamik brausereid pakuvad v\u00f5imalust teksti suurust vastavalt soovile muuta. Nii n\u00e4iteks j\u00e4\u00e4b taandrida, mille suuruseks 2em ka siis, kui fonti suurendada 5 korda, ikka kahe t\u00e4hepikkuse laiuseks samas, kui m\u00f5\u00f5duga 20px m\u00e4\u00e4ratud taane kahaneb vaevum\u00e4rgatavaks.<\/p>\n<div id=\"gtx-trans\" style=\"position: absolute; left: 310px; top: 1053.16px;\">\n<div class=\"gtx-trans-icon\"><\/div>\n<\/div>\n","protected":false},"author":1,"menu_order":4,"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":29,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/339"}],"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":6,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/339\/revisions"}],"predecessor-version":[{"id":901,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/339\/revisions\/901"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/29"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/339\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=339"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=339"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}