Veidojot savu mājas lapu, gribas padarīt to interesantāk, skaistāk. Mainīt fona krāsu, fontus un parēju noformējumu var arī ar HTML valodas palīdzību, taču tās iespējas ir ierobežotas. Šādā gadījumā mums var palīdzēt CSS valoda.
CSS (Cascading Style Sheets) jeb Stila lapas kaskadēšana ir īpaša stila lapas valoda, kas palīdz noformēt HTML valodā uzrakstītu mājas lapu.
HTML valoda palīdz izveidot lapas pamatu, skeletu. Bieži vien, mājas lapas sastāv no vairākām lapām, kurās vieni un tie paši tagi visu laiku atkārtojās. Tāpēc noformēšanai ērtāk un izdevīgāk pielietot CSS valodu, lai uzreiz definēt ārējo izskatu dažādiem tagiem. Tas viss palīdz web-dizainerim uzreiz uzlabot ārējo izskatu visai mājas lapai, kā arī ļauj veidot visu vienotā stilā. Kopumā HTML un CSS veido lielisku tandēmu, kas ļauj programmētajam risināt ļoti dažādus uzdevumus.
Ar CSS palīdzību var:
- uzstādīt burtu izskatu (fontu), krāsu un izmēru;
- rediģēt rindkopas atkāpes, līdzinājumu u.c.;
- izmainīt attālumu starp burtiem, vārdiem un teksta rindām;
- rediģēt un noformēt tabulas;
- iestatīt teksta, attēla vai kāda cita elementa precīzu novietojumu;
- noformēt fonu.
Katrai valodai ir sava sintakse (par to jau runājam iepriekš). Arī CSS sintakse atšķiras no HTML. Tā ir diezgan vienkārša un nosāka kā izskatīsies HTML elements, pievienojot tam īpašību sarakstu.
CSS pieraksts (sintakse) veidojas no 3 daļām:
selektors {atribūts: vērtība;}
Piemērs:
p {color:#900C3F;}
Šajā gadījumā mēs definējām rindkopas krāsu.
Kā mainīt krāsu?
Visbiežāk ar krāsu mēs satopamies vizuālajā mākslā. Kad mēs gleznojam darbu, mēs izmantojam krāsas (guašu vai akvareļkrāsa), otas un uz paletes jaucam vajadzīgo krāsu toni. Bet kā mainīt krāsu web-programmešanā? Te taču nav nē krāsas, ne paletes ar otu... Protams, var vienkārši uzrakstīt - "blue" (zilā). Tā bieži arī dara:
h1 {color: blue;}
Bet katrs cilvēks uztver krāsas nedaudz savādāk. Piemēram, visas šīs krāsas ir zilas!
Kuru konkrēto toni Jums vajag?
Tāpēc web-dizaineri izmanto speciālas tabulas ar krāsu kodiem. Ir dažādi paņēmieni kā kodēt krāsas, bet mēs apskatīsim tikai 2 no tiem.
1. RGB
RGB (Red, Green, Blue) – krāsu sistēma , kas sastāv no 3 pamatkrāsām – sarkanas, zaļas un zilas krāsas, kas tiek projicētas, kā gaisma.
Sajaucot šīs trīs pamatkrāsas kopā dažādās intensitātēs, rodas citas krāsas – kopā vairāk kā 16,7 miljoni krāsu toņu (cilvēka redze spēj izšķirt aptuveni 10 miljonus). Datora atmiņā katrai no RGB pamatkrāsām var būt vērtība 0 - 255. Ja krāsu komponentes netiek izgaismotas, tiek iegūta melna krāsa (0, 0, 0), bet spīdot ar pilnu intensitāti – iegūst baltas krāsas gaismu (255, 255, 255).
2. HEX - heksadecimālais kods
Heksadecimālais kods sastāv no sešiem cipariem (no 1 līdz 9) vai burtiem A,B,C,D un F. Priekšā parasti ir režģa simbols (#). Cipari kodā atbilst sarkanās, zaļās un zilās krāsas daudzumam krāsā. Pirmie divi cipari norāda, cik daudz sarkanā ir konkrētā krāsu tonī, nākamie divi cipari atbild par zaļo un pēdējie divi par zilo. Piemēram, heksadecimālais kods tīrai melnajai krāsai ir #000000. Melns, pēc būtības, ir krāsas trūkums, tāpēc tas ir “000000”. Nav ne sarkanas, ne zaļas, ne zilas krāsas.
Sarkanās, zaļās vai zilās krāsas daudzums var būt diapazonā no 0 līdz 255. Bet katrai krāsai mēs varam iedot tikai 2 ciparus, jo kopā jābūt 6! Ko darīt? Palīgā nāk burti.
Piemērs:
HTML un CSS valodā visbiežāk izmanto HEX kodus. Tīmeklī ir ļoti daudz vietnes ar krāsu kodiem, kurus ērti izmantot programmēšanā, piemēram:
Kā noformēt un izcelt tekstu?
Pēc noklusējuma HTML valodā uzrakstīt mājas lapas pamats ir ļoti vienkāršs - melni burti uz balta fona. Lai padarītu to interesantāk, var mainīt ne tikai teksta krāsu, bet arī pamainīt fonu. Lai to izdarītu, ir jādefinē tags <body>:
body {background-color: #C9FA92;}
Svarīgi!
Tekstam nedrīkst saplūst ar fonu. Lai teksts būtu salasāms, jāizmanto krāsu kontrastus - tumši burti uz gaišā fona vai otrādi!
Var piešķirt īpašu krāsu arī kādai sadaļai vai virsrakstam.
Virsraksts un rindkopa:
h1 {background-color: #B8F936;}
p {background-color: #C0F754;}
p {background-color: #C0F754;}
Sadaļa:
div {background-color:#F4F70F;}
Dažreiz kādu sadaļa var izcelt ne tikai ar krāsu, bet izveidot tai vēl rāmīti (apmali). CSS apmales rekvizīti ļauj norādīt elementa apmales stilu, platumu un krāsu.
Vispirms ar CSS palīdzību pierakstam kā izskatīsies apmale:
Piemērs:
p.punktets {border-style: dotted;
border-color: #247A03;
text-align: center;}
border-color: #247A03;
text-align: center;}
Tad papildinām tagu <p> ar atribūtiem:
-
Piemērs:<p class="punktets"> Teksts</p>
Var pielietot dažādus apmales stilus:- dotted - definē punktētu apmali;
- dashed - nosaka pārtrauktu apmali;
- solid - nosaka parastu, taisni apmali;
- double - nosaka dubulto apmali;
- groove - nosaka 3D rievotu apmali. Efekts ir atkarīgs no apmales krāsas vērtības;
- ridge - nosaka 3D izciļņu apmali. Efekts ir atkarīgs no apmales krāsas vērtības;
- inset - definē 3D ielaiduma apmali. Efekts ir atkarīgs no apmales krāsas vērtības;
- outset - nosaka 3D sākuma robežu. Efekts ir atkarīgs no apmales krāsas vērtības;
- none - nenosaka apmali;
-
var arī sajaukt, apvienot vairākus stilus:p.mix {border-style: dotted dashed solid double;}
