Siirry sivun sisältöön Avut CSS HTML JS Wp

Värien ja taustan ominaisuudet

Nämä ominaisuudet korvaavat lähinnä (väheksyttäviksi julistetut) BODY-elementin esitykselliset attribuutit ja fonttielementtien värimääritykset. Myös taustakuvan hallinta on hieman merkintäkieliä monipuolisempaa.

Color

Color-ominaisuudella ilmoitetaan elementtien väri.

Huomiot

Mahdollisien väriristiriitojen välttämiseksi kannattaa määritellä edustan ja taustan ominaisuudet yhdessä (mikäli jompaan kumpaan tahdotaan yleensäkään vaikuttaa).

Esimerkit

<blockquote style="color:#f00">
<p>Värit <em>periytyvät</em> emoelementistä
jälkeläisiin!</p></blockquote>

<p style="color:blue">
<span xml:lang="en" lang="en" style="color:red">Red</span> on
Windowsin <abbr title="Video Graphics Array" style="color:teal">
VGA</abbr>-palettiin kuuluva avainsana.</p>

Background Color

Background Color -ominaisuudella ilmoitetaan elementtien taustaväri.

Huomiot

• Mahdollisien väriristiriitojen välttämiseksi kannattaa määritellä edustan ja taustan ominaisuudet yhdessä (mikäli jompaan kumpaan tahdotaan yleensäkään vaikuttaa).
• Taustavärit eivät periydy, vaan emoelementtien taustat näkyvät oletusarvojen (transparent) läpi.

Esimerkit

<blockquote style="background-color:#f00">
<p>Taustavärit <em>eivät periydy</em> emoelementistä jälkeläisiin,
vaikka ensisilmäyksellä niin voisi päätellä. Miksi
<b style="background-color:#fff">EM</b>-elementin
tausta on punainen?</p></blockquote>

<p style="background-color:#ccffff">
<span xml:lang="en" lang="en" style="background-color:red">
Red</span> on Windowsin
<abbr title="Video Graphics Array" style="background-color:yellow">
VGA</abbr>-palettiin kuuluva avainsana.</p>

Background Image

Background Image -ominaisuudella ilmoitetaan elementtien taustakuva.

Huomiot

• Mahdollisien väriristiriitojen välttämiseksi kannattaa taustakuvan yhteyteen määritellä myös saman sävyinen taustaväri.
• Läpinäkyvyyttä sisältävissä kuvissa on huomioitava, että taustakuva asettuu aina taustavärin päälle, jolloin taustaväri kuultaa läpi.

Esimerkit

<p style="background-image:url(tapetti.gif)">
Suhteellinen viittaus samassa hakemistossa olevaan taustakuvaan.
</p>

<p style="background-image:url(tapetti.tif);background-color:#7ff">
Tässä taustakuva ei lataudu (virheellinen tiedostotunniste),
jolloin taustaväri jää voimaan.</p>

<p style="background-color:#bff;background-image:url('ruudut.gif')">
Tässä kappaleessa taustaväri kuultaa
kuvan läpinäkyvien osien takaa.</p>

Background Repeat

Background Repeat -ominaisuudella ilmoitetaan mahdollisen taustakuvan (background-image ilmoituksen) kertauksesta.

Oletuksenomaisesti (repeat) taustakuvat kertautuvat, sekä vaaka-, että pystysuunnassa, mutta tällä ominaisuudella taustakuvien kertautumista voidaan rajoittaa:

repeat-x

Kuva kertautuu vain vaakasuunnassa.

repeat-y

Kuva kertautuu vain pystysuunnassa.

no-repeat

Kuvaa ei kerrata ollenkaan.

Esimerkit

<p style="background-image:url(tapetti.gif);
 background-repeat:no-repeat">
Tämän elementin taustakuvaa ei kerrata ollenkaan.</p>

<p style="background-image:url(tapetti.gif);
 background-repeat:repeat-y">
Tämän elementin taustakuva<br />
kertautuu vain pystysuunnassa.</p>

<ul style="background-repeat:repeat-x;
 background-image:url(ruudut.gif)">
