^ timohei.net / Opintojaksot / Opintojaksot / Automaation IoT-projekti / Web-käyttöliittymän luominen /
CSS-muotoilu
CSS eli Cascading Style Sheets on tapa muotoilla nettisivut tarkasti, tyylikkäästi ja ennen kaikkea uudelleenkäytettävästi. Tässä ohjeessa kerrotaan, miten CSS-muotoiluja voidaan käyttää Flaskin kanssa.
Hyvä alustus CSS:n ominaisuuksiin ja käyttöön on w3schoolsin sivuilla.
Yleiskäyttöiset pohjatiedostot (kuten CSS-tyylimäärittelyt) kannattaa luoda web-hakemiston alle static-hakemistoon:
cd ~/www mkdir static cd static
Luo tiedosto style.css ja kirjoita sinne alla oleva sisältö:
body { font-family: sans-serif; background: #eee; }
a, h1, h2 { color: #377ba8; }
h1, h2 { font-family: 'Georgia', serif; margin: 0; }
h1 { border-bottom: 2px solid #eee; }
h2 { font-size: 1.2em; }
.page { margin: 2em auto; width: 35em; border: 5px solid #ccc;
padding: 0.8em; background: white; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { margin: 0.8em 1.2em; }
.entries li h2 { margin-left: -1em; }
.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; }
.add-entry dl { font-weight: bold; }
.metanav { text-align: right; font-size: 0.8em; padding: 0.3em;
margin-bottom: 1em; background: #fafafa; }
.flash { background: #cee5F5; padding: 0.5em;
border: 1px solid #aacbe2; }
.error { background: #f0d6d6; padding: 0.5em; }
Muokkaa index.html tiedostoa (mistäs se löytyykään?) niin, että se ottaa käyttöön tyylimäärittelytiedoston. Tämä tapahtuu lisäämällä index.html-tiedoston alkuun <head>-osioon tyylitiedostoviittaus:
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
...
...
...
</body>
</html>
Päivitetty 6.1.2025
© Timo Heikkinen | timo piste heikkinen at oamk piste fi