ensinnäkin
Tausta Värin ja Tekstin Muokkaaminen Css-kielellä.
- Koodi: Valitse kaikki
html, body {
background-color: #000000; //Tekee mustan Taustavärin
background: url('kuvan osoite'); //Laittaa Sivulle Taustakuvan (eri kansioissa olevat kuvat esim. Samassa hakemistossa oleva kansio josta haluat kuvan laitetaan "kansionnimi/kuvannimi" ja alemmassa hakemistossa olea laitetaan "../(kansio/)kuvannimi" kansiota ei välttämättä ole, joten laitoin sen sulkuihin)
color: #FFFFFF; //Tekstin väri Valkeaksi (määrää koko alueen fontin ellei erikseen määritellä muualla)
font-size: 130%; //Fontin koko 30% suuremmaksi (toimii myös pikseleinä mutta siinä tilanteessa "%" tilalle "px")
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 (eri kansioissa olevat kuvat esim. Samassa hakemistossa oleva kansio josta haluat kuvan laitetaan "kansionnimi/kuvannimi" ja alemmassa hakemistossa olea laitetaan "../(kansio/)kuvannimi" kansiota ei välttämättä ole, joten laitoin sen sulkuihin)
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, ellei sitä erikseen määritellä.
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.
Aina ei välttämättä tarvitse laittaa ".header" sen voi myös laittaa "#header" jolloin koodia täytyy hiukan muokata,
- Koodi: Valitse kaikki
<div class="header">
</div>
vaihetaan
<div id="header">
</div>
tässä tapauksessa voi muokata monta erilaista tyyliä "class" ja "id" koodin avulla.
- Koodi: Valitse kaikki
<div class="header" id="h1">
</div>
noista tyyleistä en lisää nyt esimerkkiä.
Muokkausta pitkästä aikaa.
Päivitetty Viimeksi 12.2.2009
Kommenttia Kiitos
