HTML ir CSS pradedantiesiems (31 dalis): Spalvos ir fono paveiksliukai

Apie color savybę aprašomas elemento priekinio plano spalva (teksto spalva). Spalvų nurodymas yra galimas įvairiomis formomis. Klasikinis variantas yra hex spalvų reikšmės. Šios reikšmės visuomet prasideda užrašu #. Prie to prisideda įprastai trys skaitmenų ir/arba raidžių poros. Jos reiškia raudoną, žalią ir mėlyną spalvas. Spalvų nurodymas visada vyksta pagal šį schemą:

RRGGBB

Nurodymas #ffffff atneša baltą spalvą. Jeigu pasirenkate #000000, bus pateikiama juoda spalva. "Protingose" HTML redaktoriuose yra galimi spalvų pasirinkimai.

Čia galite nustatyti hex spalvų kodus. Be to, yra daugybė tinklalapių (pvz., http://www.farbtabelle.net/) su atitinkamomis spalvų schemomis.

CSS suteikia galimybę sutrumpinti hex spalvų reikšmių rašymą. Tačiau šis principas negalioja visiems spalvų kodams. Tai veikia tik tada, kai reikšmė sudaryta iš trijų vienodų porų. Įprastai šios spalvų nurodymo formos yra tos:

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

Šią sintaksę taip pat galima sutrumpinti.

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

CSS taip pat leidžia naudoti RGB reikšmes. Čia reikia nurodyti dešimtaines reikšmes nuo 0 iki 255, kurias atskiria kableliai. Spalvų nurodymo tvarka atitinka hex spalvas.

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

Kaip rodantys pavyzdžiai parodo, taip pat galimos procentinės reikšmės, tačiau praktikoje jos retai pasitaiko.

Daugiau galimybių spalvų nurodymams suteikia spalvų raktažodžiai. Kai kurie pavyzdžiai:

• black

• red

• blue

• yellow

• white

• green

Atitinkamas apibrėžimas galėtų atrodyti taip:

p { 
 color: white; 
 background: black; 
}

Atkreipkite dėmesį, kad su CSS3, spalvų raktažodžių paletė dar kartą ženkliai išplečiama. CSS3 įtraukė spalvinius pavadinimus iš SVG specifikacijos. Spalvų pavadinimų sąrašą rasite čia.

Apibrėžti fono spalvą

Paremtas background yra apibendrinimas įvairių galimų vertimų, kuriuos toliau šiame vadove išsamiai aptarsime:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Atskiri nurodymai yra atskirti tarpais. Kokia tvarka jie yra nurodyti nesvarbu. Visiems nurodymams nereikia būti nurodytiems.

Pavyzdys:

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

Fono spalvos

Elementui priskirti fono spalvą naudojama savybė background-color.

div { 
   background-color: #009999;
}

Kaip reikšmę nurodome norimą spalvą.

Fono vaizdai

background-image nustato vaizdą kaip foną. Jei ši savybė aprašoma išorinėje CSS byloje, santykiniai kelių nurodymai rodo, kurioje CSS byloje yra.

• none – jokio fono vaizdo

• URI – vaizdo keliui nurodymas

Čia taip pat pateikiamas pavyzdys.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Dirbdami su fono vaizdais, prašome būti atsargūs. Per stiprūs fonai tikrai nepadės pagerinti teksto skaitymo.





Akivaizdu, kad yra tinklalapių, kuriuose svarbu tik išvaizda. Tokiu atveju tikrai galima naudoti ryškesnius fonus.

Slinkti fonai

Ilgų elementų atveju fono vaizdas slenka kartu su puslapio slinkimu. Su background-attachment tai galima sustabdyti.

• fixed – slenka kartu

• scroll – fono vaizdas išlieka stovėti ir yra nukreiptas į naršyklės langą.

Savybė background-attachment paprastai naudojama kartu su background-image.

Pavyzdys:

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

Fono pozicija

Naudojant savybę background-repeat nustatoma, kurioje vietoje pradės fono paveikslėlis. Taškas yra elementas, kuriam nustatytas grafikas.

• Procentų nurodymas - vienas ar du vertės, kurios nusako atstumą nuo grafikos viršutinio kairiojo kampo. Jei nurodomos dvi vertės, pirmoji reiškia horizontalų, o antroji vertikalaus atstumą. Tašku nėra grafikos viršutinis kairysis kampas, o taškas viduje grafikos, kuris taip pat nurodytas x/y vertėmis.

• Ilgio nurodymas - nustato atstumą nuo grafikos kairiojo viršaus iki elemento kairiojo viršaus kampo. Leidžiamos viena ar dvi vertės. Jei nurodomos dvi vertės, pirmoji nustato horizontalų atstumą, o antroji vertikalaus atstumą.

Be to, taip pat galimi šie raktiniai žodžiai:

• left - horizontaliai kairiai

• center - centruota

• right - horizontaliai dešiniai

• top - vertikaliai viršuje

• bottom - vertikaliai apačioje

Čia pateiktas pavyzdys, kaip tai galėtų atrodyti:

p { 
   background-position: 8em top; 
}

Pasikartojantys fono paveikslėliai

Ar ir kaip foninis paveikslėlis kartojamas, jei jis mažesnis nei rodomas plotas, nusakoma naudojant background-repeat.

• repeat - fono paveikslėlis kartojamas vertikaliai ir horizontaliai elementiškai.

• repeat-x – grafikos kartojimui naudojamas tik horizontalus būdas.

• repeat-y - grafikos kartojimui naudojamas tik vertikalus būdas.

• no-repeat – grafikos nekartoti.

Čia dar vienas pavyzdys:

body { 
   background-repeat: repeat-y; 
}

Pakeitus į repeat-y, kartojimas vyksta tik horizontaliai.





Šis vadovėlis parodė, kaip galingas CSS yra spalvų ir vaizdų srityje.