kasis :: CSS šrifts

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:

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

Šrifts (font)

Tagad ķersimies klāt atsevišķu HTML elementu noformēšanai. Kā pirmo apskatīsim šriftu jeb fontu, jo piemēros to jau esam lietojuši.

Krāsa (color)

Arī šrifta krāsas noformēšanu netieši jau esam apskatījuši. Kā jau droši vien esat ievērojuši, tad īpašība "krāsa" apzīmējas ar "color". Taču tās vērtību var uzdot trīs dažādos veidos:

var krāsas vērtību vienkārši nosaukt (protams, jālieto angļu valoda :)), piemēram "black", t.i., "melns". Šis ir labs variants, ja nepieciešams izmantot tikai pamatkrāsas, jo krāsu apzīmējumus vārdiski parasti ir vieglāk atcerēties. Taču šādi izmantojamo krāsu skaits ir ierobežots, jo W3C CSS standarts atbalsta tikai 16 krāsu vārdiskos nosaukumus:

black	silver	gray	white
maroon	red	purple	fuchsia
green	lime	olive	yellow
navy	blue	teal	aqua

var lietot heksadecimālo (sešpadsmitnieku) sistēmu, piemēram "#000000", t.i., "melns". Ievērojiet, ka priekšā jāliek simbols "#". Krāsu vērtības heksadecimālajā un rgb sistēmā viegli uzzināt, lietojot kādu attēlu apstrādes programmu, piemēram Adobe Photoshop. Tikai, ja ir tāda iespēja, ieķeksējiet, lai tiktu rādītas web krāsas (only web colors). Pretējā gadījumā izvēlētā krāsa pārlūkprogrammā var tikt attēlota nekorekti;
visbeidzot var lietot rgb (Red Green Blue) sistēmu, kad tiek nodefinētas visu trīs komponenšu vērtības, piemēram "rgb(255,0,0)", t.i., "sarkans". Ievērojiet sintaksi - sākumā tiek paziņots, ka lietosim rgb sistēmu "rgb", tad apaļajās iekavās uzdod atbilstoši sarkanās, zaļās, zilās krāsas vērtības tās atdalot ar komatu. Krāsu vērtības nedrīkst sajaukt vietām! Lai noteiktu rgb vērtības, atkal var lietot Adobe Photoshop, Paint.NET (bezmaksas produkts) vai kādu citu programmu.

Lūk CSS kods..

p {color: black}
p.a {color: #FFCC99}
p.b {color: rgb(255,0,0)}

..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>
Melns teksts
Interesants teksts
Sarkans teksts
</body>
</html>

..un rezultāts!

Melns teksts

Interesants teksts

Sarkans teksts

Šriftu saime (font family)

Arī šriftu saimēm jau esam netieši pieskārušies. Citiem vārdiem sakot, nodefinējot īpašības "font family" vērtību mēs pasakām kādu šriftu lietosim. Šriftu nosaukumus (vērtības) var atrast kaut vai MS Word-ā. Tikai jāņem vērā, ka daudzi šrifti neatbalsta latviešu mīkstos un garos burtus!

CSS kods..

p {font-family: arial}
p.x {font-family: papyrus}

..HTML kods (atļaušos vairs nerakstīt visu HTML kodu, bet tikai to, kas attiecas uz apskatāmo tēmu. Viss kods ir redzams iepriekšējos piemēros.)..

Ariala teksts
Papirusigs teksts

..rezultāts!

Ariala teksts

Papirusigs teksts

Šriftu stils (font style)

Īpašībai "font style" ir tikai trīs iespējamās vērtības:

normal - mums ierastais, nesavērstais šrifta stils;
italic - teksts būs kursīvā;
oblique - slīpraksts (tiesa, īsti neredzu to milzīgo :) atšķirību no "italic").

CSS kods..

p {font-style: normal}
p.a {font-style: italic}
p.b {font-style: oblique}

..HTML kods..

Parasts teksts
Kursīva teksts
Slīpraksts

..rezultāts!

Parasts teksts

Kursīva teksts

Slīpraksts

Šrifta biezums jeb treknraksts (font weight)

Šī būtu īpašība, kuru lietojot MS Office programmas mēdz apzīmēt ar terminu "bold". Atšķirībā no tik ierastā MS Word u.c. Office programmām šeit šrifta biezums ir viegli regulējams. To var veikt divējādi:

manuprāt ērtāk lietojamas ir biezuma skaitliskās vērtības sākot ar 100 (plāns) līdz 900 (ļoti biezs). Parasti apzīmējot vērtību lieto veselus simtus, nevis, piemēram, 125, jo tik smalka precizitāte parasti būs grūti pamanāma;
var lietot biezuma vārdiskās vērtības. Tās ir šādas: lighter, normal, bold, bolder.

CSS kods..

p {font-weight: 500}
p.a {font-weight: lighter}
p.b {font-weight: bolder}

..HTML kods..

Šrifta biezums = 500.
Šrifta biezums = "lighter".
Šrifta biezums = "bolder".

..rezultāts!

Šrifta biezums = 500.

Šrifta biezums = "lighter".

Šrifta biezums = "bolder".

Šrifta lielums (font size)

Pieminēšu tikai divas šīs īpašības vērtības:

var noteikt nemainīgu lielumu izmantojot pikseļus jeb punktus ("px");
jeb relatīvu lielumu attiecībā pret noklusēto (defaulto) šrifta lielumu procentu veidā ("%"). Piemēram, ja mēs esam nodefinējuši, ka rindkopu teksta šrifts attēlojams 14px lielumā, bet pirmās katogorijas rindkopām ("p.1") šriftu lielumu nodefinēsim 130% lielumā, tad šie 130% tiks rēķināti no 14 pikseļiem (skatīt piemēru).

CSS kods..

p {font-size: 14px}
p.x {font-size: 130%}

..HTML kods..

Šrifta lielums = 14 pikseļi.
Šrifta lielums = 130 procenti.

..rezultāts!

Šrifta lielums = 14 pikseļi.

Šrifta lielums = 130 procenti.

Kopsavilkuma piemērs

CSS kods..

p {color: red;
font-family: arial;
font-style: italic;
font-size: 14px}

p.x {color: #FFCC99;
font-family: papyrus;
font-weight: bold;
font-size: 120%}

..HTML kods..

Sarkans teksts.
Interesants teksts.

..rezultāts!

Sarkans teksts.

Interesants teksts.

<< Atpakaļ

Tālāk >>