{"id":658,"date":"2020-05-04T09:41:52","date_gmt":"2020-05-04T09:41:52","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=658"},"modified":"2020-05-18T14:55:17","modified_gmt":"2020-05-18T14:55:17","slug":"html-ja-css","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-ja-css\/","title":{"rendered":"HTML ja CSS"},"content":{"raw":"CSS (C<\/strong>ascading S<\/strong>tyle S<\/strong>heets) ehk astmelised stiililehed on keel, milles m\u00e4rgitakse \u00fcles veebilehtede kujundus. Vastavate reeglite j\u00e4rgi pannakse kirja, kuidas erinevaid HTML elemente peab n\u00e4itama (v\u00e4rvid, teksti font, suurus jne). CSS-i v\u00f5ib kasutada HTML faili sees aga ka v\u00e4lise failina (laiendiga .css).\r\n\r\nKasutades v\u00e4list stiililehte (css fail) saab veebilehe sisu ning kujunduse lahus hoida, mis lihtsustab veebilehe loomist ja hilisemat muutmist. Veebilehe kujunduse muutmiseks pole hiljem tarvis \u00fcle vaadata terve HTML dokumendi k\u00f5iki elemente vaid piisab ainult CSS faili muutmisest v\u00f5i asendamisest.\r\n\r\nCSS stiile saame HTML elementidele lisada kolmel erineval viisil:\r\n
    \r\n \t
  • Reastiil (Inline<\/em>) - konkreetse elemendi sees m\u00e4\u00e4ratud stiil kasutades style atribuuti.<\/li>\r\n \t
  • Sisemine stiil (Internal<\/em>) - HTML elemendi <head><\/code> osas defineeritud stiil.<\/li>\r\n \t
  • V\u00e4line stiil (External<\/em>) - kasutades v\u00e4list lingitud CSS faili<\/li>\r\n<\/ul>\r\nT\u00e4nap\u00e4eval on k\u00f5ige tavalisem meetod CSS lisamiseks kasutada v\u00e4list CSS faili. Seda vaatame t\u00e4psemalt CSS peat\u00fckkides. HTML peat\u00fckkides kasutame lihtsuse huvides reastiili ja Sisemist stiili.\r\n

    Reastiili rakendamine (Inline<\/em>)<\/h2>\r\nReastiili kasutatakse \u00fchele konkreetsele HTML elemendile kujundamiseks. Reastiili kasutamiseks tuleb vastava HTML elemendi algusm\u00e4rgendisse lisada argument style<\/code> j\u00e4rgmisel kujul:\r\n\r\n<elemendinimi<\/span> style<\/span>=<\/span>\"css stiil\"<\/span>><\/span><\/code>\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame \u00fchele tekstil\u00f5igule erilise v\u00e4rvi:\r\n
    <p style=\"color: sienna;\">See on \u00fcks l\u00f5ik.<\/p><\/pre>\r\n
    Sisemise stiili rakendamine (Internal<\/em>)<\/h2>\r\nOlukorras, kus on tarvis kujundada vaid \u00fcks konkreetne veebileht, v\u00f5ib kasutada sisemist stiili (Internal Style Sheet<\/em>). Selleks lisatakse HTML-dokumendi p\u00e4isesse (elemendi\u00a0<head><\/code>\u00a0sisse) element\u00a0<style> kujul:<\/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. N\u00e4iteks m\u00e4\u00e4rame dokumendi p\u00e4ises \u00e4ra, et k\u00f5ik veebilehel kuvatud h1<\/code> pealkirjad on punased ja k\u00f5ik tekstil\u00f5igud sinised:\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n    h1{color:red;}\r\n    p{color:blue;}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <h1>Paelkiri 1<\/h1>\r\n  <p>tekstil\u00f5ik<\/p>\r\n  <h1>Pealkiri 2<\/h1>\r\n  <p>tekstil\u00f5ik<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n
    V\u00e4lise stiililehe rakendamine (External<\/em>)<\/h2>\r\nV\u00e4lise stiili (External Style Sheet<\/em>) tarvitamine on kasulik, kui on tarvis kujundada tervet veebilehestikku (mitmeid erinevaid lehti). Nii saab \u00fche CSS faili muutmisega muuta kogu veebilehestiku k\u00f5ikide veebilehtede v\u00e4limust.\r\n\r\nV\u00e4lise stiili kasutamiseks tuleb HTML-dokumendi p\u00e4isesse (elemendi <head><\/code> sisse) lisada kindlal kujul link vajalikule CSS failile.\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"minustiil.css\">\r\n<\/head>\r\n<body>\r\n  <p>Veebilehe sisu.<\/p>\r\n<\/body>\r\n<\/html><\/pre>\r\nCSS faili loomiseks saame kasutada samu programme, millega kirjutame ka HTML faile. Faililaiendina tuleb kasutada .css laiendit. CSS failis ei tohi olla HTML koodi ning faili sisu v\u00f5ib v\u00e4lja n\u00e4ha n\u00e4iteks selline:\r\n
    body {\r\n  background-color: lightgray;\r\n}\r\nh1 {\r\n  color: blue;\r\n}\r\np {\r\n  color: red;\r\n}<\/pre>\r\n