HTML ja CSS algajatele (Osa 31): Värvid ja taustad

Värvus omadused kirjeldavad elementide esile tõstetud värvi (tekstivärv). Värvide määramine on võimalik mitmel erineval viisil. Tavaliselt kasutatakse heksadesimaalseid väärtusi. Need väärtused algavad alati eelnevalt postitatud ristiga. Tavaliselt järgneb sellele kolm numbri- ja/või tähepaari. Need tähistavad punast, rohelist ja sinist. Värvide määramine toimub alati järgmise skeemi järgi:

RRGGBB

Märgis #ffffff põhjustab valge värvi. Kui kasutatakse aga #000000, kuvatakse värvina must. "Mõistlikes" HTML-redaktorites on vastavad värvivalijad olemas.

Saate heksadetsimaalsed koodid kindlaks teha. Lisaks on mitmel veebisaidil (nt http://www.farbtabelle.net/) värvide jaoks vastavad ülevaated saadaval.

CSS-is on võimalik heksadetsimaalsete värviväärtuste kirjutamist lühendada. See põhimõte ei kehti siiski kõigi värviväärtuste kohta. See töötab tegelikult vaid siis, kui üks väärtus koosneb kolmest samast paarisest. Tüüpilised näited sellest on värvimääratlused musta ja valge jaoks. Tavaliselt kirjutatakse need järgmiselt:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Seda süntaksit saab ka lühendada.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

CSS-is on lubatud ka RGB-väärtused. Siin tuleb märkida arvulistest väärtustest 0 kuni 255 need komadega eraldatult kirja panna. Värvide järjestus vastab heksadesimaalsetele värvidele.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Nagu näide näitab, on võimalik kasutada ka protsentuaalseid märke, mis praktikas aga harva esinevad.

Veel üks võimalus värvide määratlemiseks on värvimärksõnad. Mõned näited on järgmised:

• black

• red

• blue

• yellow

• white

• green

Vastav määratlus võiks välja näha järgmiselt:

p { 
 color: white; 
 background: black; 
}

Pange tähele, et CSS3-s on saadaval lai valik värvimärksõnu. CSS3 on võtnud üle värvide nimetused SVG spetsifikatsioonist. Ülevaate saadavalolevatest värvide nimetustest leiate aadressilt http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Tausta defineerimine

Taust on koondnimekiri, mis sisaldab järgmisi võimalikke väärtusi, mis selles õpetuse jätkus veel üksikasjalikult esitletakse:

• tausta kinnitus

• tausta värv

• tausta pilt

• tausta asukoht

• tausta kordamine

Üksikmärgendid tuleb üksteisest eraldatuna kirja panna tühikute abil. Ei ole oluline, millises järjekorras seda tehakse. Kõiki väärtusi pole tarvis märkida.

Näide:

p { 
    taust: läbipaistev
    url(logo.jpg)
    kerimine korrata 0% 0%; 
 }

Taustavärvid

Elemendile taustavärv määramiseks kasutatakse omadust tausta värv.

div { 
   tausta värv: #009999;
}

Väärtusena esitage soovitud värv.

Taustagraafikud

tausta pilt määrab taustaks graafika. Kui see omadus määratakse välises CSS-failis, viitavad suhtelised teepunktid kausta, kus see CSS-fail asub.

• mitte – pole taustagraafikat

• URI – graafiku teeülesanne

Siinkohal on ka näide.

<div style="taustapilt:url(hinten.jpg); vahemik:20px; täidis:20px">
    Tere tulemast PSD-Tutorials.de-sse!
</div>

Palun olge taustapiltide kasutamisel ettevaatlik. Liiga silmatorkavad taustapildid ei tee tekstide loetavust just lihtsaks.





On muidugi veebisaite, kus visuaalsus on ainus oluline asi. Seal võib kindlasti kasutada silmatorkavamaid taustu.

Kerivad taustad

Pikemate elementide korral liigub taustapilt lehekülje kerimisel kaasa. Omadusega taustakinnitus saab selle vastu seista.

• fikseeritud – liigub kaasa

• kerimine – taustagraafik seisab paigal ja kohandub brauseriaknaga (vaateaknaga).

Omadust taustakinnitus kasutatakse loomulikult tavaliselt koos tausta pildiga.

Näide:

div.fest {
    background-image: url(taust.gif); 
    background-repeat: no-repeat;
 }

Tausta positsioon

Über die Eigenschaft background-repeat wird festgelegt, an welcher Position der Hintergrund beginnen soll. Bezugspunkt ist das Element, für das die Grafik definiert wurde.

• Prozentangabe – ein oder zwei Werte, die den Abstand der Grafik von der oberen linken Ecke des Elements bestimmen. Bei zwei Werten steht der erste für den horizontalen, der zweite für den vertikalen Abstand. Bezugspunkt ist nicht die obere linke Ecke der Grafik, sondern ein Punkt innerhalb der Grafik, der ebenfalls durch die x/y-Werte angegeben wird.

• Längenangabe – bestimmt den Abstand der Grafik von ihrer linken oberen Ecke zur linken oberen Ecke des Elements. Erlaubt sind ein oder zwei Werte. Sind zwei Werte angegeben, bestimmt der erste den Horizontalabstand, der zweite den Vertikalabstand.

Darüber hinaus sind auch noch die folgenden Schlüsselwörter möglich:

• left – horizontal linksbündig

• center – zentriert

• right – horizontal rechtsbündig

• top – vertikal obenbündig

• bottom – vertikal untenbündig

Hier ein Beispiel, wie so etwas aussehen kann:

p { 
   background-position: 8em top; 
}

Korduvad taustapildid

Ob und wie eine Hintergrundgrafik wiederholt wird, wenn sie kleiner als der angezeigte Bereich ist, lässt sich mit background-repeat bestimmen.

• repeat – das Hintergrundbild wird vertikal und horizontal elementfüllend wiederholt.

• repeat-x – die Grafik wird nur horizontal wiederholt.

• repeat-y – die Grafik wird nur vertikal wiederholt.

• no-repeat – die Grafik wird nicht wiederholt.

Auch hierzu ein Beispiel:

body { 
   background-repeat: repeat-y; 
}

In diesem Fall wird die Grafik also nur vertikal wiederholt.

Setzt man hingegen repeat-y ein, erfolgt die Wiederholung ausschließlich horizontal.





Dieses Tutorial hat gezeigt, wie leistungsfähig CSS auch auf dem Gebiet der Farben und Bilder ist.