Previous
Next

14. CSS LIETOŠANA

14.1. Pamatjēdzieni

Iepriekšējā nodaļā runājām par to, ka mūsdienās HTML ir strukturāla/semantiska valdoa – tas ir, domāta tam, lai norādītu teksta fragmentu lomu, nevis to izskatu. Tagad esam nonākuši pie rīka, ko lieto tieši izskata norādījumiem. Tā ir sistēma, ko sauc par CSS (angļu Cascading Style Sheets - kaskadētās stila lapas). Stila lapa ir noteikumu kopums, kurā definētas elementu īpašības: platums, atkāpes, burtu lielums, teksta fonts un krāsa, fona attēli, krāsas utt. Savukārt kaskāde ir veids, kā tiek apvienoti vairāku stila lapu norādījumi. Par to sīkāk nākamajā sadaļā.

Stila valoda CSS ir paredzēta HTML (arī XHTML, XML) valodā veidotu dokumentu formatēšanas stila (style) aprakstam. Stilu lietošana ļauj ievērojami paātrināt tīmekļa lappušu noformēšanu, jo stilus var lietot visam vienas lappuses saturam vai visām tīmekļa vietnes lappusēm.

CSS ir ļoti populāra, un to atbalsta visas populārākās pārlūkprogrammas. CSS lietošanu nosaka globālā tīmekļa konsorcija (World Wide Web Consortium, W3C) izstrādāta specifikācija.

13.1.1.CSS sintakse

CSS valoda ir vienkāršāka par dabisko valodu. Piemēram, rindkopas varētu mainīt ar komandu

rindkopu krāsa ir zila un fonta izmērs ir 12 pikseļi.

Angļu valodā to var pierakstīt kā:

paragraph color is blue and font size is 12 pixels.

CSS valodā to pārraksta formā:

p {color:blue; font-size:12px;}

Šī ir viena instrukcija. Atšķirībā no dabiskās valodas, CSS valodā ir jāizsakās precīzi. Ir jāzina, kādas īpašības var mainīt un uz kāda veida vērtībām. Izmantotie apzīmējumi:

M9L_13_10_01

Stilu veido viena vai vairākas noformēšanas instrukcijas (rules). Katrai instrukcijai ir divas daļas:

  • CSS selektors, kas norāda, uz ko attieksies turpmākās deklarācijas;
  • viena vai vairākas deklarācijas. Katra deklarācija satur stila atribūtu un atribūta

vērtību.

Ir dažādi selektoru veidi, kas nosaka stila lietošanas veidu, piemēram:

  • elementa selektors (element selectors). Šādus stilus parasti lieto visiem noteikta tipa HTML elementiem, piemēram, rindkopām, visā tīmekļa lappusē. Piemēram, stils, kuram ir elementa selektors p (rindkopa), var izskatīties šādi:

    p {color:blue; font-size:12px;}

  • klases selektors (class selectors). Šāda tipa stilā ir iestatītas viena vai vairāku stila atribūtu vērtības. Stilu var lietot vienam vai vairākiem dažādiem HTML elementiem tīmekļa lappusē. Klases selektoru norāda ar punktu, kuram seko selektora nosaukums, piemēram, .izcelts:

    .izcelts {color:blue; font-size:12px;}

    Lai šis stils strādātu, attiecīgajam HTML elementam ir jāsatur norāde uz šo klasi. Piemēram, HTML fragmentā:

    <p>Šis teksts ir parasts</p>

    <p class= “izcelts”>Izcelta rindkopa</p>

    <p>Rindkopa ar <span class = “izcelts”> izceltu tekstu</span></p>

  • identifikatora selektors (ID selectors). Šāda tipa stilā arī ir iestatītas vairāku stila atribūtu vērtības, bet stilu parasti pielieto tikai vienam HTML elementam tīmekļa lappusē. ID selektoru norāda ar simbolu #, kuram seko selektora nosaukums, piemēram, #sveiciens;

    #sveiciens {color:blue; font-size:12px;}

    HML fragmentā to ievieto šādi:

    <p> <span id = “sveiciens”>Labdien</span>, cienījamo lasītāj!</p>

  • stils bez selektora jeb iekļautais stils (inline style), kas tiek ievietots HTML elementa iekšienē. Šis veids būtībā neatbilst CSS lietošanas idejai, bet tomēr praksē ir sastopams. Iekļauto stilu norāda, lietojot atribūtu style:

    <p style="color:blue; font-size:12px">Rindkopas teksts.</p>

13.1.2.Stila lapu veidi

Stila lapas pēc norādīšanas HTML dokumentā var iedalīt divos veidos, piemēram:

  • iekšējā stila lapa (internal style sheet) – stila lapa tiek ievietota HTML dokumenta galvā ar tagu pāri <style>, </style>. Šis veids parasti tiek lietots, ja stila lapu piemēro visiem noteikta tipa elementiem visā tīmekļa lappusē. Iekšējās stila lapas piemērs:

    <style type="text/css">

      p {color:black; font-size:14px;}

      .izcelts {color:red; font-size:18px;}

      #sveiciens {color:green; font-size:16px;}

    </style>

  • ārējā stila lapa (external style sheet). Ārējo stila lapu var izveidot, lietojot jebkuru vienkāršu teksta apstrādes lietotni un saglabājot to kā atsevišķu datni ar tipu .css. Ārējo stila lapu norāda dokumenta galvā, parasti lietojot tagu <link />. Ārējo stila lapu lietošana ir vispiemērotākā gadījumos, ja stila lapā definētie stili ir jālieto daudzām lappusēm. Piemēram, visos tīmekļa vietnes dokumentos norāda saiti uz vienu ārējo stila lapu. Rediģējot šīs stila lapas saturu, izmaiņas automātiski parādīsies visos vietnes dokumentos. HTML galvenes piemērs ar saiti uz ārējo stila lapu stils.css:

    <head>

      <title>Parauga lapa</title>

      <link rel="stylesheet" type="text/css" href="stils.css" />

    </head>

13.1.3.Stila lapu piemērošanas prioritāte

Veidojot tīmekļa lappuses, praksē ir sastopami gadījumi, kad vienā HTML dokumentā tiek lietotas dažāda veida stila lapas. Lai atrisinātu iespējamos konfliktus starp stilu lapām, tiek lietota stilu lapu „kaskadēšana” jeb pārklāšana, nosakot stila lapu piemērošanas prioritāti. Kaskadēšanas prioritāte samazinās šādā secībā:

  • iekļautie stili;
  • iekšējās stila lapas;
  • ārējās stila lapas;
  • pārlūkprogrammā lietotās stila lapas.

Pārlūkprogrammas iestatījumos parasti ir noteikti noklusētie stili, ko lieto neformatēta teksta attēlošanai.

13.1.4.Stilu veidošanas paņēmieni

Stilus var veidot dažādi, piemēram:

  • definēt stilu, lietotājam pašam ievadot nepieciešamos CSS noteikumus;
  • izmantot HTML redaktoros ietvertās stilu un stila lapu veidošanas iespējas.

Nākošajos nodaļas punktos tiks apskatīta iekšējo un ārējo stila lapu veidošana lietotnē KompoZer.

Previous
Next