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

Vēl iesaku:

W3Schools
Krāsu palete

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

Teksts (text)

Krāsa (color)

Īpašības "color" piederību varētu piedēvēt arī sadaļai "text" nevis "font", taču tā kā tai nav specifikācijas, tad šis strīds patiesībā būtu lieks. Par īpašību "color" var lasīt sadaļā "font".

Teksta novietojums (text-align)

Runājot par teksta novietojumu, paralēles droši vien varētu vilkt ar teksta apstrādes programmām (piemēram MS Word), kad mēs tekstu varējām novietot vienā no četriem stāvokļiem:

Aplūkosim piemēru:
CSS kods..

p {text-align: left}
p.a {text-align: right}
p.b {text-align: center}
p.c {text-align: justify}

..HTML kods..

<p>Teksts pie kreisās malas.</p>
<p class="a">Teksts pie labās malas.</p>
<p class="b">Nocentrēts teksts.</p>
<p class="c">Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām.</p>

..rezultāts!

Teksts pie kreisās malas.

Teksts pie labās malas.

Nocentrēts teksts.

Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām.

Teksta dekorēšana (text-decoration)

Šīs īpašības pamatdoma varētu būt - "kur vilksim līniju!":

Piemērs:
CSS kods..

p {text-decoration: underline}
p.a {text-decoration: overline}
p.b {text-decoration: line-through}
a {text-decoration: none}

..HTML kods..

<p>Pasvītrots teksts.</p>
<p class="a">Līnija virs teksta.</p>
<p class="b">Līnija tekstam pa vidu.</p>
<a href="smuka_bilde.jpg" target="_blank">Rau, saite bez tradicionālā pasvītrojuma!</a>

..rezultāts!

Pasvītrots teksts.

Līnija virs teksta.

Līnija tekstam pa vidu.

Rau, saite bez tradicionālā pasvītrojuma!

Teksta atkāpe (text-indent)

Teksta pirmās rindas atkāpi no malas var noteikt divējādi:

CSS kods (pie reizes tekstu arī izlīdzināsim pēc abām malām, lai piemērs būtu uzskatāmāks)..

p {text-indent: 20px;
text-align: justify}

p.x {text-indent: 2cm;
text-align: justify}

..HTML kods..

<p>Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi.</p>

<p class="x">Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi.</p>

..rezultāts!

Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi.

Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi.

Atstarpe starp vārdiem vai burtiem (spacing)

Atstarpi tekstā var regulēt (palielināt vai samazināt) starp:

Abos gadījumos īpašību vērtība var būt tikai divējāda: "normal" (noklusētā jeb default) vai arī uzdots konkrēts attālums (piemēram "px" vai "cm"):

CSS kods..

p {word-spacing: 20px}
p.a {word-spacing: 1cm}
p.b {letter-spacing: 4px}

..HTML kods..

<p>Starp vārdiem 20 pikseļu atstarpe.</p>
<p class="a">Starp vārdiem 1 centimetra atstarpe.</p>
<p class="b">Starp burtiem 4 pikseļu atstarpe.;/p>

..rezultāts!

Starp vārdiem 20 pikseļu atstarpe.

Starp vārdiem 1 centimetra atstarpe.

Starp burtiem 4 pikseļu atstarpe.

Citas īpašības

Ir vēl dažas īpašības, kurām šobrīd negribu veltīt īpašu uzmanību, tamdēļ tās tikai pieminēšu. Ja ir vēlme, tad varat izmēģināt tās paši uz iepriekšējo piemēru bāzes, tikai nomainot CSS atbilstošās īpašības un to vērtības:

īpašība apraksts vērtība
"text-transform" teksta burtu attēlojums "none", "capitalize" (visi vārdi sākas ar lielajiem butiem), "uppercase" (visi burti ir lielie), "lowercase" (visi burti ir mazie)
"white-space" teikums turpināsies uz priekšu, kamēr neieliksim tagu <br/> "normal", "pre", "nowrap" (teikums turpinās)
"unicode-bidi"   "normal", "embed", "bidi-override"

Kopsavilkuma piemērs

CSS kods..

h4 {color: red;
font-family: arial;
text-align: center;
font-size: 16px;
text-decoration: underline;
letter-spacing: 4px}

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

..HTML kods..

<h4>CSS</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>

..rezultāts!

CSS

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-2009, kasis.lv. Visas tiesības aizsargātas.