{"id":286,"date":"2020-12-22T16:08:06","date_gmt":"2020-12-22T16:08:06","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=286"},"modified":"2020-12-23T18:09:23","modified_gmt":"2020-12-23T18:09:23","slug":"css-flaskis","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/css-flaskis\/","title":{"raw":"CSS Flaskis","rendered":"CSS Flaskis"},"content":{"raw":"Loome app.py failiga samasse kausta uue kausta static<\/em> (n\u00fc\u00fcd on meil samas kaustas fail app.py, kaustad templates<\/em> ja static<\/em>), seej\u00e4rel alamkausta css<\/em>, millesse lisame css-faili. Paneme failile nime, n\u00e4iteks kujundus.css. Me v\u00f5ime sellesse faili kirjutada erinevaid asju kujunduse kohta. Selles n\u00e4ites muudame ainult fonti. Selleks kirjutame failis kujundus.css n\u00e4iteks j\u00e4rgnevad read:\r\n
body {\r\n\u00a0 font-family: Arial;\r\n}<\/pre>\r\nSelleks, et css-failis m\u00e4\u00e4ratud kujundused html-failides rakenduks, on vaja html-faili head-ossa lisada rida <link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\"><\/code>. Meie lisame selle rea faili baas.html. Kuna kirjutasime selle rea blokkidest v\u00e4ljaspoole, rakenduvad muudatused k\u00f5ikides failides, milles sellele failile on viidatud.\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\">\r\n{% block head %}<title>Minu esimene veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\r\nKujundusega html-failides on tavaliselt rohkem osi. Nii saame kujunduselemente m\u00e4\u00e4rata css-failis ka osade kaupa. Html-failis saame m\u00e4\u00e4rata n\u00e4iteks osad header, content<\/em> ja footer<\/em> ja css-failis nendele viidata. Lisame osad faili baas.html. Lisame ka vastavad blokid.\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\">\r\n{% block head %}<title>Minu esimene veebileht<\/title>{% endblock %}\r\n<\/head>\r\n<body>\r\n<div id=\"header\">{% block header %}Pealkiri{% endblock %}<\/div>\r\n<div id=\"content\">{% block content %}{% endblock %}<\/div>\r\n<div id=\"footer\">{% block footer %}Kontakt:{% endblock %}\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\r\nMeie n\u00e4itefail avaleht.html kasutab faili baas.html, ainult sisuossa kirjutame 1. teema<\/em>.\r\n
{% extends 'baas.html' %}\r\n\r\n{% block content %}\r\n<h1>1. teema<\/h1>\r\n{% endblock %}<\/pre>\r\nSelleks, et koos kujundusega tulemust vaadata, laeme failid \u00fcles PythonAnywhere keskkonda. Ka seal tuleb kaustas mysite<\/em> kausta templates<\/em> k\u00f5rvale luua uus kaust static<\/em>, sellesse alamkaust css<\/em> ja fail kujundus.css tuleb laadida kausta css<\/em>. Kaustas templates<\/em> on meil failid baas.html ja avaleht.html. Fail app.py on otse mysite<\/em> kaustas. Kui k\u00f5ik \u00f5nnestus, n\u00e4eb lehek\u00fclg enne css-faili t\u00e4iendamist v\u00e4lja selline:\r\n\r\n\"CSS\r\n\r\nN\u00fc\u00fcd t\u00e4iendame kujundus.css faili. Lisame lehele taustav\u00e4rvi.\r\n
html {\r\n\u00a0 background-color: #303030;\r\n}<\/pre>\r\nJ\u00e4tkame kujundus.css faili t\u00e4iendamist. M\u00e4\u00e4rame tausta v\u00e4rvi ka body-osale (background-color: #e0e0eb;<\/code>), samuti selle osa laiuse (width: 800px;<\/code>). Lisaks tahame, et tekst ei oleks servale l\u00e4hemal kui 20 pikslit (padding: 20px;<\/code>) ning see osa asuks lehe keskel (margin: 10px auto 5px auto;<\/code>).\r\n
body {\r\n\u00a0 background-color: #e0e0eb;\r\n\u00a0 width: 800px; \r\n\u00a0 font-family: Arial;\r\n\u00a0 padding: 20px;\r\n\u00a0 margin: 10px auto 5px auto;\r\n}<\/pre>\r\nLehe p\u00e4iseosale m\u00e4\u00e4rame samuti taustav\u00e4rvi (background-color: #cccccc;<\/code>), lisaks teksti v\u00e4rvi (color: #cc0066;<\/code>), joonduse (text-align: center;<\/code>), suuruse (font-size: 48px;<\/code>) ning sisu minimaalse kauguse servast (padding: 5px;<\/code>).\r\n
#header {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 48px;\r\n\u00a0 padding: 5px;\r\n}<\/pre>\r\nKa sisuosale m\u00e4\u00e4rame taustav\u00e4rvi, samuti tahame, et sisu oleks servast v\u00e4hemalt 20 piksli kaugusel.\r\n
#content {\r\n\u00a0 background-color: #f2f2f2;\r\n\u00a0 padding: 20px;\r\n}<\/pre>\r\nJalusele m\u00e4\u00e4rame tunnused sarnaselt p\u00e4iseosale, ainult teksti suuruse paneme v\u00e4iksema.\r\n
#footer {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 30px;\r\n\u00a0 padding: 5px;\r\n}<\/pre>\r\nKokku sai meie uus kujundus ehk faili kujundus.css sisu j\u00e4rgnev:\r\n
html {\r\n\u00a0 background-color: #303030;\r\n}\r\n\r\nbody {\r\n\u00a0 background-color: #e0e0eb;\r\n\u00a0 width: 800px; \r\n\u00a0 font-family: Arial;\r\n\u00a0 padding: 20px;\r\n\u00a0 margin: 10px auto 5px auto;\r\n}\r\n\r\n#header {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 48px;\r\n\u00a0 padding: 5px;\r\n}\r\n\r\n#content {\r\n\u00a0 background-color: #f2f2f2;\r\n\u00a0 padding: 20px;\r\n}\r\n\r\n#footer {\r\nbackground-color: #cccccc;\r\ncolor: #cc0066;\r\ntext-align: center;\r\nfont-size: 30px;\r\npadding: 5px;\r\n}<\/pre>\r\nKui uuendame PythonAnywhere keskkonnas vastavalt viimastele n\u00e4idetele failid baas.html, avaleht.html ja kujundus.css, saame tulemuseks j\u00e4rgneva esialgse kujunduse:\r\n\r\n\"CSS\r\n\r\n ","rendered":"
Loome app.py failiga samasse kausta uue kausta static<\/em> (n\u00fc\u00fcd on meil samas kaustas fail app.py, kaustad templates<\/em> ja static<\/em>), seej\u00e4rel alamkausta css<\/em>, millesse lisame css-faili. Paneme failile nime, n\u00e4iteks kujundus.css. Me v\u00f5ime sellesse faili kirjutada erinevaid asju kujunduse kohta. Selles n\u00e4ites muudame ainult fonti. Selleks kirjutame failis kujundus.css n\u00e4iteks j\u00e4rgnevad read:<\/p>\n
body {\r\n\u00a0 font-family: Arial;\r\n}<\/pre>\n
Selleks, et css-failis m\u00e4\u00e4ratud kujundused html-failides rakenduks, on vaja html-faili head-ossa lisada rida <link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\"><\/code>. Meie lisame selle rea faili baas.html. Kuna kirjutasime selle rea blokkidest v\u00e4ljaspoole, rakenduvad muudatused k\u00f5ikides failides, milles sellele failile on viidatud.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\">\r\n{% block head %}<title>Minu esimene veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\n
Kujundusega html-failides on tavaliselt rohkem osi. Nii saame kujunduselemente m\u00e4\u00e4rata css-failis ka osade kaupa. Html-failis saame m\u00e4\u00e4rata n\u00e4iteks osad header, content<\/em> ja footer<\/em> ja css-failis nendele viidata. Lisame osad faili baas.html. Lisame ka vastavad blokid.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\">\r\n{% block head %}<title>Minu esimene veebileht<\/title>{% endblock %}\r\n<\/head>\r\n<body>\r\n<div id=\"header\">{% block header %}Pealkiri{% endblock %}<\/div>\r\n<div id=\"content\">{% block content %}{% endblock %}<\/div>\r\n<div id=\"footer\">{% block footer %}Kontakt:{% endblock %}\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Meie n\u00e4itefail avaleht.html kasutab faili baas.html, ainult sisuossa kirjutame 1. teema<\/em>.<\/p>\n
{% extends 'baas.html' %}\r\n\r\n{% block content %}\r\n<h1>1. teema<\/h1>\r\n{% endblock %}<\/pre>\n
Selleks, et koos kujundusega tulemust vaadata, laeme failid \u00fcles PythonAnywhere keskkonda. Ka seal tuleb kaustas mysite<\/em> kausta templates<\/em> k\u00f5rvale luua uus kaust static<\/em>, sellesse alamkaust css<\/em> ja fail kujundus.css tuleb laadida kausta css<\/em>. Kaustas templates<\/em> on meil failid baas.html ja avaleht.html. Fail app.py on otse mysite<\/em> kaustas. Kui k\u00f5ik \u00f5nnestus, n\u00e4eb lehek\u00fclg enne css-faili t\u00e4iendamist v\u00e4lja selline:<\/p>\n
\"CSS<\/p>\n
N\u00fc\u00fcd t\u00e4iendame kujundus.css faili. Lisame lehele taustav\u00e4rvi.<\/p>\n
html {\r\n\u00a0 background-color: #303030;\r\n}<\/pre>\n
J\u00e4tkame kujundus.css faili t\u00e4iendamist. M\u00e4\u00e4rame tausta v\u00e4rvi ka body-osale (background-color: #e0e0eb;<\/code>), samuti selle osa laiuse (width: 800px;<\/code>). Lisaks tahame, et tekst ei oleks servale l\u00e4hemal kui 20 pikslit (padding: 20px;<\/code>) ning see osa asuks lehe keskel (margin: 10px auto 5px auto;<\/code>).<\/p>\n
body {\r\n\u00a0 background-color: #e0e0eb;\r\n\u00a0 width: 800px; \r\n\u00a0 font-family: Arial;\r\n\u00a0 padding: 20px;\r\n\u00a0 margin: 10px auto 5px auto;\r\n}<\/pre>\n
Lehe p\u00e4iseosale m\u00e4\u00e4rame samuti taustav\u00e4rvi (background-color: #cccccc;<\/code>), lisaks teksti v\u00e4rvi (color: #cc0066;<\/code>), joonduse (text-align: center;<\/code>), suuruse (font-size: 48px;<\/code>) ning sisu minimaalse kauguse servast (padding: 5px;<\/code>).<\/p>\n
#header {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 48px;\r\n\u00a0 padding: 5px;\r\n}<\/pre>\n
Ka sisuosale m\u00e4\u00e4rame taustav\u00e4rvi, samuti tahame, et sisu oleks servast v\u00e4hemalt 20 piksli kaugusel.<\/p>\n
#content {\r\n\u00a0 background-color: #f2f2f2;\r\n\u00a0 padding: 20px;\r\n}<\/pre>\n
Jalusele m\u00e4\u00e4rame tunnused sarnaselt p\u00e4iseosale, ainult teksti suuruse paneme v\u00e4iksema.<\/p>\n
#footer {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 30px;\r\n\u00a0 padding: 5px;\r\n}<\/pre>\n
Kokku sai meie uus kujundus ehk faili kujundus.css sisu j\u00e4rgnev:<\/p>\n
html {\r\n\u00a0 background-color: #303030;\r\n}\r\n\r\nbody {\r\n\u00a0 background-color: #e0e0eb;\r\n\u00a0 width: 800px; \r\n\u00a0 font-family: Arial;\r\n\u00a0 padding: 20px;\r\n\u00a0 margin: 10px auto 5px auto;\r\n}\r\n\r\n#header {\r\n\u00a0 background-color: #cccccc;\r\n\u00a0 color: #cc0066;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 48px;\r\n\u00a0 padding: 5px;\r\n}\r\n\r\n#content {\r\n\u00a0 background-color: #f2f2f2;\r\n\u00a0 padding: 20px;\r\n}\r\n\r\n#footer {\r\nbackground-color: #cccccc;\r\ncolor: #cc0066;\r\ntext-align: center;\r\nfont-size: 30px;\r\npadding: 5px;\r\n}<\/pre>\n
Kui uuendame PythonAnywhere keskkonnas vastavalt viimastele n\u00e4idetele failid baas.html, avaleht.html ja kujundus.css, saame tulemuseks j\u00e4rgneva esialgse kujunduse:<\/p>\n
\"CSS<\/p>\n
 <\/p>\n","protected":false},"author":29,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-286","chapter","type-chapter","status-publish","hentry"],"part":100,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/29"}],"version-history":[{"count":4,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions\/359"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/100"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/286\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=286"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=286"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}