{"id":497,"date":"2020-03-11T16:41:09","date_gmt":"2020-03-11T16:41:09","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=497"},"modified":"2020-03-11T16:41:09","modified_gmt":"2020-03-11T16:41:09","slug":"loendur-ehk-automaatne-nummerdamine","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/loendur-ehk-automaatne-nummerdamine\/","title":{"rendered":"Loendur ehk automaatne nummerdamine"},"content":{"raw":"Sarnaselt tekstit\u00f6\u00f6tlusest tuntud automaatsetele nummerdamisv\u00f5imalustele (peat\u00fckid, joonised jms) saab nummerdada ka veebilehe elemente. Selleks saab kasutada omadust counter<\/em>, mis p\u00f5him\u00f5tteliselt on nagu css-muutuja.\r\n\r\nIga loenduri ehk counter\u2019i<\/em> kasutamisel tuleb m\u00e4\u00e4rata, millisest veebilehe osast loenduri v\u00e4\u00e4rtus l\u00e4htestatakse (millise elemendi puhul algab numeratsioon uuesti algusest), millise elemendi juures loenduri v\u00e4\u00e4rtust suurendatakse ning l\u00f5puks ka millise elemendi juures loenduri v\u00e4\u00e4rtust n\u00e4idatakse.\r\n\r\nLoenduri l\u00e4htestab omadus counter-reset<\/em>, mille v\u00e4\u00e4rtusena pannakse kirja l\u00e4htestatava loenduri nimi ja vajadusel ka kasutatav algv\u00e4\u00e4rtus.\r\n\r\nN\u00e4iteks l\u00e4htestame loenduri \u201epealkirjad\u201c elemendi <body><\/code> stiilis \u2013 numeratsioon on \u00fchtne terve veebilehe jooksul:\r\n
body {\r\n  counter-reset: pealkirjad;\r\n}<\/pre>\r\nKui on vaja alustada kindla v\u00e4\u00e4rtusega, siis tuleb lisada soovitud v\u00e4\u00e4rtus (vaikev\u00e4\u00e4rtus on 0, mis t\u00e4hendab, et esimene n\u00e4idatav v\u00e4\u00e4rtus on 1).\r\n\r\nN\u00e4iteks l\u00e4htestame loenduri \u201ejoonised\u201c v\u00e4\u00e4rtusele 3:\r\n
body {\r\n  counter-reset:pealkirjad 3;\r\n}<\/pre>\r\nLoenduri v\u00e4\u00e4rtuse suurendamiseks kasutatakse omadust counter-increment<\/em>.\r\n\r\nN\u00e4iteks suurendame loenduri \u201epealkirjad\u201c v\u00e4\u00e4rtust iga kord kui esineb element <h2><\/code>:\r\n
figcaption {\r\n  counter-increment:joonised;\r\n}<\/pre>\r\nVaikimisi suurendatakse loendurit alati 1 v\u00f5rra. Kasutada tohib ka negatiivseid v\u00e4\u00e4rtuseid ning isegi 0-i. N\u00e4iteks suurendame loendurit \u201ejoonised\u201c kahe v\u00f5rra:\r\n
figcaption {\r\n  counter-increment:joonised 2;\r\n}<\/pre>\r\nLoenduri lisamiseks kasutatakse pseudoklasse ::before<\/em> ja ::after<\/em>, kus loenduri nimi lisatakse content<\/em> \u00fche v\u00e4\u00e4rtusena.\r\n\r\nN\u00e4iteks lisame numbrid ja sildi \u201eJoonis\u201c k\u00f5igile piltidele, mis on elemendi <figure><\/code> t\u00fctarelementideks:\r\n
h2::before {\r\n  content: 'Peat\u00fckk' counter(pealkirjad) ': ';\r\n}<\/pre>\r\nKogu n\u00e4ide:\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  body {\r\n    counter-reset: my-sec-counter 3;\r\n  }\r\n  h2::before {\r\n    counter-increment: my-sec-counter;\r\n    content: \"Peat\u00fckk \" counter(my-sec-counter) \". \";\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n  <h2>HTML<\/h2>\r\n  <h2>CSS<\/h2>\r\n  <h2>JavaScript<\/h2>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n[caption id=\"attachment_498\" align=\"aligncenter\" width=\"312\"]\"Loendatud Loendatud peat\u00fckid[\/caption]","rendered":"
Sarnaselt tekstit\u00f6\u00f6tlusest tuntud automaatsetele nummerdamisv\u00f5imalustele (peat\u00fckid, joonised jms) saab nummerdada ka veebilehe elemente. Selleks saab kasutada omadust counter<\/em>, mis p\u00f5him\u00f5tteliselt on nagu css-muutuja.<\/p>\n
Iga loenduri ehk counter\u2019i<\/em> kasutamisel tuleb m\u00e4\u00e4rata, millisest veebilehe osast loenduri v\u00e4\u00e4rtus l\u00e4htestatakse (millise elemendi puhul algab numeratsioon uuesti algusest), millise elemendi juures loenduri v\u00e4\u00e4rtust suurendatakse ning l\u00f5puks ka millise elemendi juures loenduri v\u00e4\u00e4rtust n\u00e4idatakse.<\/p>\n
Loenduri l\u00e4htestab omadus counter-reset<\/em>, mille v\u00e4\u00e4rtusena pannakse kirja l\u00e4htestatava loenduri nimi ja vajadusel ka kasutatav algv\u00e4\u00e4rtus.<\/p>\n
N\u00e4iteks l\u00e4htestame loenduri \u201epealkirjad\u201c elemendi <body><\/code> stiilis \u2013 numeratsioon on \u00fchtne terve veebilehe jooksul:<\/p>\n
body {\r\n  counter-reset: pealkirjad;\r\n}<\/pre>\n
Kui on vaja alustada kindla v\u00e4\u00e4rtusega, siis tuleb lisada soovitud v\u00e4\u00e4rtus (vaikev\u00e4\u00e4rtus on 0, mis t\u00e4hendab, et esimene n\u00e4idatav v\u00e4\u00e4rtus on 1).<\/p>\n
N\u00e4iteks l\u00e4htestame loenduri \u201ejoonised\u201c v\u00e4\u00e4rtusele 3:<\/p>\n
body {\r\n  counter-reset:pealkirjad 3;\r\n}<\/pre>\n
Loenduri v\u00e4\u00e4rtuse suurendamiseks kasutatakse omadust counter-increment<\/em>.<\/p>\n
N\u00e4iteks suurendame loenduri \u201epealkirjad\u201c v\u00e4\u00e4rtust iga kord kui esineb element <h2><\/code>:<\/p>\n
figcaption {\r\n  counter-increment:joonised;\r\n}<\/pre>\n
Vaikimisi suurendatakse loendurit alati 1 v\u00f5rra. Kasutada tohib ka negatiivseid v\u00e4\u00e4rtuseid ning isegi 0-i. N\u00e4iteks suurendame loendurit \u201ejoonised\u201c kahe v\u00f5rra:<\/p>\n
figcaption {\r\n  counter-increment:joonised 2;\r\n}<\/pre>\n
Loenduri lisamiseks kasutatakse pseudoklasse ::before<\/em> ja ::after<\/em>, kus loenduri nimi lisatakse content<\/em> \u00fche v\u00e4\u00e4rtusena.<\/p>\n
N\u00e4iteks lisame numbrid ja sildi \u201eJoonis\u201c k\u00f5igile piltidele, mis on elemendi <figure><\/code> t\u00fctarelementideks:<\/p>\n
h2::before {\r\n  content: 'Peat\u00fckk' counter(pealkirjad) ': ';\r\n}<\/pre>\n
Kogu n\u00e4ide:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  body {\r\n    counter-reset: my-sec-counter 3;\r\n  }\r\n  h2::before {\r\n    counter-increment: my-sec-counter;\r\n    content: \"Peat\u00fckk \" counter(my-sec-counter) \". \";\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n  <h2>HTML<\/h2>\r\n  <h2>CSS<\/h2>\r\n  <h2>JavaScript<\/h2>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\"Loendatud
Loendatud peat\u00fckid<\/figcaption><\/figure>\n","protected":false},"author":1,"menu_order":9,"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\/497"}],"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":1,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/497\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/497\/revisions\/499"}],"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\/497\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=497"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=497"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=497"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}