Parasti dokuments sastāv no vismaz diva veida, nozīmes, svarīguma un noformējuma ziņā atšķirīgām, rindkopām – pamatteksta un virsraksta. Ja dokuments ir pietiekoši garš un labi organizēts, tad šo dažādo rindkopu veidu skaits kļust krietni lielāks. Var tikt izmantoti vairāku līmeņu virsraksti, parasti teksti, saraksti utt. Lai lasītājs varētu atšķirt uzreiz pēc skata šīs dažādās rindkopas un tās atpazīt, piemēram, noteikt, kuri ir pirmā līmeņa virsraksti, viena veida rindkopas tiek noformētas vienādi – tām tiek izveidots savs stils. Savs stils var tikt izveidots atsevišķām vārdu grupām, piemēram, dzīvnieku un augu latīņu nosaukumiem. Pietiekoši attīstītos teksta redaktoros (piemēram, OpenOffie/LibreOffice Write, Word Perfect, Microsoft Word) ir iespējams izmantot stilus. Tas ļoti atvieglo dokumentu noformēšanu, jo katrai rindkopai jāpiešķir tikai atbilstošais stils (1 iestādāms parametrs). Stilam ir piesaistīta noteiktu noformējuma veidi (n-parametri: fonts, lielums, atkāpes utt.), kuri atsevišķi vairs nav jāiestāda.
Programmas nodrošina iespēju veidot jaunu stilu, balstoties uz jau kādu esošu stilu – veidot esošā stila jaunu klasi. Tas nozīmē, ka, izmainot pamatstila iestādnes, šīs izmaiņas ietekmēs visus pārējos stilus, kas ir tikuši balstīti uz to. Izmainītas tiks tikai tās iestādnes, kas nav tikušas definētas jaunveidotajā stilā. Piemēram, stils „Normal” nosaka melnus, 12 punktu lielus burtus. Uz tā balstoties ir izveidots jauns stils „Izcelts_teksts”, kuram ir iestādīta sarkana krāsa. Nomainot stilam „Normal” teksta krāsu no melna uz zilu un burtu lielumu no 12 uz 18 punktiem, „Izcelts_teksts” teksts atbilsotši būs sarkans, 18 punktu liels.
Līdzīgi stilus uztur arī HTM valoda. Sākot ar HTML 4.0 versiju, ir iespējas izmantot stilu lapas (style sheet), kas nodrošina lappušu veidotājiem gan noteikt jau esošo stilu iestādnes, gan veidot jaunus stilus. Mūsdienās lielākā daļa pārlūkprogramma lielākā vai mazākā mērā uztur stilu lapas. Stilu lapu atbalsts jau ir sākot no «Netscape Navigator 4.x.» un «Microsoft Internet Explorer 3.x.» laikiem.
Jau no paša sākuma HTM valodā ir iekļauti dažadi stili. Līdz šīs valodas 4. versijai šo stilu izskatu pilnībā noteica izmantotā pārlūkprogramma. Vidēs, kas atbalsta HTML 4. versiju, šo stilu izskatu var ietekmēt WWW lappuses veidotājs, izmantojot stilu lapas. Pamatstils ir BODY, kura iestādnes ietekmē pārējos stilus.
Teksta stilu (neveido jaunu rindkopu) saraksts arodams šeit.
Pie rindkopu stiliem būtu pieskaitāma parasta rindkopa <P>, virsraksti, saraksti. Īpaši izceļams stils, kas izkārto burtus kā teksta ekrānā.
Pastāv iespēja pāveidot gan jau esošos stilus, gan veidot jaunus. Stilu aprakstus (stilu lapas, cascading style sheet, CSS) var iekļaut gan pašā lapā, gan turēt to kā atsevišķu failu. Stilu apraksta parezrakstība nav atkarīga no tā, kur tas atrodas. Ar stilu aprakstu iespējams definēt gan teksta izskatu un izkārtojumu, gan arī citu objektu, piemēram, tabulas, tabulas rindas, attēla izskatu un novietojumu lapā. Vienmēr jāpatur prātā, ka lapas izskats var būtiski atšķirties starp dažādām pārlūkprogrammām.
Ja vēlies stila aprakstus ievietot lapā, visērtāk tos ievietot lapas galviņā.
Ja stila apraksti atrodas atsevišķā failā, tad lapas galviņā jāievieto norāde uz šo failu, piemēram, <LINK rel="stylesheet" href="stili.02.css" type="text/css">.
Ir iespējams nodefinēt atsevišķu stilu lapas apskatei uz ekrāna, atsevišķu – izdrukai, piemēram, <LINK rel="stylesheet" href="stili.02.css" media="screen"> un <LINK rel="stylesheet" href="stili.03.css" media="print">.
Šādi var arī panākt ka daļa objektu ir redzama tikai uz ekrāna, daļa – tikai izdrukā.
Vienlaikus var pievienot vairākas stilu lapas.
Ja stili apraksts tiek iekļauts pašā lapā, tad stilu definīcija sākas ar komandu <STYLE TYPE="text/css"> un noslēdzas ar </STYLE>.
Pašu stilu aprakstus vēlams paslēpt no pārlūkiem, kas neprot izmantot lietotāja definētus stilus.
To panāk aiz <STYLE TYPE="text/css"> ievietojot „<!-- ” un pirms </STYLE> ievietojot „ -->”.
Vispārējs stila definīcija tiek veidota pēc parauga: stils.klase {atribūts: vērtība;}.
Iespējams definēt atsevišķi klasi, kas nav piesaistīta noteiktam stilam.
Tādā gadījumā apraksts sākas ar punktu: .klase {atribūts: vērtība;}.
Iespējams definēt atsevišķu stilu(-s) klases ietvaros: .klase stils {atribūts: vērtība;}.
Atsevišķi var definēt arī iezīmi ID.
Tādā gadījumā apraksts sākas ar redeli (#): #iezime {atribūts: vērtība;}.
Pirmajā brīdī var šķist, ka nav atšķirības, vai lieto class vai id. Ieteikums: kamēr no lapas noformējuma viedokļa nav atšķirības starp šiem abiem, jālieto „class”. „Id”, kā jau norāda pats nosaukums (tas ir saīsinājums no vārda identity („identitāte”, „personība”)), ļauj atšķirt vienu lapas daļu no citas. Šeit aplūkojams klašu un id izmantošnas piemērs.
Paraugs viena stilu aprakstam, kurā ir izmainīts parastais rindkopas izskats, kā arī definēta klase „ziime”. Šajā piemērā ir apkopoti visbiežāk izmantotie stilu atribūti. To nozīmi var saprast izmantojot angļu valodas vārdnīcu:
Lai lapas noformēšanā varētu izmantot klasi, jāizmanto atribūts „class”, piemēram, <hr class="ziime"> vai <p class="ziime">.
Parametru „border”, „margin” un „padding” vērtības iespējams norādīt vienā rindā ierakstot no viens līdz četriem skaitļiem:
Lai parādītu atšķirību starp margin un padding izveidots nākamais piemērs:
Šai rindkopai piešķirta klase „mala”.
Šai rindkopai piešķirta klase „atkaape”.
Atcerieties, ka, lai tiktu klāt norāžu stila „A” dažādiem stāvokļiem, kā atdalītājs jāizmanto kols, piemēram, A:link (neapmeklētas norādes krāsa), A:visited (apmeklētas norādes krāsa), A:hover (norādes krāsa, kad peles kursora atrodas virs norādes).
Tas ir pamatoti, jo, piemēram, „hover” nav ne klase, ne iezīme, bet gan stāvoklis, kuru iespējams definēt arī citām klasēm, piemēram, „.mana_klase:hover”.
Piemēram, ja definēti stili:
<div class="kaste">
<p>Šim tekstam ir jābūt ievietotam gaišā kastītē. Kastei vajadzētu būt noapaļotiem stūriem. Novietojot peles kursoru virs kastītes, tai jāpaliek tumšākai.
<p>Tiesa, šī krāsas maiņa dažos pārlūkos strādā tikai tad, kad lapas sākumā ir ierakstīts:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</div>
Vieniem un tiem pašiem objekta veidiem, piemēram, <p>, <a >, <b>, var tikt piešķirts dažāds izskats vienas lapas ietvaros izmantojot komandu <DIV> .. </DIV>.
Šī komanda ļauj mums ātri un ērti pārformatēt tekstu, jo nav nepieciešams, piemēram, mēklēt, kurai rindkopai ir kāda klase (jo to nav bijis nepieciešams rakstīt katrai rinkopai atsevišķi), bet pietiek šo klasi nomainīt komandai <DIV>.
Dažiem veciem pārlūkiem bija būtiska stilu definēšanas secība.
Vispirms bija jadefinē A, A:link un A:visited, tad paša definētas klase, piemēram, A.uzmanibu.
Pašās beigās var definēt A:hover.
Tagadējiem pārlūkiem šis ierobežojums vairs nav novērots.
Ja nepieciešams vienas lapas ietvaros izmantot dažādi iekrāsotas norādes, jāizmanto stila iezīmes, piemēram:
#gaisais {color: #BB7733;}
a:hover#gaisais {color:green;}
Attiecīgi norāde jāveido iekļaujot id:
<a href=../ >Pakāpties uz augšu</a> <a href=../ id=gaisais>Pakāpties uz augšu</a>
Vēl viens veids, ka definēt stilus, ir iekļaut stilu aprakstu kā komandas parametru.
Šo stila definēšanas veidu ieteicams izmantot tikai gadījumos, kur kādam objektam ir jāuzdod tikai viņam piemītošas īpašības.
Stilu kā parametru var piekabināt gandrīz jebkurai HTML komandai, piemēram, <code style='font-weight:bold; font-variant:small-caps; font-size: 110%;'>Šeit mazie burti izliekas par lielajiem burtiem</code>.
Ja izmaināmais objekts ir rindkopas (teikuma , vārda) daļa, tad jāizmanto komanda <span>, piemēram, šeit ir <span style='color: yelow; letter-spacing: 0.3em; font-weight:bold; text-shadow: 1px 2px 1px navy;'>spilgti, retināti, resni burti, kas met ēnu</span>.
Ar vārdu „rāmis” (frame) HTML un teksta redaktoros tiek saprastas pavisam atšķirīgas lietas.
Par tīmekļa lapusē izmantotajiem rāmjiem var lasīt nodaļā «Rāmji».
Savukārt, ja tiek meklāts līdzeklis teksta un zīmējumu izkārtošanai lapā (vārda „rāmis” izpratne teksta redaktoros), tad HTML valodā to var paveikt izmantojot stilus.
Lai izvietotu objektus, tiek izmantoti parametri „position:absolute|relative”, „top:”, „right:”, „left:”, „bottom:”, „float:”, piemēram,
<div style="position:absolute; left:65px; top:42px;">..<div>
novietos atbilstošo objektu 65 pikseļu attālumā no kreisās 42 pikseļus no labās lapas malas.
Pie tam tas tiks uzlikts pa virsu tur jau esošajiem objektiem.
Kā jau visus izmērus, arī novietojumu var uzdot pikseļos (px), procentos (%) vai em vienībās. Lai gan pēdējā vienība ir ērta uzdodot brīvo telpu ap tekstu („margin”, „padding”), jo ir atkarīga no pamatteksta izmēra, objekta izkārtošanai tā ne vienmēr ir noderīga.
Izmantojot objekta parametru overflow, iespējams panākt pēc skata ko līdzīgu, kā lietojot IFRAME. Ar šī parametra palīdzību iespējams daļu no objekta (teksta, attēla utt.) „paslēpt”, atstājot lodziņu pa kuru apsaktīt objektu. Parametram var noteikt vai lodziņam ritjoslas tiks pievienotas pēc vajadzības (auto), vai tās būs vienmēr (scroll), vai nebūs redzamas nekad (hidden), vai arī objekts būs redzams arī ārpus noteiktām robežām (visible).
Piemērs overflow izmantošani ir ievietots šādā „lodziņā”, kura izmēri ir atkarīgi no lapas pārlūka loga izmēriem. Pie noteikta pārluka loga platuma samazinājuma, kad viss piemērs neietilps „lodziņā”, jāparādas ritjoslai.
<STYLE>
<!--
.lodzins {overflow:auto; width:40%;margin-left:20%;}
-->
</STYLE>
<DIV class=lodzins>
Šis ir piemērs.
</DIV>
Izmantojot stilu ierkastus "unicode-bidi: bidi-override; direction: rtl;" iespējams isup osierk zu sābal on tītskar utsket usiv iav uļad.
Pamēģiniet šo rindkopu iekopēt atmiņā un tad ievietot vienkārša teksta redaktorā
.
Ar stilu palīdzību iespējams izmantot attēlus par tapetēm, gan ievietot tos tekstā. Vairāk par to lasāms nodaļā „Rastrattēlu ievietošana”.
Šeit būs doti paraugi stilu aprakstu izmantošanai. Lai tos redzētu, uzklikšķini uz attiecīgā teikuma.
<DIV>.
|
Lappusi
«stili.shtml» veidoja karlo@lanet.lv 2015.12.29-00:55 |
||||||||
