{"id":208,"date":"2020-03-02T19:10:36","date_gmt":"2020-03-02T19:10:36","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=208"},"modified":"2020-05-04T08:09:54","modified_gmt":"2020-05-04T08:09:54","slug":"css-linkimine-html-dokumendiga","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/css-linkimine-html-dokumendiga\/","title":{"rendered":"CSS linkimine HTML dokumendiga"},"content":{"raw":"Nagu eespool mainitud, saab kasutada v\u00e4list stiililehte (css fail), HTML dokumendi sisemist stiili ja reastiili. J\u00e4rgnevalt vaatame, kuidas neid veebilehega seotakse.\r\n

Reastiili rakendamine<\/h1>\r\nHarvematel juhtudel, kui on tarvis mingit \u00fchte, konkreetset veebilehe elementi eriliselt kujundada, kasutatakse reastiili (Inline Style).\r\n\r\nReastiili kasutamisel l\u00e4heb palju CSS v\u00f5imalusi raisku, sest stiil luuakse konkreetse HTML elemendi algusm\u00e4rgendisse.\r\n\r\nReastiili kasutamiseks tuleb vastava HTML elemendi algusm\u00e4rgendisse lisada atribuut style<\/code> j\u00e4rgmisel kujul:\r\n
<elemendinimi style=\"css stiil\"><\/pre>\r\nN\u00e4iteks m\u00e4\u00e4rame \u00fche tekstil\u00f5igule erilise v\u00e4rvi:\r\n
<p style=\"color: sienna\">\r\n  See on \u00fcks l\u00f5ik\r\n<\/p><\/pre>\r\n
Sisemiste stiili rakendamine<\/h1>\r\nOlukorras, kus on tarvis kujundada vaid \u00fcks konkreetne veebileht, v\u00f5ib kasutada sisemist stiili (Internal Style Sheet). Selleks lisatakse HTML-dokumendi p\u00e4isesse (elemendi <head><\/code> sisse) element <style><\/code>:\r\n
<style>\r\n  veebilehe erinevate elementide kujundusreeglid\r\n<\/style><\/pre>\r\nK\u00f5ik p\u00e4ises loodud stiilid rakenduvad automaatselt k\u00f5igile vastavatele elementidele. Erandiks on vaid need, millele on m\u00e4\u00e4ratud kindel kujundusklass! Kujundusklasside (class) kasutamisel peab HTML dokumendis soovitud elementide algusm\u00e4rgendisse soovitud klassi kirja panema. N\u00e4iteks:\r\n
<span class=\"markeriga\">R\u00f5hutamist vajav fraas<\/span><\/pre>\r\nSelleks, et \u00fchele html-elemendile rakendada korraga mitu defineeritud klassi, tuleb nad jutum\u00e4rkide vahele kirjutades \u00fcksteisest t\u00fchikuga eraldada. N\u00e4iteks:\r\n
<p class=\"keskel paks\">\r\n  See on l\u00f5ik. \r\n<\/p><\/pre>\r\nSelles n\u00e4ites on l\u00f5igule rakendatud klassid keskel ja paks!\r\n\r\nHTML-elementidele v\u00f5ib n\u00e4iteks hiires\u00fcndmustele reageerides erinevaid klasse (kujundusi) rakendada! Selleks lisatakse html-koodis elemendile vastavad v\u00e4\u00e4rtused s\u00fcndmuste atribuutidele. N\u00e4iteks m\u00e4\u00e4rame pildielemendile erinevad klassid hiirega pildile liikumisel ja pildilt v\u00e4ljumisel:\r\n
<img src=\u201cpilt.jpg\u201c alt=\u201cilus pilt\u201c onmouseover=\"this.className='klass1'\" onmouseout=\"this.className='klass2'\"><\/pre>\r\nNB! Klassi nimi on paigutatud \u00fclakomade vahele, sest jutum\u00e4rgid \u00fcmbritsevad tervet atribuudi v\u00e4\u00e4rtust!<\/span>\r\n
V\u00e4lise stiililehe rakendamine<\/h1>\r\nV\u00e4lise stiili (External Style Sheet) tarvitamine on kasulik, kui on tarvis kujundada tervet veebilehestikku (mitmeid erinevaid lehti).\r\n\r\nV\u00e4lise stiili kasutamiseks tuleb HTML-dokumendi p\u00e4isesse (elemendi <head> sisse) lisada kindlal kujul link vajalikule CSS failile:\r\n
<link rel=\"stylesheet\" href=\"stiililehe_URL\"><\/pre>\r\nSeega v\u00f5iks vastav element v\u00e4lja n\u00e4ha n\u00e4iteks:\r\n
<link rel=\"stylesheet\" href=\"omastiil.css\"><\/pre>\r\nKujundusklasside kasutamine toimub v\u00e4lise stiililehe puhul samamoodi kui sisemise stiili korralgi!\r\n
Mitme v\u00e4lise CSS faili \u00fchendamine<\/h2>\r\n\u00dcsna sageli on tarvis \u00fchendada kujundus, mis pannakse kirja mitmes erinevas css failis. Selleks on v\u00f5imalik lisada HTML-dokumenti viited mitmele CSS-failile kuid on v\u00f5imalik ka importida \u00fche faili sisu teise! Selleks tuleks CSS-faili lisada import<\/em> reegel (rule<\/em>)!\r\n\r\nN\u00e4iteks:\r\n
@import url(\"teinecssfail.css\")<\/pre>\r\nNB! See k\u00e4sk tuleb paigutada CSS-failis k\u00f5ige esimeseks reegliks!<\/span>\r\n\r\nLisada saab ka komadega eraldatud loendi erinevatest v\u00e4ljundseadmetest (media queries), mille jaoks vastav css-fail loodud on.\r\n\r\nN\u00e4iteks:\r\n
@import url(\"suurekraan.css\") projection, tv;<\/pre>\r\nNB! Kui veebilehitseja ei toeta \u00fchtki loetletud v\u00e4ljundseadet, siis vastavat css-faili \u00fcldse ei laetagi.<\/span>\r\n\r\n ","rendered":"
Nagu eespool mainitud, saab kasutada v\u00e4list stiililehte (css fail), HTML dokumendi sisemist stiili ja reastiili. J\u00e4rgnevalt vaatame, kuidas neid veebilehega seotakse.<\/p>\n
Reastiili rakendamine<\/h1>\n
Harvematel juhtudel, kui on tarvis mingit \u00fchte, konkreetset veebilehe elementi eriliselt kujundada, kasutatakse reastiili (Inline Style).<\/p>\n
Reastiili kasutamisel l\u00e4heb palju CSS v\u00f5imalusi raisku, sest stiil luuakse konkreetse HTML elemendi algusm\u00e4rgendisse.<\/p>\n
Reastiili kasutamiseks tuleb vastava HTML elemendi algusm\u00e4rgendisse lisada atribuut style<\/code> j\u00e4rgmisel kujul:<\/p>\n
<elemendinimi style=\"css stiil\"><\/pre>\n
N\u00e4iteks m\u00e4\u00e4rame \u00fche tekstil\u00f5igule erilise v\u00e4rvi:<\/p>\n
<p style=\"color: sienna\">\r\n  See on \u00fcks l\u00f5ik\r\n<\/p><\/pre>\n
Sisemiste stiili rakendamine<\/h1>\n
Olukorras, kus on tarvis kujundada vaid \u00fcks konkreetne veebileht, v\u00f5ib kasutada sisemist stiili (Internal Style Sheet). Selleks lisatakse HTML-dokumendi p\u00e4isesse (elemendi <head><\/code> sisse) element <style><\/code>:<\/p>\n
<style>\r\n  veebilehe erinevate elementide kujundusreeglid\r\n<\/style><\/pre>\n
K\u00f5ik p\u00e4ises loodud stiilid rakenduvad automaatselt k\u00f5igile vastavatele elementidele. Erandiks on vaid need, millele on m\u00e4\u00e4ratud kindel kujundusklass! Kujundusklasside (class) kasutamisel peab HTML dokumendis soovitud elementide algusm\u00e4rgendisse soovitud klassi kirja panema. N\u00e4iteks:<\/p>\n
<span class=\"markeriga\">R\u00f5hutamist vajav fraas<\/span><\/pre>\n
Selleks, et \u00fchele html-elemendile rakendada korraga mitu defineeritud klassi, tuleb nad jutum\u00e4rkide vahele kirjutades \u00fcksteisest t\u00fchikuga eraldada. N\u00e4iteks:<\/p>\n
<p class=\"keskel paks\">\r\n  See on l\u00f5ik. \r\n<\/p><\/pre>\n
Selles n\u00e4ites on l\u00f5igule rakendatud klassid keskel ja paks!<\/p>\n
HTML-elementidele v\u00f5ib n\u00e4iteks hiires\u00fcndmustele reageerides erinevaid klasse (kujundusi) rakendada! Selleks lisatakse html-koodis elemendile vastavad v\u00e4\u00e4rtused s\u00fcndmuste atribuutidele. N\u00e4iteks m\u00e4\u00e4rame pildielemendile erinevad klassid hiirega pildile liikumisel ja pildilt v\u00e4ljumisel:<\/p>\n
<img src=\u201cpilt.jpg\u201c alt=\u201cilus pilt\u201c onmouseover=\"this.className='klass1'\" onmouseout=\"this.className='klass2'\"><\/pre>\n
NB! Klassi nimi on paigutatud \u00fclakomade vahele, sest jutum\u00e4rgid \u00fcmbritsevad tervet atribuudi v\u00e4\u00e4rtust!<\/span><\/p>\n
V\u00e4lise stiililehe rakendamine<\/h1>\n
V\u00e4lise stiili (External Style Sheet) tarvitamine on kasulik, kui on tarvis kujundada tervet veebilehestikku (mitmeid erinevaid lehti).<\/p>\n
V\u00e4lise stiili kasutamiseks tuleb HTML-dokumendi p\u00e4isesse (elemendi <head> sisse) lisada kindlal kujul link vajalikule CSS failile:<\/p>\n
<link rel=\"stylesheet\" href=\"stiililehe_URL\"><\/pre>\n
Seega v\u00f5iks vastav element v\u00e4lja n\u00e4ha n\u00e4iteks:<\/p>\n
<link rel=\"stylesheet\" href=\"omastiil.css\"><\/pre>\n
Kujundusklasside kasutamine toimub v\u00e4lise stiililehe puhul samamoodi kui sisemise stiili korralgi!<\/p>\n
Mitme v\u00e4lise CSS faili \u00fchendamine<\/h2>\n
\u00dcsna sageli on tarvis \u00fchendada kujundus, mis pannakse kirja mitmes erinevas css failis. Selleks on v\u00f5imalik lisada HTML-dokumenti viited mitmele CSS-failile kuid on v\u00f5imalik ka importida \u00fche faili sisu teise! Selleks tuleks CSS-faili lisada import<\/em> reegel (rule<\/em>)!<\/p>\n
N\u00e4iteks:<\/p>\n
@import url(\"teinecssfail.css\")<\/pre>\n
NB! See k\u00e4sk tuleb paigutada CSS-failis k\u00f5ige esimeseks reegliks!<\/span><\/p>\n
Lisada saab ka komadega eraldatud loendi erinevatest v\u00e4ljundseadmetest (media queries), mille jaoks vastav css-fail loodud on.<\/p>\n
N\u00e4iteks:<\/p>\n
@import url(\"suurekraan.css\") projection, tv;<\/pre>\n
NB! Kui veebilehitseja ei toeta \u00fchtki loetletud v\u00e4ljundseadet, siis vastavat css-faili \u00fcldse ei laetagi.<\/span><\/p>\n
 <\/p>\n","protected":false},"author":1,"menu_order":2,"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\/208"}],"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":7,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/208\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/208\/revisions\/662"}],"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\/208\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=208"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=208"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}