https://peda.net/id/1f5de834c 2016-02-16T10:03:10+02:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/fc48bce2c 2017-09-19T20:20:23+03:00 <b>CSS-tyylien määrittäminen<br/> <br/> <br/> </b>Edellisillä tunneilla ollaan harjoiteltu luomaan div-lohkoja. Nämä lohkot luodaan siksi, että niiden tyylejä voisi helpommin muokata. Aiemmilla tunneilla olemme luoneet lohkon ”navigointipalkki”. Nyt katsotaan, miten sen tyyliä voidaan muottaa css-tiedostossa. Div-lohkon nimen eteen kuuluu siis laittaa piste ( . ) kun sen CSS-tyyliä muutetaan.<br/> <br/> <em>.navigointipalkki {</em><br/> <em>border-style: solid;</em><br/> <em>border-width: thin;</em><br/> <em>border-color: black;</em><br/> <em>background-color: #FFC752;</em><br/> <em>color: #636163;</em><br/> <em>width: 20%;</em><br/> <em>float: left;</em><br/> <em>}<br/> <br/> </em>Jos halutaan muuttaa esimerkiksi navigointipalkin sisällä olevaa listaa, käy se seuraavanlaisella komennolla:<br/> <br/> <em>.navigointipalkki ul {<br/> list-style-type: none;</em><br/> <em> margin-left: 1em;</em><br/> <em> padding-left: 0.5em;</em><br/> <em> color: red;</em><br/> <em>}<br/> <br/> </em><b>Linkkien muuttaminen<br/> <br/> </b>CSS-tyyleillä voidaan muuttaa linkeissä monia asioita. Ensiksikin seuraavalla CSS-komennolla voidaan muuttaa, miltä linkki näyttää, kun siinä ei ole käyty:<br/> <br/> <em>a:link {</em><br/> <em> color: blue;</em><br/> <em>}<br/> <br/> </em>Myös linkin ominaisuuksia voidaan muuttaa, kun sitä on jo klikattu. Se käy seuraavasti:<br/> <br/> <em>a:visited {</em><br/> <em> color: purple;</em><br/> <em>}<br/> <br/> </em>Seuraavalla komennolla voidaan muuttaa myös jotain linkkiin liittyvää, kokeillaan mitä!<br/> <br/> <em>a:hover {</em><br/> <em> background-color: #D69C52;</em><br/> <em> color: white;</em><br/> <em>}<br/> <br/> </em> 2016-02-02T08:55:46+02:00 https://peda.net/id/679a3f84c 2017-09-19T21:42:47+03:00 <ol> <li>Jatketaan samaa harjoitusta kuin viime tunnilla.</li> <li>Siirrä navigointipalkki heti otsikon alapuolelle. Muokataan sivun ylälaitaan tyylikäs navigointipalkki.</li> <li>Muokataan<b> .navigointipalkki ul</b>- kohtaa tyylitiedostosta. <ul> <li>Poista navigointipalkin listasta listamerkit (pyöreät mustat pallot) list-style-type komennolla.</li> <li>Määritä taustaväriksi haluamasi RGB arvo.</li> <li>Lisää loppuun vielä komento <b>overflow:</b><em> hidden</em><b>;</b></li> </ul> </li> <li>Muokataan<b> .navigointipalkki li</b> -kohtaa tyylitiedostosta.<br/> <ul> <li>Tällä hetkellä listassa olevat asiat näkyvät allekkain. Haluamme ne näkyviin vierekkäin. Tämä tapahtuu komennolla <b>float: </b><em>left</em></li> </ul> </li> <li>Muokataan <b>.navigointipalkki a</b>- kohtaa tyylitiedostosta. Tällä saamme muokattua linkkien ulkoasua.<br/> <ul> <li>Muuta linkkien tekstin väriksi esim. valkoinen</li> <li>Lisätään jokaisen linkin oikealle ja vasemmalle puolelle tyhjä tilaa 40 pikseliä asettamalla <b>padding-right</b> ja<b> padding-left</b> arvoon<em> 40px</em></li> <li>Poistetaan linkkien alleviivaus asettamalla <b>text-decoration</b> arvoon <em>none</em>.</li> </ul> </li> <li>Muokataan<b> .navigointipalkki a:hover</b>- kohtaa tyylitiedostosta. <ul> <li>Lisätään taustaväri kun hiiri viedään linkin päälle.</li> </ul> </li> </ol> <br/> <iframe width="560" height="315" src="https://www.youtube.com/embed/fuVXfFAAMX4" allowfullscreen="allowfullscreen"></iframe><br/> <br/> <b>MUISTA TALLENTAA!</b> 2016-02-02T08:58:46+02:00