{"id":762,"date":"2020-05-07T18:44:52","date_gmt":"2020-05-07T18:44:52","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=762"},"modified":"2020-05-12T13:39:48","modified_gmt":"2020-05-12T13:39:48","slug":"html-atribuudid-class-ja-id","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-atribuudid-class-ja-id\/","title":{"rendered":"HTML atribuudid class ja id"},"content":{"raw":"

Atribuut class<\/code><\/h1>\r\nAtribuuti class<\/code> saame kasutada mitme elemendi korraga stiliseerimiseks. N\u00e4iteks muudame iga teise tekstil\u00f5igu punaseks. Selleks m\u00e4\u00e4rame igale teisele tekstil\u00f5igule class<\/code> atribuudi v\u00e4\u00e4rtusega \"error\" (v\u00f5i m\u00f5ni muu vabalt valitud nimi) kujul:\r\n\r\nclass=\"nimi\"<\/code>\r\n\r\nP\u00e4rast klassi nime m\u00e4\u00e4ramist saame style<\/code> elementi ja CSS-i kasutades k\u00f5iki sama nime omavaid elemente korraga stiliseerida.\r\n\r\nCSS-iga klassinimedele viitamisel kasutatakse klassinime eest punkti.\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.error {color: red;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>See on tavaline tekst.<\/p> \r\n<p class=\"error\">See on punane tekst.<\/p> \r\n<p>See on j\u00e4llegi tavaline tekst.<\/p>\r\n<p class=\"error\">See on ka punane!<\/p> \r\n\r\n<\/body>\r\n<\/html><\/pre>\r\n
\"class<\/h2>\r\nKlassiatribuuti saame kasutada ka koos konteinerelementidega <div><\/code> ja <span><\/code>.\r\n\r\nN\u00e4iteks muudame kahe pealkirja ja kahe tekstil\u00f5igu tausta siniseks, teksti valgeks ja lisame teksti ja tausta vahele natuke vaba ruumi kasutades elementi <div><\/code>:\r\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<style> \r\n.eriline {\r\n  background-color: blue;\r\n  color:white;\r\n  padding:10px;\r\n  margin-bottom:10px;\r\n  }\r\n.tavaline{\r\n  padding:10px;\r\n}\r\n<\/style> \r\n<\/head> \r\n<body>\r\n<div class=\"eriline\">\r\n<h1>Pealkiri 1<\/h1>\r\n<p>Esimene tekstil\u00f5ik<\/p>\r\n<\/div> \r\n<div class=\"eriline\">\r\n<h1>Pealkiri 2<\/h1>\r\n<p>Teine tekstil\u00f5ik<\/p>\r\n<\/div>\r\n<div class=\"tavaline\">\r\n<h1>Pealkiri 3<\/h1>\r\n<p>Kolmas tekstil\u00f5ik<\/p>\r\n<\/div>\r\n<\/body> \r\n<\/html><\/pre>\r\n\"class\r\n\r\nV\u00f5i siis muudame m\u00f5ned s\u00f5nad tekstil\u00f5igus punaseks kasutades elementi <span><\/code>:\r\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<style> \r\n.eriline {\r\n  color:red;\r\n  font-weight:bold;\r\n  }\r\n<\/style> \r\n<\/head> \r\n<body>\r\n<p>See on <span class=\"eriline\">tekst<\/span>, milles m\u00f5ned s\u00f5nad on muudetud punaseks kasutades <span class=\"eriline\">span<\/span> elementi ja <span class=\"eriline\">class<\/span> atribuuti.<\/p>\r\n<\/body> \r\n<\/html><\/pre>\r\n\"class\r\n\r\nElemendid v\u00f5ivad korraga omada ka mitut class<\/code> atribuudi poolt m\u00e4\u00e4ratud nime. Sellisel juhul eraldatakse need t\u00fchikuga. \u00dclevalolevas n\u00e4ites, kus kahe pealkirja ja tekstil\u00f5igu taust oli muudetud siniseks, m\u00e4\u00e4rasime kahele erinevale klassinimele omaduseks polsterduse (padding<\/em>) 10px. Proovime selle korduse koodist eemaldada kasutades m\u00f5nel elemendil kahte klassinime:\r\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<style> \r\n.eriline {\r\n  background-color: blue;\r\n  color:white;\r\n  margin-bottom:10px;\r\n  }\r\n.tavaline{\r\n  padding:10px;\r\n}\r\n<\/style> \r\n<\/head> \r\n<body>\r\n<div class=\"tavaline eriline\">\r\n<h1>Pealkiri 1<\/h1>\r\n<p>Esimene tekstil\u00f5ik<\/p>\r\n<\/div> \r\n<div class=\"tavaline eriline\">\r\n<h1>Pealkiri 2<\/h1>\r\n<p>Teine tekstil\u00f5ik<\/p>\r\n<\/div>\r\n<div class=\"tavaline\">\r\n<h1>Pealkiri 3<\/h1>\r\n<p>Kolmas tekstil\u00f5ik<\/p>\r\n<\/div>\r\n<\/body> \r\n<\/html><\/pre>\r\nTulemus on sama nagu \u00fcleeelmisel pildil n\u00e4ha.\r\n