HTML un CSS iesācējiem (31. daļa): Krāsas un fona apstrāde

Par color īpašību tiek aprakstīta elementu priekšplāna krāsa (teksta krāsa). Krāsu norādīšana var notikt uz visdažādākajām veidām. Klasiski jāizmanto heksadecimālie vērtības. Šīs vērtības vienmēr sākas ar iepriekš norādītu zīmi. Parasti tam seko trīs skaitļu un/vai burtu pāri. Šie pāri norāda sarkanu, zaļu un zilu. Krāsu norādīšana vienmēr notiek pēc šāda veida:

RRGGBB

Norādījums #ffffff izraisa baltu krāsu. Savukārt, izmantojot #000000, tiks parādīts melns kā krāsa. "Racionālos" HTML redaktoros ir pieejami attiecīgie krāsu izvēlētāji.

Ar varat iegūt heksadecimālās koda vērtības. Turklāt daudzās tīmekļa vietnēs (piemēram, http://www.farbtabelle.net/) var atrast attiecīgas krāsu pārskatus.

CSS ir iespēja saīsināt heksadecimālo krāsu vērtību rakstību. Tomēr šo principu nevar piemērot visām krāsu vērtībām. Tas tiešām strādā tikai tad, ja vērtība sastāv no trim vienādiem pāriem. Tipiski piemēri ir melnā un baltā krāsu definīcijas. Parasti tās tiek ierakstītas šādi:

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

Šo sintaksi var saīsināt arī šādi.

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

0 līdz 255, kas atdalītas ar komatiem. Krāsu norādīšanas secība atbilst heksadecimālajām krāsām.

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

• black

• red

• blue

• yellow

• white

• green

Atbilstošs definīcijas variants var izskatīties šādi:

p { 
 color: white; 
 background: black; 
}

http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definēt fona attēlu

Pie background ir apkopoti šādi iespējamie izvēles, kas turpmākajos šīs pamācības gaitā tiks detalizēti apskatīti:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Atsevišķi norādījumi jāieraksta atstarpēs. Kādā secībā tas tiek darīts, nav svarīgi. Nav nepieciešams norādīt visus vērtības.

Piemērs:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Fona krāsas

Lai piešķirtu elementam fona krāsu, jāizmanto īpašība background-color.

div { 
   background-color: #009999;
}

Kā vērtību norāda vēlamo krāsu.

Fona attēli

background-image nosaka attēlu fona krāsu. Ja šī īpašība tiek ierakstīta ārējā CSS failā, tad relatīvās ceļu norādes attiecas uz direktoriju, kur atrodas CSS fails.

• none – bez fona attēla

• URI – ceļš uz attēlu

Vēl viens piemērs.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Laipni lūdzam vietnē PSD-Tutorials.de!
</div>

Ritējoši foni

background-attachment ir iespējams novērst fona attēla pagriešanos kopā ar lapas ritēšanu, ja elements ir ilgs.

• fixed – rit līdzi

• scroll – fona attēls paliek nederēts un ir novietots pārlūkprogrammas logā (Viewport).

Īpašību background-attachment parasti izmanto kopā ar background-image.

Piemērs:

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

Fona pozīcija

Ar īpašību background-repeat tiek nosprausts, kurā pozīcijā fons jāsākas. Atsauce ir uz elementu, kuram ir definēta grafika.

• Procentu norāde - viens vai divi vērtības, kas nosaka attālumu starp grafiku un elementa augšējo kreiso stūri. Divos gadījumos pirmais nosaka horizontālo, bet otrais - vertikālo attālumu. Atsauce nav grafikas augšējais kreisais stūris, bet gan punkts iekšpusē grafikas, kas arī ir norādīts ar x/y vērtībām.

• Garuma norāde - nosaka attālumu starp grafikas kreiso augšējo stūri un elementa kreiso augšējo stūri. Atļautas ir viena vai divas vērtības. Ja norādītas divas vērtības, pirmā nosaka horizontālo attālumu, otra - vertikālo attālumu.

Tāpat ir iespējami arī šādi atslēgvārdi:

• left - horizontāli pa kreisi

• center - centrēts

• right - horizontāli pa labi

• top - vertikāli uz augšu

• bottom - vertikāli uz leju

Šeit ir piemērs, kā tas var izskatīties:

p { 
   background-position: 8em top; 
}

Atkārtojošie fona attēli

Vai un kāda veidā fona grafika tiks atkārtota, ja tā ir mazāka par rādīto platību, ir iespējams noteikt ar background-repeat.

• repeat - fona attēls tiks atkārtots vertikāli un horizontāli, lai aizpildītu visu elementu.

• repeat-x - grafika tiks atkārtota tikai horizontāli.

• repeat-y - grafika tiks atkārtota tikai vertikāli.

• no-repeat - grafika netiks atkārtota.

Šeit ir vēl viens piemērs:

body { 
   background-repeat: repeat-y; 
}

Šajā gadījumā grafika tiks atkārtota tikai vertikāli.

Ja tiek izmantots repeat-y, atkārtošana notiks tikai horizontāli.





Šis pamācības materiāls ir parādījis, cik spēcīga ir CSS krāsu un attēlu jomā.