Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla
Ennen tallennusta suositellaan ottamaan kopio muokkausruudusta (ctrl-a -> ctrl-c)
Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.
Css
Css-tiedoston haku HTML-sivulle[muokkaa]
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="polku/tiedostonimi.css"> <title>Sivun otsikko tähän</title> </head>
Internetsivun css muuttaminen[muokkaa]
Css-tiedosto sijaitsee selattavan sivuston palvelimella ja käyttäjän vieraillessa sivustolla, oman laitteen selain hakee css-tiedoston palvelimelta laitteeseen. Tämän jälkeen muodostettaessa käyttäjälle internet-sivua, sovelletaan css-tiedoston tyyliohjeita. Käyttäjä voi antaa ohjeita selaimelle, jotka korvaavat alkuperäisen css-tiedoston tyylejä. Tällä tavoin verkkosivun ulkoasua voidaan muuttaa halutun kaltaiseksi palvelimen alkuperäisestä tiedostosta poiketen.
Tiedosto voi olla esim. seuraavanlainen, jossa haluttu muutos on alunperin etsitty Työkalut > F12-sovelluskehittäjätyökalut -avulla selaimessa. Alkuperäinen tyylikohta on kopioitu tekstitiedostoon ja siihen on tehty muutokset tai lisäykset. Esimerkissä on siis kopioitu rivit display... ja height ja lisätty oma ominaisuus overflow. Tiedosto tallennetaan esim. jokunimi.css eli tiedostopääte tulee olla css
/*
Tähän mistä tyylitiedostossa on kyse
*/
.joku-tyyli-nimi .joku-toinen-tyylinimi
{
overflow-x:scroll; /* tama rivi lisätään tuotannossa olevaan */
display:block;
height:100%;
}
Internet Explorer 11[muokkaa]
Käyttöönotto:
- Tallenna css-tiedosto esimerkiksi työpöydälle
- Avaa Internet Explorer
- valitse oikeasta yläkulmasta ratas > Internet-asetukset
- valitse ’Helppokäyttötoiminnot’
- valitse ’Käytä asiakirjojen muotoilussa omaa tyylisivua’
- valitse Selaa… > hae em. tallennettu tiedosto
- valitse OK > OK.
Poistaminen käytöstä:
- Avaa Internet Explorer
- valitse oikeasta yläkulmasta ratas > Internet-asetukset
- valitse ’Helppokäyttötoiminnot’
- poista valinta kohdasta ’Käytä asiakirjojen muotoilussa omaa tyylisivua’
- valitse OK > OK.
Kuvan keskittäminen näytölle[muokkaa]
Tapa 1[muokkaa]
Sijoita seuraava tiedostonimi.css -tiedostoon ja tee html-sivuun tyylitiedoston haku.
.kuvakeskitys {
height: 200px; /* Kuvan korkeus */
width: 200px; /* Kuvan leveys */
margin: auto;
position: absolute;
bottom: 0; left: 0; top: 0; right: 0;
}
HTML-tiedostoon:
<div class="kuvakeskitys">
<img src="kuvatiedostonimi.jpg" align=center>
</div>
Tekstin keskittäminen näytölle[muokkaa]
Harjoitella voi esimerkiksi editorissa http://jsfiddle.net/953Yj/
Tapa 1[muokkaa]
Sijoita seuraava tiedostonimi.css -tiedostoon ja tee html-sivuun tyylitiedoston haku.
.tekstikeskitys{
position:absolute;
display:block;
height:50px;
width:100px;
left:50%;
top:65%;
margin-top:-50px;
margin-left:-50px;
}
HTML-tiedostoon:
<div class="tekstikeskitys">
Teksti
</div>
Taulukko[muokkaa]
- table = koko taulukko, th = otsikko, tr = rivi, td = sarake
- Taulukon leveys: table { width: 100%; }
- Skrollaus jos näyttöä leveämpi:
- Taulukon sarakkeiden korkeus: td { height: 50px; }
- Reunat: table, th, td { border: 1px solid black; }
- Taulukon viivojen yhdistäminen:
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
- Rivien alaviiva: td { border-bottom: 1px solid gray; }
- Otsikkorivin värit: th { background-color: black; color: white; }
- Joka toinen rivi eri värillä: tr:nth-child(even) {background-color: gray;} // background-color:#f5f5f5
- Vaihtuva riviväri hiiren koskettaessa: tr:hover {background-color: red;}
- Tekstin sijainti solussa vaakatasossa: th { text-align: center; }
- Tekstin sijainti solussa pystytasossa: td { vertical-align: middle; } // top, bottom, middle
- Tekstin etäisyys reunoista: th, td { padding: 10px; }