<li>Tässä on lista</li>
<li>jonka taustakuvaa pyydetään</li>
<li>kertautumaan vain vaakasuunnassa.</li>
</ul>

Background Attachment

Background Attachment -ominaisuudella ilmoitetaan mahdollisen taustakuvan kiinnittyminen, joko kiinteäksi (fixed), tai vieriväksi (scroll).

Esimerkki 1

<div style="background-image:url(kiemura.gif);
 background-repeat:repeat-x;
 background-attachment:scroll">
<p>Esimerkkitekstikappale.</p>
<pre>
Esimuotoiltua
	tekstiä
		täytteeksi
</pre>
<p>Toinen esimerkkitekstikappale.</p>
<p>Kolmas esimerkkitekstikappale.</p>
<p>Neljäs esimerkkitekstikappale.</p>
</div>

Esimerkki 2

<div style="background-image:url(kiemura.gif);
 background-repeat:repeat-x;
 background-attachment:fixed">
<p>Esimerkkitekstikappale.</p>
<pre>
Esimuotoiltua
	tekstiä
		täytteeksi
</pre>
<p>Toinen esimerkkitekstikappale.</p>
<p>Kolmas esimerkkitekstikappale.</p>
<p>Neljäs esimerkkitekstikappale.</p>
</div>

Background Position

Background Position -ominaisuudella ilmoitetaan mahdollisen taustakuvan alkusijainti, joko mitta-arvoilla, prosenttiarvoilla, tai avainsanoilla.

Huomiot

Mitat ja prosentit

• Taustakuvan sijainti ilmoitetaan yleensä arvoparilla. Ensimmäinen arvo koskee vaakatasoa, toinen pystytasoa.
• Jos vain yksi arvo ilmoitetaan, se koskee vaakatasoa ja pystytason arvoksi tulee 50%.
• Mittoja ja prosentteja saa kombinoida keskenään.
• Negatiiviset arvot ovat sallittuja.

Avainsanat

• Taustakuvan sijainti ilmoitetaan yleensä arvoparilla.
• Jos vain yksi arvo ilmoitetaan, se tulkitaan seuraavasti:
  • top = 50% 0%
  • center = 50% 50%
  • bottom = 50% 100%
  • left = 0% 50%
  • right = 100% 50%
• Avainsanoja ei saa kombinoida mittojen ja prosenttien kanssa.

Esimerkit

<ul style="background-image:url(tapetti.gif);
 background-position:right center;
 background-repeat:no-repeat">
	<li> Ilmoitetaan taustakuvan sijainti.</li>
	<li> Käytetään avainsanoja.</li>
	<li> Pyydetään oikealle ja keskelle.</li>
</ul>

<div style="background-image:url(tapetti.gif);
 background-position:50%;
 background-repeat:no-repeat">
Ilmoitetaan taustakuvan sijainti.
Käytetään lyhennettyä ilmoitusta,
joka vastaa taustakuvan keskittämistä.</div>

<pre style="background-image:url(tapetti.gif);
 background-position:15% 5mm;
 background-repeat:no-repeat">
Ilmoitetaan taustakuvan sijainti.

Kombinoidaan prosentti- ja mitta-arvoja.</pre>

Background

Background on pikakirjoitusominaisuus, jolla voidaan yhdistää kaikki taustaan vaikuttavat ominaisuudet yhdeksi ilmoitukseksi.

Huomiot

• Yksittäisten taustaominaisuuksien alkuarvo astuu voimaan, jollei jotain ominaisuutta ilmoiteta.
• Ominaisuudet erotetaan toisistaan välilyönnillä. Ilmoitusjärjestys on vapaa.

Esimerkit

<pre style="background:url(../lumi.gif) repeat-x bottom">
Suomen
	kesä
		on
			onneksemme
					vähäluminen
</pre>

<p style="background:url(../lumi.tif) #fffafa repeat-y right">
Tässä taustakuva ei lataudu (virheellinen tiedostotunniste),<br />
jolloin vain taustaväri jää voimaan.
</p>