Kvaliteetsed mallid, kergesti kohandatavad Laadi sisu kohe alla Üle 10 000 kontrollitud arvustuse Kvaliteet Saksamaal valmistatud
Proovi nüüd
HTML ja CSS algajatele

HTML ja CSS algajatele (Osa 29): Ilus tekst CSS abil (1)

Kõik õpetuse videod HTML ja CSS algajatele

CSS pakub laias valikus omadusi teksti välimuse kohandamiseks. Need hõlmavad kirjatüüpi, kirjastiili ja varjutamist.

CSS teksti omaduste hulka kuuluvad kirjatüüp, kirjastiil ja kirjakaal. Need omadused on ennekõike loogilised HTML elementide jaoks, kus teksti sisaldub (p, i jt). Neid omadusi saab kasutada ka tabelite puhul.

Kirjatüübi määramiseks kasutatakse font-family omadust.

<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
  p {font-family:verdana, sans-serif;} 
  h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
  <h1>PSD-Tutorials.de</h1>
  <p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
  <h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>

Seal tasub mainimist, et tavalisteks kirjatüüpideks on näiteks Arial, Helvetica ja Times Roman. CSS omaduse font-family abil määratakse soovitud kirjatüübid. Kui määratud on mitu kirjatüüpi, siis on tähtis järjekord. Kui esimene määratud kirjatüüp on saadaval, siis seda kasutatakse. Soovitud kirjatüübid tuleb eraldada komadega. Viimase juhisena kirjutatakse tavaliselt nn geneeriline kirjaliigi perekond. Geneerilise kirjaliigi perekonna abil antakse veebibrauseritele võimalus valida kirjatüüp, mis on sarnane antud kirjatüübile.

• serif = kirjatüüp sarvedega

• sans-serif = kirjatüüp ilma sarvedeta

• cursive = kursiveeritud kirjatüüp

• fantasy = ebatavaline kirjatüüp

• monospace = kirjatüüp, kus kõik tähed on sama laiusega.

Kirjastiil

Omadusega font-style saab määrata kirjastiili. Kui valitud kirjatüüp seda võimaldab, saab väärtusega italic sundida kaldkirja.

HTML ja CSS algajatele (Osa 29): Ilus tekst CSS abil (1)

Mõne teise kirjatüübi puhul saab kasutada oblique kaldkirjas esitust.

Järgmine CSS omadus, mis mõjutab teksti välimust, on nimega font-variant. Selle abil saab määrata nn kapitälid.

HTML ja CSS algajatele (Osa 29): Ilus tekst CSS abil (1)



Selleks tuleb omadusele font-variant määrata väärtus small-caps.

Kirja suurus

Oluline on määrata ka teksti suurus. CSS pakub selleks omadust font-size. Kirja suurusi saab määrata erinevates ühikutes.

• EM

• REM

• Pixel

• Protsent

• Võtmesõnad

Võtmesõnadena on saadaval järgmised variandid:

• xx-small – väga, väga väike

• x-small – väga väike

• small – väike

• smaller – väiksem kui ülemelementis

• medium – keskmine

• large – suur

• x-large – väga suur

• xx-large – väga, väga suur

• larger – suurem kui ülemelementis

Allpool on näide, kuidas kirja suurust määrata:

.eins {font-size: 10px;} 
.zwei {font-size: 20px;} 
.drei {font-size: 110%;} 
.vier {font-size: xx-large;}

Ja siin on, kuidas see välja näeb brauseris:

HTML ja CSS algajatele (Osa 29): Ilus tekst CSS abil (1)



Pange tähele, et kirjasuuruse määratlemine on väga keeruline teema, kuna erinevate mõõtühikute kasutamine toob kaasa erinevaid eeliseid ja puuduseid.

Ülevaade sellest, millist mõõtühikut millal eelistada, leiate leheküljelt http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Neile, kes seda läbi ei loe, üks soovitus: kasutage suhtelisi väärtuseid nagu em ekraanikuvade jaoks. Trükikujunduste puhul kasutage aga absoluutseid ühikuid, nagu pt.

Kirja kaal

Liigume nüüd edasi nn kirja kaaluga. Selle abil määratakse kirja paksus ja tugevus. Selleks kasutatakse omadust font-weight.

.fett {
   font-weight:bold; 
}



Selle süntaksi abil kuvatakse valitud tekst paksus kirjas.

HTML ja CSS algajatele (Osa 29): Ilus tekst CSS abil (1)



Võimalikud väärtused on bold (paks), bolder (eriti paks), lighter (peenike) ja normal. Lisaks on lubatud numbrilised väärtused 100, 200, 300, 400, 500, 600, 700, 800 ja 900. Need ulatuvad ekstrapeenest (100) eriti paksuni (900).

Määratluste kokkuvõte

Seoses fondimääratlustega on oluline ka line-height atribuut, mille abil saab määratleda reavahe. Räägin sellest atribuudist hiljem üksikasjalikumalt. Selles punktis tuleb seda ainult mainida, kuna see mängib teatud rolli järgneva font atribuudiga seoses.

Seni esitatud teavet kirjatüübi esitamise kohta saab omavahel kombineerida. Selleks kasutatakse üldist font atribuuti. See hõlmab järgmisi individuaalseid andmeid või sulgeb need endasse.

• font-style

• font-variant

• font-weight

• font-size

• line-height

• font-family

font abil saab kombineerida erinevaid kirjastiile. Siin võite määrata eelnevalt nimetatud atribuudid, kuid te ei pea kasutama kõiki. Kohustuslikud on siiski kirja suuruse ja -pere atribuudid.

Tänu lühikirjutusviisile saab CSS-failid hoida lühemad ja ülevaatlikumad.

Järgima peab aga näidatud järjestust. Kui on määratud nii atribuudid font-size kui ka line-height, tuleb need eraldada kaldkriipsuga. Kui selles punktis antakse ainult üks väärtus, siis kehtib see atribuudi font-size kohta.

Näide:

p { 
    font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif; 
 }



font-size-adjust on välja töötatud selleks, et saaks ligikaudu sama suurt kirjastiili kuvada. Erinevatel kirjastiilidel on sama kirja kõrguse korral erinevad x-kõrgused. Siiski on suurema x-kõrgusega kirjad paremini loetavad. Nii võib juhtuda, et dokument on halvasti loetav, kui algsel kirjastiilil puudub ja asendatakse teisega, millel on väiksem x-kõrgus. font-size-adjust abil peaks olema võimalik seda erinevust tasakaalustada.

Näide:

h1 {
    font-family: Verdana, 
    'Times New Roman', 'Courier New';
    font-size-adjust: 0.61;
 }



Järgmises õpetuses õpite lisavõimalusi, kuidas saate oma veebisaidi teksti välimust kohandada.

Eelmine tekstiõpetus HTML ja CSS algajatele (Osa 28): Kuidas juurdepääs selektorite abil toimib (3)
HTML ja CSS algajatele (Osa 30): Ilus tekst CSS abil (2) Järgmise tekstiõpetuseni