Sähköinen asiointipalvelu, johdanto

Sorakuilu

Demo 4, css-perusteita

Laadi CSS demo1.html-sivulle

Tavoitteena tässä on harjoitella tekniikkaa - itse ulkoasu ei ole olennainen. Käytä hyväksesi www.w3schoolsin css-opasta.

Asioita

Tehtäviä

  1. tee selectoreja (id ja class) tekstikappaleisiin (class="kuvateksti" kohtaan kuvat id="tarkein" kohtaan "Käytä koko URL:ää")
  2. kommentoi css ja html
  3. värit
    • laita bodyyn taustaväri
  4. testaa taustakuvia (tallenna itsellesi kuvat-kansioon)
  5. lisää tekstin väri #ffffff, valkoinen;
  6. lisää h1 tekstiväri #ffa500, oranssi
  7. tee tekstille (id = "tarkein") reunaviiva, pyöristä se ja anna viivalle väri #ffffff, valkoinen
  8. lisää padding 10px tekstille id="tarkein"
  9. lisää samalle elementille myös taustaväri #666666, harmaa
  10. kaikelle tekstille ja kuvalle vasen marginaali 60px
  11. tee h1-elementille ylämarginaali 50px
  12. lisää kuvalle koko (leveys 300px) ja reunaviiva (3px #00FF00 solid) sekä outline (1px dotted red) margin 25px ja padding 10px (box model näkyviin)
  13. vaihda otsikon h1 fontiksi Trebuchet MS ja kooksi 5em
  14. vaihda otsikon h2 fontiksi Verdana ja kooksi 2em
  15. vaihda koko dokumentin yleisfontiksi Arial Bold ja kooksi 1.3em
  16. vaihda luokka (class="kuvateksti") kallistetuksi ja sinivihreäksi #00ffff
  17. html-lähdekoodi

    <!DOCTYPE html>
    <html lang="fi">
    <head>
        <meta charset="UTF-8">
        <title>Demo 2</title>
    </head>

    <body>
        <h1>Kalatori</h1>
        <img src="./kuvat/kala.jpg" alt="kala"><br>
        Jem Sahagunin kuva

        <p><strong>Kalatori</strong> on kalastajalle mahdollisuus <b>myydä</b> saaliinsa tuoreena suoraan vähittäisasiakkaille. 
        Se sijaitsee ihanteellisessa paikassa aivan vanhan Pirkkalankylän  keskustassa. 
        Torilla pidetään <mark>markkinapäiviä</mark> ja olemme saaneet torille vakituisen asiakaskunnan.
        Julkinen liikenne suosii toria, sijainti on nimen mukaisesti kalasataman vieressä ja linja-autopysäkki on 50 metrin päässä.</p>



        <h3>Vuoden 2020 markkinat </h3>
        <ul>
            <li><del>Kevätmarkkinat lauantai 11.4. klo 7–16</del></li>
            <li>Juhannusmarkkinat tiistai 16.6. klo 7–15</li>
            <li>Elomarkkinat tiistai 17.8. klo 7–15</li>
            <li>Syysmarkkinat tiistai 13.10. klo 7–15</li>
            <li>Joulumarkkinat tiistai 15.12. klo 7–15</li>
        </ul>

        <h3>Hinnasto</h3>
        <p>
            <img src="./kuvat/tori.jpg" alt="tori"><br>
            Paikkakartta
        </p>

        <table>
            <tr> <!-- otsikkorivi -->
                <th>Tunnus</th> <!-- table head = th -->
                <th>Ala m&sup2;</th> 
                <th>Hinta &euro;</th> 
            </tr>
            <tr>
                <td>A1</td><!-- table data = td -->
                <td>15</td>
                <td>60</td>
            </tr>
            <tr>
                <td>A2</td><!-- table data = td -->
                <td>15</td>
                <td>60</td>
            </tr>
            <tr>
                <td>A3</td><!-- table data = td -->
                <td>15</td>
                <td>60</td>
            </tr>
            <tr>
                <td>A4</td><!-- table data = td -->
                <td>15</td>
                <td>60</td>
            </tr>
            <tr>
                <td>B1</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B1</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B2</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B3</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B4</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B5</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B6</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B7</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B8</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B9</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
            <tr>
                <td>B10</td><!-- table data = td -->
                <td>8</td>
                <td>40</td>
            </tr>
        </table>

        <h3>Sijainti</h3>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1906.6424288939156!2d23.553976816159064!3d61.45316258245171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468ed9fa83d6429f%3A0xb142d41e406c097d!2sKierikantie%2018%2C%2033980%20Pirkkala!5e0!3m2!1sfi!2sfi!4v1598336853378!5m2!1sfi!2sfi" width="600" height="450" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

    <p>&copy; Leena JN</p>
    </body>
    </html>

    css-lähdekoodi

    body {
        background-color:#ffffff;
        /*background-image:url("../kuvat/taus.png");
        background-repeat:repeat;  toistuu kahteen suuntaan 
        background-image:url("../kuvat/pysty.jpg");
        background-repeat:repeat-y;
        background-image:url("../kuvat/vaaka.jpg");
        background-repeat:repeat-x;
        background-image:url("../kuvat/polle.jpg");
        background-repeat:no-repeat;
        background-position: right top;
        background-attachment:fixed;*/
        background-image:url("../kuvat/tumma.jpg");
        background-size:100%;
        color:#ffffff;
        margin-left:60px;
        font-family:"Arial Bold", sans-serif;
        font-size:1.3em;
    }

    h1 {
        color:#ffa500;
        margin-top:50px;
        font-family:"Trebuchet MS","Times New Roman";
        font-size:5em;
    }

    h2 {
        font-family:Verdana,serif;
        font-size:2em;
    }

    #tarkein {
        border:solid 1px #ffffff;
        border-radius:7px;
        padding:10px;
        background-color:#333333;
    }

    img {
        width:300px;
        border:3px #00ff00 solid;
        padding:10px;
        margin:100px;
        outline:3px dotted red;
    }

    .kuvateksti {
        color:#00ffff;
        font-style: italic;
    }