HTML un CSS iesācējiem (daļa 30): Vizuāli pievilcīgs teksts ar CSS (2)

Raksta krāsa tiek iestatīta ar krāsa. Tiek sagaidīta krāsas vērtība.

p { 
   color: red; 
}

Kā vērtību jūs varat norādīt krāsu vārdus vai heksadecimālu krāsas vērtību.

Uzstādiet rakstīšanas virzienu

Izmantojot īpašību virziens, var piespiest elementiem noteikt rakstīšanas virzienu. Interesants ir pretējais rakstīšanas virziens saistībā ar valodām, kurās raksta no labās uz kreiso pusi.

Tāpat var noteikt, no kuras puses tiks sagriezti pārsniedzamie saturs.

• ltr – no kreisās uz labo pusi

• rtl – no labās uz kreiso pusi

Nākamais piemērs parāda, kā izmantot šo īpašību.

.normal {direction:ltr;} 
.rueckwaerts {direction:rtl;}

Šeit ir definētas divas klases.

<p class="normal">Teksts, kurš tiek rakstīts no kreisās uz labo pusi. 1 2 3 4 5 6 7 8 9 0</p> 
<p class="rueckwaerts">Teksts, kurš tiek rakstīts no labās uz kreiso pusi. 1 2 3 4 5 6 7 8 9 0</p>

Rezultāts pārlūkā ir šāds:

Horizontālā teksta līdzināšana

Izmantojot īpašību teksta-līdzinājums, ir iespējams noteikt teksta rindkopu un citu bloku elementu horizontālo līdzinājumu. Noklusējuma iestatījums ir kreisā līdzinājums.

• pa kreisi – kreisā līdzinājums

• pa labi – labā līdzinājums

• centrs – centrēts

• izlīdzināt – līdzināt kā bloku

Piemērs:

<p style="text-align:right;">
    Sveicināti
</p>

Rezultāts izskatās šādi:

Vertikālā līdzināšana

Izmantojot īpašību vertikāla-līdzināšana, var noteikt teksta vertikālu līdzinājumu rindkopas ietvaros attiecībā pret rindkopas augstumu. Norādījums vienmēr attiecas uz vecāko elementu, kas ir iekļauts iekšējā elementā, kas ir inline-elementa veidā. Turklāt tekstu var līdzināt tabulās.

Ir pieejamie šādi vērtības:

• apakszilāks – apakšrindots

• augšējs – paaugstināts

• pamata līnija – līdzināts pamata līnijai

• virsotne – līdzinājums pie vecākā elementa augšējā malas

• apakšējais – līdzināts pie vecākā elementa apakšējās malas

• vidusdaļa – līdzināts viduvē starp augšējo un apakšējo malu vecākajā elementā

• teksta augšā – līdzināts pie tekstam augšējās malas

• teksta apakšā – līdzināts pie tekstam apakšējās malas

• Garumu norāde – pozitīva vai negatīva vērtība pārvieto citu zemāk vai augstāk par pamata līniju.

• Procentuālais daudzums – pozitīva vai negatīva vērtība pārvieto citu zemāk vai augstāk par pamata līniju.

Piemērs:

.pamata-līnija { 
   vertical-align: baseline; 
}

Ņemiet vērā, ka vertikāla-līdzināšana vērtības dažādos pārlūkprogrammās diemžēl tiek ļoti nevienmērīgi interpretētas. Tāpēc noteikti izmēģiniet rezultātus pirms tīmekļa vietnes publicēšanas.

Teksta dekorējums

teksta-dekorējums tiek izmantots, lai piešķirtu tekstiem vai hipersaitiem papildu īpašības.

• nav – nav teksta dekorācijas

• pasvītrojums – pasvītrojums

• pāri – pārvietots

• linija-caur – cauršūts

• mirgo – mirgojošs

Arī šeit piemērs:

a:saites { 
   text-decoration: nav; 
}

Šādā veidā vietnes hipersaitiem netiks pievienots pasvītrojums.

Atstarpes starp atsevišķām vārdiem var noteikt arī eksplisīti.

