HUOM! Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla

 Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.

Css

Kohteesta Wikikko - kansan taitopankki
Loikkaa: valikkoon, hakuun


HTML-sivun aloitus[muokkaa]

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Css-tiedoston haku HTML-sivulle[muokkaa]

<link rel="stylesheet" type="text/css" href="csstiedostonimi.css">

Esimerkki 1
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<link rel="stylesheet" type="text/css" href="tiedostonimi.css">

	<title>Sivun otsikko tähän</title>
</head>

Internetsivun css muuttaminen[muokkaa]

Css-tiedosto sijaitsee palvelimella ja tavallisen surffaajan 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.

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:

  1. Tallenna css-tiedosto esimerkiksi työpöydälle
  2. Avaa Internet Explorer
  3. valitse oikeasta yläkulmasta ratas > Internet-asetukset
  4. valitse ’Helppokäyttötoiminnot’
  5. valitse ’Käytä asiakirjojen muotoilussa omaa tyylisivua’
  6. valitse Selaa… > hae em. tallennettu tiedosto
  7. valitse OK > OK.

Poistaminen käytöstä:

  1. Avaa Internet Explorer
  2. valitse oikeasta yläkulmasta ratas > Internet-asetukset
  3. valitse ’Helppokäyttötoiminnot’
  4. poista valinta kohdasta ’Käytä asiakirjojen muotoilussa omaa tyylisivua’
  5. 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>