Sākumlapa
"Pirmā web lapa"
HTML
Citi materiāli

Ceļošana - kalni

CSS

Sintakse
Sasaiste ar HTML
Kategorijas un ID
Šrifts
Teksts
Fons
Saraksta     noformējums
Saites
Kastes
Pozicionēšana

Vēl iesaku:

W3Schools
Krāsu palete

Pārlūku atbalsts CSS
 (1),   (2) 

Fons (background)

Atbilstoša fona izvēle ir ļoti būtiska web projekta sastāvdaļa. Kā fonu var izmantot kādu krāsu vai attēlu.
Visos gadījumos, kad runa iet par fonu, tad tiek lietota īpašība "background", kurai ar domuzīmes ("-") palīdzību piesaista konkretizējošo daļu, piemēram "background-color" nozīmē "fona krāsa".

Fona krāsa (background-color)

Kā jau minēju, tad lai HTML elementam (piemēram, virsrakstam, tabulai, rindkopai utt.) piesaistītu kādu fona krāsu, lieto īpašību "background-color". Kā jau ierasts, tad arī šajā gadījumā īpašības "color" vērtības var būt vārdiski nosaukta krāsa, kā arī krāsas vērtība rgb vai heksadecimālajā veidā. Par to varēja lasīt sadaļā "font". Tomēr gribu vērst uzmanību uz kādu jaunu iespējamo vērtību - "transparent", jeb "caurspīdīgs". Objektam ar šādu fonu būs redzams cauri augstākstāvošā objekta fons, piemēram rindkopai ar "caurspīdīgu" fonu, kura atrodas tabulā, būs redzams tabulas fons.

CSS kods..

table {background-color: yellow}
p {background-color: white}
p.x {background-color: transparent}

..HTML kods..

<table width="350px">
<tr><td>
<p>Teksts ar baltu fonu.</p>
<p class="x">Teksts ar caurspīdīgu fonu.</p>
</td></tr>
</table>

..rezultāts!

Teksts ar baltu fonu.

Teksts ar caurspīdīgu fonu.

Fona attēls (background-image)

Šajā gadījumā par fonu tiks izmantots kāds iepriekš sagatavots attēls. Pie tam attēls var būt:

Piemērs:
CSS kods..

table.ziema {background-image: url(sniegav.jpg)}
p.x {color: red; background-color: transparent}

..HTML kods..

<table class="ziema" width="350px" height="100px">
<tr><td>
<p class="x">Te būs viss, ko domāju par ziemu.</p>
</td></tr>
</table>

..rezultāts!

Te būs viss, ko domāju par ziemu.

Piemērs:
CSS kods..

table.flize {background-image: url(flize.jpg)}
p.x {color: red; background-color: transparent}

..HTML kods..

<table class="flize" width="350px" height="100px">
<tr><td>
<p class="x">Virtuves flīzējums!!</p>
</td></tr>
</table>

..rezultāts!

Virtuves flīzējums!!

Fona attēla atkārtošanās virziens (background-repeat)

Dažkārt rodas nepieciešamība, lai fona attēls atkārtotos tikai kādā noteiktā virzienā. Lai to panāktu, mums nāksies klāt pie jau aplūkotās HTML objekta īpašības "bacground-image" pievienot vēl vienu kokretizējošu īpašību - "background-repeat" ar kādu no sekojošām vērtībām:

CSS kods..

p {background-image: url(flize.jpg);
background-repeat: repeat}

p.a {background-image: url(flize.jpg);
background-repeat: repeat-x}

p.b {background-image: url(flize.jpg);
background-repeat: repeat-y}

p.c {background-image: url(flize.jpg);
background-repeat: no-repeat}

..HTML kods..

<p>Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu.</p>

<p class="a">Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu.</p>

<p class="b">Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu.</p>

<p class="c">Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu.</p>

..rezultāts!

Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu.


Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu.


Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu.


Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu.

Fona attēla pozicionēšana (background-position)