<span style="word-spacing:0.5em">Laipni lūgti vietnē PSD-Tutorials.de!</span><br />
<span style="word-spacing:1em"> Laipni lūgti vietnē PSD-Tutorials.de!</span>

Tiek gaidīta skaitliska vērtība. Procentuālie norādījumi, diemžēl, nav iespējami.

Līdzīgi kā vārda-atstarpe, ir arī burtu-atstarpe. Tomēr ar burtu-atstarpe tiek norādīta attālums starp atsevišķām teksta burtiem. Arī šeit tiek atļautas skaitliskas vērtības, bet procentuālie norādījumi nav atļauti.

<span style="letter-spacing:0.1em">Piemērteksts ar burtu attālumu 0.1em</span><br> 
<span style="letter-spacing:0.3em">Piemērteksts ar burtu attālumu 0.3em</span><br>

Izmantojot īpašību teksta-transformācija, varat noteikt, vai teksts tiks parādīts lielos burtos vai mazos burtos. Un tas ir neatkarīgi no faktiskās norādes avottekstā. Turklāt ir iespējams piespiest versāļu burtus.

• mazie burti – mazie burti

• versāļu burti – lielie burti

• kapitāli – katra vārda sākumā lielie burti

• nav – nekāda teksta transformācija

Piemērs:

.mazs { 
   tekstā_size: mazie burti; 
}

Pārlūkā rezultāts izskatās šādi:

Atstarpes un rindiņu pārtraukumi

Ar īpašību white-space tiek noteikts, kā atstarpes un rindiņu pārtraukumi, kas ir avottekstā, jāattēlo pārlūkā.

• normāls – tiek ievietots automātisks rindiņu pārtraukums. Turklāt vairākas atstarpes tiek apvienotas vienā.

• pre – rindiņas pārtraukumi tiek attēloti tā, kā tie ir avottekstā.

• bez_wrapa – nenotiek automātisks rindiņu pārtraukums.

• pre-line – vairākas atstarpes tiek apvienotas vienā. Turklāt notiek pārtraukums, ja displeja logs nav pietiekami liels.

• pre-wrap – notiek pārtraukums, ja displeja logs nav pietiekami liels.

Arī šeit sniegšu piemēru:

<pre class="brush:xml;"><!DOCTYPE html>
<html valoda="de">
<galva>
<virsraksts>PSD-Tutorials.de</virsraksts>
<meta kodējums="UTF-8" />
<stils>
body>p {
   fonta-ārā:"Courier New", Kurjers, monosakārba;
   fonta-lielums: 200%;
}
body p {
   krāsa:#0066FF;
}
</stils>
</galva>
<ķermenis>
<p>Pamatteksts 1</p>
<p>Pamatteksts 2</p>
<p>Pamatteksts 3</p>
<div>
  <p>Pamatteksts 4</p>
</div>
</ķermenis>
</html></pre>

Pārlūkā šis izskatās šādi:

Ēna izveide

Ar īpašību text-shadow var tikt noteikta teksta ēna. Jāņem vērā, ka šī īpašība tiek atbalstīta tikai salīdzinoši jaunos pārlūkos. Pārlūki, kuri nevar interpretēt text-shadow, parādīs tekst bez ēnas.

text-shadow tiek lietota šādi:

teksta_ēna: hV vV migla #xxxxxx;

Un šie vērtību nozīmējumi:

• hV – Horizontāla nobīde

• vV – Vertikāla nobīde

• migla – Miglosana

• #xxxxxx – Ēnas krāsa

Nākamajā piemērā tiek aplūkota tipiska piemērošana teksta_ēnai.

.ēna {
   krāsa: #444;
   fonta-lielums: 34px;
   tekstā_ēna: 2px 2px 3px #333;
}

Definēto klasi turpmāk piemēro pirmā līmeņa virsrakstam.

<h1 klase="ēna">PSD-Tutorials.de</h1></pre>

Un šeit atkal skats uz rezultātu:





Kā jau minēts, jūs varat lietot teksta_ēnu bez problēmām, jo pārlūki, kas to neinterpretē, nav negatīvas ietekmes. Teksts tiks attēlots bez ēnas.