ensinnäkin
Tausta Värin ja Tekstin Muokkaaminen Css-kielellä.
- Koodi: Valitse kaikki
body {
background-color: #000000; //Tekee mustan Taustavärin
background: url('kuvan osoite'); //Laittaa Sivulle Taustakuvan
color: #FFFFFF; //Tekstin väri Valkeaksi
font-size: 130%; //Fontin koko 30% suuremmaksi
font-family: arial; //Fontin Tyyli Arialiksi
}
Muista Lopettaa nämä Background-color jne. koodit ; merkkiin
Ja jos haluat tehdä erilaisia tyylejä css-kielellä laita esim.
- Koodi: Valitse kaikki
.header {
background-color: #000000; //Tekee mustan Taustavärin
background: url('kuvan osoite'); //Laittaa Sivulle Taustakuvan
color: #FFFFFF; //Tekstin väri Valkeaksi
font-size: 130%; //Fontin koko 30% suuremmaksi
font-family: arial; //Fontin Tyyli Arialiksi
}
jolloin voit laittaa sen tyylin esim. Div:lle näin:
- Koodi: Valitse kaikki
<div class="header">
tekstiä
</div>
background-color: #000000;
background: url('kuvan osoite');
color: #FFFFFF;
font-size: 130%;
font-family: arial;
nämä tulevat tulevat aina { } sulkujen väliin, Koskaan ei ole poikkeuksia.
varmaan ihmettelet miksi
body {
background-color: #000000; //Tekee mustan Taustavärin
background: url('kuvan osoite'); //Laittaa Sivulle Taustakuvan
color: #FFFFFF; //Tekstin väri Valkeaksi
font-size: 130%; //Fontin koko 30% suuremmaksi
font-family: arial; //Fontin Tyyli Arialiksi
}
tuossa ei ole sitten .body, no se johtuu siitä että se antaa tyylin body koodille, samalla tavalla voit tehdä
p { }
jolloin jokaisella <p> tagilla on saman lainen tyyli.
Värit on paras laittaa Heksadesimaali arvoilla.
suurin osa kuvan muokkaus ohjelmista sisältää heksadesimaali arvon, mutta jos et omista sellaista lataa MotDColor
Tallenna tiedosto style.css
ja Muista Aina Laittaa Sivusi <Head> Tagien Väliin Tämä
- Koodi: Valitse kaikki
<link rel="stylesheet" href="style.css" type="text/css" />
Nonnii, Eiköhän harjoitella laittamaan linkit erivärisiksi.
tällä koodilla
- Koodi: Valitse kaikki
a:link { color: #ffe04e; } //linkki jossa et ole vielä käynyt
a:visited { color: #ffe04e; } //Linkki jossa olet käynyt
a:link:hover, a:visited:hover
{ color: #fff2b3; } //Linkki jonka päällä hiiresi on
a:active { color: #ffe04e; } //Linkki joka on aktiivinen
Sinun ei tarvitse kuin vaihtaa # merkin jälkeen olevat merkit haluamasi värin merkeiksi.
Myös tässä käy erilaiset kuten font-family jne. koodit.
Päivitetty Viimeksi 15:01 26.5.2008
Kommenttia Kiitos
