{"id":210,"date":"2020-03-02T19:13:45","date_gmt":"2020-03-02T19:13:45","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=210"},"modified":"2020-03-07T22:23:17","modified_gmt":"2020-03-07T22:23:17","slug":"css-oigekiri","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/css-oigekiri\/","title":{"rendered":"CSS \u00f5igekiri"},"content":{"raw":"CSS faili v\u00f5ib nagu HTML dokumendigi luua mistahes tekstiredaktorit kasutades. Nagu HTML dokumendis, v\u00f5i mistahes programmeerimiskeeleski, on kasulik kasutada kommentaariridu. CSS kommentaar kirjutatakse kujul:\r\n
\/* See on kommentaar *\/<\/pre>\r\nCSS abil veebilehe elementidele kujunduse kirjutamisel pannakse kirja kolm t\u00e4htsat osa: selektor (selector<\/em>, mis on reeglina tavaline HTML-elemendi nimetus), omadus (property<\/em>) ja selle v\u00e4\u00e4rtus (value<\/em>). K\u00f5ik see pannakse kirja j\u00e4rgmisel kujul:\r\n
selector {property: value}<\/pre>\r\nN\u00e4iteks:\r\n
body {color: black}<\/pre>\r\nNB! CSS failis ei tohi kasutada html-m\u00e4rgendeid! See t\u00e4hendab, et n\u00e4iteks ei tohi kirjutada <body>!<\/span>\r\n\r\nKui v\u00e4\u00e4rtus koosneb mitmest s\u00f5nast, siis tuleb see jutum\u00e4rkide vahele paigutada! N\u00e4iteks:\r\n
p {font-family: \"sans serif\"}<\/pre>\r\nMitmete omaduste v\u00e4\u00e4rtuste puhul tuleb kirja panna ka m\u00f5\u00f5t\u00fchik. Sellisel juhul ei tohi v\u00e4\u00e4rtuse ja selle m\u00f5\u00f5t\u00fchiku vahele t\u00fchikut j\u00e4tta! N\u00e4iteks:\r\n
p { font-size: 36pt;}<\/pre>\r\nVahetevahel on kasulik erinevate omaduste v\u00e4\u00e4rtustena kasutada konkreetsete v\u00e4\u00e4rtuste asemel d\u00fcnaamiliselt arvutatavaid v\u00e4\u00e4rtuseid. CSS3 pakub arvutusteks calc()<\/em> funktsiooni. Funktsiooni sulgudes pannakse kirja matemaatikaavaldis, mille tulemuseks on soovitud v\u00e4\u00e4rtus. Kasutada saab matemaatika p\u00f5hitehteid (liitmine, lahutamine, korrutamine ja jagamine) ehk operaatoreid +, -, * ja \/. N\u00e4iteks:\r\n
img {\r\n  width: calc(50% - 50px);\r\n}<\/pre>\r\nKorraga v\u00f5ib m\u00e4\u00e4rata v\u00e4\u00e4rtused \u00fche HTML elemendi (selektori) mitmele omadusele, selleks tuleb need lihtsalt semikoolonitega eraldada! N\u00e4iteks:\r\n
p {text-align:center;color:red}<\/pre>\r\nEt stiili kirjeldust kergemini loetavaks muuta, on kasulik iga omadus eraldi reale paigutada! N\u00e4iteks:\r\n
p { \r\n  text-align:center; \r\n  font-family: arial; \r\n  color:red; \r\n}<\/pre>\r\nNB! T\u00fc\u00fcpilise veana unustatakse m\u00f5ne omaduse rea l\u00f5ppu semikoolon ja\/v\u00f5i stiili l\u00f5ppu loogeline sulg lisada. Sellisel juhul stiilileht ei toimi ja kujundus veebilehele ei rakendu!<\/span>","rendered":"
CSS faili v\u00f5ib nagu HTML dokumendigi luua mistahes tekstiredaktorit kasutades. Nagu HTML dokumendis, v\u00f5i mistahes programmeerimiskeeleski, on kasulik kasutada kommentaariridu. CSS kommentaar kirjutatakse kujul:<\/p>\n
\/* See on kommentaar *\/<\/pre>\n
CSS abil veebilehe elementidele kujunduse kirjutamisel pannakse kirja kolm t\u00e4htsat osa: selektor (selector<\/em>, mis on reeglina tavaline HTML-elemendi nimetus), omadus (property<\/em>) ja selle v\u00e4\u00e4rtus (value<\/em>). K\u00f5ik see pannakse kirja j\u00e4rgmisel kujul:<\/p>\n
selector {property: value}<\/pre>\n
N\u00e4iteks:<\/p>\n
body {color: black}<\/pre>\n
NB! CSS failis ei tohi kasutada html-m\u00e4rgendeid! See t\u00e4hendab, et n\u00e4iteks ei tohi kirjutada <body>!<\/span><\/p>\n
Kui v\u00e4\u00e4rtus koosneb mitmest s\u00f5nast, siis tuleb see jutum\u00e4rkide vahele paigutada! N\u00e4iteks:<\/p>\n
p {font-family: \"sans serif\"}<\/pre>\n
Mitmete omaduste v\u00e4\u00e4rtuste puhul tuleb kirja panna ka m\u00f5\u00f5t\u00fchik. Sellisel juhul ei tohi v\u00e4\u00e4rtuse ja selle m\u00f5\u00f5t\u00fchiku vahele t\u00fchikut j\u00e4tta! N\u00e4iteks:<\/p>\n
p { font-size: 36pt;}<\/pre>\n
Vahetevahel on kasulik erinevate omaduste v\u00e4\u00e4rtustena kasutada konkreetsete v\u00e4\u00e4rtuste asemel d\u00fcnaamiliselt arvutatavaid v\u00e4\u00e4rtuseid. CSS3 pakub arvutusteks calc()<\/em> funktsiooni. Funktsiooni sulgudes pannakse kirja matemaatikaavaldis, mille tulemuseks on soovitud v\u00e4\u00e4rtus. Kasutada saab matemaatika p\u00f5hitehteid (liitmine, lahutamine, korrutamine ja jagamine) ehk operaatoreid +, -, * ja \/. N\u00e4iteks:<\/p>\n
img {\r\n  width: calc(50% - 50px);\r\n}<\/pre>\n
Korraga v\u00f5ib m\u00e4\u00e4rata v\u00e4\u00e4rtused \u00fche HTML elemendi (selektori) mitmele omadusele, selleks tuleb need lihtsalt semikoolonitega eraldada! N\u00e4iteks:<\/p>\n
p {text-align:center;color:red}<\/pre>\n
Et stiili kirjeldust kergemini loetavaks muuta, on kasulik iga omadus eraldi reale paigutada! N\u00e4iteks:<\/p>\n
p { \r\n  text-align:center; \r\n  font-family: arial; \r\n  color:red; \r\n}<\/pre>\n
NB! T\u00fc\u00fcpilise veana unustatakse m\u00f5ne omaduse rea l\u00f5ppu semikoolon ja\/v\u00f5i stiili l\u00f5ppu loogeline sulg lisada. Sellisel juhul stiilileht ei toimi ja kujundus veebilehele ei rakendu!<\/span><\/p>\n","protected":false},"author":1,"menu_order":3,"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\/210"}],"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\/210\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/210\/revisions\/340"}],"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\/210\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=210"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=210"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}