{"id":620,"date":"2020-05-03T11:28:50","date_gmt":"2020-05-03T11:28:50","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=620"},"modified":"2020-05-12T09:25:38","modified_gmt":"2020-05-12T09:25:38","slug":"html-stiilid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-stiilid\/","title":{"rendered":"HTML stiilid"},"content":{"raw":"Stiiliatribuuti style<\/code> kasutatakse HTML elementide stiliseerimiseks. N\u00e4iteks saame muuta elementide v\u00e4rvi, suurust, kirjat\u00fc\u00fcpi jm.\r\n\r\nStiiliatribuut lisatakse elemendi algusm\u00e4rgendisse<\/strong>\u00a0kujul:\r\n\r\n<elemendinimi style=\"omadus:v\u00e4\u00e4rtus \"> elemendi sisu <\/elemendinimi><\/code>\r\n\r\nKui soovime \u00fchel elemendil kasutada mitut omadust korraga, siis saame soovitud omadused kirjutada \u00fcksteise j\u00e4rele kasutades eraldajana semikoolonit:\r\n\r\n<elemendinimi style=\"omadus1:v\u00e4\u00e4rtus; omadus2:v\u00e4\u00e4rtus;\"> elemendi sisu <\/elemendinimi><\/code>\r\n\r\nPaljud veebiarendajad soovitavad semikoolonit kasutada ka juba \u00fche omaduse korral kuna nii on v\u00f5imalik v\u00e4ltida tulevasi potentsiaalseid vigasid omaduste juurde lisamisel.\r\n

Taustav\u00e4rv (background-color<\/em>)<\/h2>\r\nElemendi taustav\u00e4rvi saame muuta omadusega background-color<\/code>. Muudame n\u00e4iteks kogu kehaelemendi tausta siniseks:\r\n
<body style=\"background-color:blue;\">\r\n  <h1>Pealkiri<\/h1>\r\n  <p>See on tekstil\u00f5ik.<\/p>\r\n<\/body><\/pre>\r\n
Teksti v\u00e4rv (color<\/em>)<\/h2>\r\nTeksti v\u00e4rvi muutmiseks saame kasutada omadus color<\/code>.\r\n
<h1 style=\"color:blue;\">See pealkiri on sinine<\/h1>\r\n<p style=\"color:red;\">See tekstil\u00f5ik on punane.<\/p><\/pre>\r\n
See pealkiri on sinine<\/h1>\r\n
See tekstil\u00f5ik on punane.<\/p>\r\n\r\n
Kirjat\u00fc\u00fcp (font-family<\/em>)<\/h2>\r\nSelleks, et m\u00e4\u00e4rata, millist kirjat\u00fc\u00fcpi kasutades on tekst kasutajale kuvatud, saame kasutada omadust font-family<\/code>.\r\n
<h1 style=\"font-family:verdana;\">See on pealkiri<\/h1>\r\n<p style=\"font-family:courier;\">See on tekstil\u00f5ik.<\/p><\/pre>\r\n
Teksti suurus (font-size<\/em>)<\/h2>\r\nTeksti suuruse muutmiseks saame kasutada omadust font-size<\/code>.\r\n
<h1 style=\"font-size:300%;\">See pealkiri on tavatekstist 3 korda suurem<\/h1>\r\n<p style=\"font-size:2em;\">See tekstil\u00f5ik on 2 korda suurem kui tavatekst.<\/p><\/pre>\r\n
Teksti joondamine (text-align<\/em>)<\/h2>\r\nTeksti joondamiseks vasakule, paremale v\u00f5i keskele saame kasutada text-align<\/code> omadust. V\u00e4\u00e4rtused, mida antud omadusele saame omistada on center (keskjoondus), left (vasakjoondus), right (paremjoondus) ja justify (r\u00f6\u00f6pjoondus).\r\n
<h1 style=\"text-align:center;\">Pealkiri<\/h1>\r\n<p style=\"text-align:left;\">Tekstil\u00f5ik vasakul.<\/p>\r\n<p style=\"text-align:right;\">Tekstil\u00f5ik paremal.<\/p>\r\n<p style=\"text-align:justify;\">See on pikem tekstil\u00f5ik, mille joonduseks on valitud r\u00f6\u00f6pjoondus. See t\u00e4hendab, et tekst on joondatud nii vasakult kui ka paremalt poolt.<\/p><\/pre>\r\n
Enesekontroll (3 k\u00fcsimust)<\/h3>\r\n[h5p id=\"15\"]\r\n\r\n