Kā jau droši vien būsiet ievērojuši, tad bez papildus norādēm fona attēla noklusētā sākuma atrašanās vieta ir HTML elementa (taga) kreisais augšējais stūris. Taču sākotnējo attēla atrašanās vietu var mainīt ar papildus īpašību "background-position". Tās vērtības var būt sekojošas:

  1. "top left" - noklusētais variants, kad attēla sākuma pozīcija ir HTML elementa augšējā kreisajā stūrī;
  2. "top center" - attēla sākuma atrašanās vieta ir augšējā vidus pozīcijā;
  3. "top right" - attēla sākuma pozīcija ir augšējā labajā stūrī;
  4. "center left" - attēls sākotnēji ir vertikāli nocentrēts, bet pie kreisās malas;
  5. "center center" - attēls sākotnēji ir nocentrēts gan pa vertikāli, gan horizontāli;
  6. "center right" - attēls sākotnēji ir vertikāli nocentrēts, bet pie labās malas;
  7. "bottom left" - attēla sākuma pozīcija ir apakšējā kreisajā stūrī;
  8. "bottom center" - attēla sākuma atrašanās vieta ir apakšējā vidus pozīcijā;
  9. "bottom right" - attēla sākuma pozīcija ir apakšējā labajā stūrī;
  10. visbeidzot attēla sākuma pozīciju var noteikt procentuāli ("%") vai ar konkrētu attālumu ("px") pa "x" un "y" asi, piemēram: "bacground-position: 15px 20px". Ievērojiet, ka abas mērvienības atdala tikai ar atstarpi. šajā gadījumā atskaite sākas no HTML elementa kreisā augšējā stūra.

 

 Attēlu novietojums atbilstoši to kārtas numuram

CSS kods..

p {background-image: url(flize.jpg);
background-positon: "bottom right";
background-repeat: no-repeat}

p.a {background-image: url(flize.jpg);
background-positon: "center center";
background-repeat: repeat-x}

p.b {background-image: url(flize.jpg);
background-position: 20% 80%;
background-repeat: no-repeat}

..HTML kods..

<p>Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī.</p>

<p class="a">Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos.</p>

<p class="b">Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu.</p>

..rezultāts!

Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī.

Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos.

Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu.

Fona attēla piesaiste (background-attachment)

Šī īpašība nosaka fona attēla uzvedību, ja aplūkojamais materiāls ir tik liels, ka, piemēram, nesatilpst pārlūka logā un nākas pielietot ritināšanu (ritjoslu), lai materiālu pārlūkotu. Īpašībai var būt divas vērtības:

CSS kods..

textarea.a {background-image: url(flize.jpg);
background-attachment: scroll}

textarea.b {background-image: url(flize.jpg);
background-attachment: fixed}

..HTML kods..

<form>
<textarea class="a">Fona attēls ritināsies kopā ar aplūkojamo materiālu. Fona attēls ritināsies kopā ar aplūkojamo materiālu.</textarea>

<textarea class="b">Fona attēls paliks nekustīgs, kamēr aplūkojamais materiāls tiks ritināts. Fona attēls paliks nekustīgs, kamēr aplūkojamais materiāls tiks ritināts.</textarea>
</form>

..rezultāts!

Kopsavilkuma piemērs

Šoreiz izmantosim divus citus sagatavotus attēlus, lai rezultāts būtu nedaudz baudāmāks:

radial - virsrakstam un fons - fonam, kā arī fona krāsu pamattekstam.

CSS kods..

body{background-image: url(fons_p.jpg)}

table{background-color: #CCCCFF;
border-color: gray;
border-width: 1px;
border-style: solid}

h4 {color: red;
font-family: arial;
text-align: center;
font-size: 16px;
letter-spacing: 4px;
background-image: url(radial_p.jpg)}

p {color: black;
font-family: arial;
font-size: 12px;
text-align: justify}

..HTML kods..

<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html; charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>

<body>
<table width="700px" align="center">
<tr>
<td>
<h4>Mana web lapa</h4>
<p>Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts.</p>
</td>
</tr>
</table>
</body>
</html>

..rezultāts!

Mana web lapa

Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts.




Autortiesības © 2005-2011, kasis.lv. Visas tiesības aizsargātas.