<link rel="stylesheet" type="text/css" href="office_style.css">
<link href="prism.css" rel="stylesheet" />
<style> .laatikko1 { background-color: #FFFFFF; width: 75%; border: 1px solid green; padding: 15px; margin: 15px; box-shadow: 7px 7px 5px grey; } </style>
<p style="color: RGB(0,255,255)"> Väri RGB-koodina </p>
<style> .vari1 { color: syan; } .vari2 { color:purple; } .koko1 { font-size:120%; } </style>Ja p-elementti johon liitetty kaksi CSS-ohjetta:
<p class="vari2 koko1"> TEKSTI JOLLE CSS-OHJEITA </p>
Tehtävässä lisätään aluksi varjo kuvalle. Varjon voi lisätä myös laatikon muotoisena esitettäville elementeille, div:lle.
1. Varjon CSS-ohje:
.varjo{ }
.varjo{ box-shadow: 10px 10px 5px grey; }
<img class="varjo" src="kuva1.jpg" width="460" height="345">
2. Lisätään sama varjo menu-osan painikkeille sekä sen alapuolella olevalle aside-osalle.
.menu li { padding: 8px; margin-bottom: 7px; background-color :RGB(119,105,44); color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.aside { background-color: RGB(119,105,44); padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
3. Kikkaillaan varjolla vielä menu-painikkeissa. Tehdään painikkeille eri värinen varjo kun hiiren osoitin on painikkeen kohdalla eli tehdä hover-väri:
.menu li:hover { background-color: RGB(222,209,157); box-shadow: 10px 10px 5px orange; }
1. Mene selaimella www-osoitteeseen: https://fonts.google.com/.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet"> <style> * {
html { font-family: 'Spirax', cursive; }
.header { background-color: RGB(100,63,0); color: #ffffff; padding: 15px; text-align:center; }
Tilanne www-sivulla, header-osan otsikko keskitetty, koko sivuston fontti vaihdettu, varjoja laitettu ja menu-osassa hover-varjo:
5. Kokeillaan kuvan sijoittamista aside-osaan:
<li><a href="sivu2.html"> Forest </a></li> <li><a href="sivu3.html"> City </a></li> </ul> <div class="aside"> <h2> Otsikko 1 </h2> <p> Browse landscape pictures from around the world </p> <h2> Otsikko 2 </h2> <p> Browse landscape pictures from around the world </p> <h2> Otsikko 3 </h2> <p> Browse landscape pictures from around the world </p> <img class="varjo" src="kuva1.jpg" width="460" height="345"> </div>
<img class="varjo" src="kuva1.jpg" width="460" height="345">
Tässä kohtaa on hyvä tarkistaa onko kaikki tehdyssä www-sivussa halutulla tavalla, onko värit halutut, onko navigoinnissa
värit sopivat ja onko tekstin fonttityyppi sekä koko sopiva.
Eli tarkistetaan onko index.html sivu halutun näköinen. Tarkoituksena on tehdä www-sivusto jossa on neljä sivua ja kaikilla sivuilla
on yhteinen CSS-ohje erillisessä tiedostossa.
1. Kopioidaan HTML-koodauksen alusta style-elementin sisällä olevat CSS-muotoiluohjeet, ei kopioida style-elementin "tageja":
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet"> <style> * { box-sizing: border-box; } body{ background-color: RGB(250,245,220); } img { width: 100%; height: auto; } .varjo{ box-shadow: 10px 10px 5px grey; } .row:after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; width: 100%; } @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } html { font-family: 'Spirax', cursive; } .header { background-color: RGB(100,63,0); color: #ffffff; padding: 15px; text-align:center; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :RGB(119,105,44); color: #ffffff; box-shadow: 10px 10px 5px grey; } .menu li:hover { background-color: RGB(222,209,157); box-shadow: 10px 10px 5px orange; } a:link { /* linkki sivun avautuessa */ color: white; text-decoration: none; } a:visited { /* linkki jota käytetty */ color: white; text-decoration: none; } a:hover { /* linkki kun hiiren osoitin kohdalla */ color: black; font-size: 110%; } a:active { /* linkki kun hiiren valinta-painiketta painetaan */ color: orange; text-decoration: underline; } .aside { background-color: RGB(119,105,44); padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 10px 10px 5px grey; } .footer { background-color: RGB(100,63,0); color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } </style> <head>2. Avaa Notepad++ uusi tiedosto (New tai Uusi), liitä kopioimasi CSS-ohjeet ja Tallenna style.css nimellä. Tarkista että tallentamasi tiedosto on todellakin style-niminen CSS-tiedosto !
<link href="style.css" rel="stylesheet">9. Tallenna index.html tiedosto, Päivitä selain ja tarkista palautuko sivu ennalleen.
Seuraavaksi tehdään index-tiedostoa käyttäen www-sivusto, jokaiselle sivulle vaihdetaan head-osaan teksti ja testataan www-sivuston toimivuus.
1. Avaa se kansio jonne olet tallentanut index.html tiedoston, kuva alla.
2. Kopioi index.html tiedosto ja liitä kolme kertaa kopioimasi, kuva alla. Saatiin kolme index-tiedoston kopiota.
3. Vaihdetaan kopioitujen tiedostojen nimiksi sivu1.html, sivu2.html ja sivu3.html, kuva:
4. Avaa sivu1.html, sivu2.html ja sivu3.html tiedostot Notepad++ ohjelmaan ja vaihda tiedostoissa header-osassa
olevat h1-tekstit vastaamaan menu-tekstejä seuraavasti:
Tiedoston header-teksti: sivu1.html - Joki sivu2.html - Metsä sivu3.html - Kaupunki5. Talleta tiedostot, päivitä selain ja testaa vaihtuuko www-sivut menu-painikkeista, huomaa otsikkojen vaihtuminen.
Seuraavissa vaiheissa muokataan sivujen sisältöä, tehdään hyvin yksinkertainen kuva-galleria ja upotetaan ww-sivulle video.