Dedovanje  kaskadnih stilov

• Primer  stila definiranega v zunanji datoteki:

h3  { color: red; text-align: left; font-size: 8pt }

• Primer stila v glavi dokumenta:

h3  { text-align: right; font-size: 20pt }

• Vrednosti, ki jih dobijo vse označbe <h3> so:

color: red; text-align: right; font-size: 20pt

• Iz stila, definiranega v zunanji datoteki  se podeduje: color: red; Stil v glavi dokumenta prekrije ostale lastnosti stila, definiranega v zunanji datoteki: text-align: right; font-size: 20pt

 

HTML element <div>

• <div> je bločni element, ki ga uporabljamo za oblikovanje enega ali več bločnih in vrstičnih elementov znotraj sekcije, ki jo oklepa.

• Primer:

V tem besedilu smo uporabili div:  

 

<div style="color:#FF0000;">

       <h1> To je poglavje znotraj <i>div sekcije</i> </h1>

       <p>To je odstavek znoraj <strong>div </strong> sekcije.</p>

</div>

 

 

HTML element <span>

• <span> je vrstični element, ki ga uporabljamo za oblikovanje enega ali več vrstičnih elementov znotraj sekcije, ki jo oklepa. 
• Primer:

<p>To je odstave k

       <span style="color:#0000FF;">v katerem smo uporabili

               <strong>span element. </strong>

       </span>

       Ta del odstavka ne uporablja <i>span elementa </i>.

</p>

<p>

       <span style="color:#00DD45;">

       To je še en odstavek, v katerem imamo vse njegove vrsticne elemente znotraj

               <strong> span elementa .</strong>

       </span>

</p>

 

 

 
   

Uporaba lastnosti "class " pri selektorju

Kateremukoli elementu lahko predpišemo lastnost “class”, katere vrednost je ime razreda, ki mu element pripada. Ime si lahko poljubno izberemo, da bomo kasneje lažje brali napisano kodo, pa je priporočljivo, da se da že iz imena razreda sklepati, kakšni elementi mu pripadajo. Posamezen element lahko pripada tudi več kot enemu razredu. To dosežemo tako, da za vrednost lastnosti “class” naštejemo več imen razredov, ki jih ločimo s presledki (presledek ne more nastopati v imenu razreda).

 

Primer dvojne definicije HTML označbe <p>:

p.desno   {text-align: right}

p.centrirano  {text-align: center}

       
 

Z lastnostjo “class”  se pri elementu odločimo, katero definicijo oblike za ta element bomo uporabili:

<p class= "desno">

      Ta odstavek je desno poravnan.

      </p> 

    <p class= "centrirano">

      Ta odstavek je izpisan centrirano.

      </p>

  

Uporabimo lahko le eno definicijo selektorja class v eni HTML označbi.

Uporaba lastnosti class pri HTML elementih

• Če ne nastopa pri elementu lastnost “class”, se uporabi privzeta oblika za ta element.

 

Primer:

 

 

 

p  {font-family: courier}

p.sansserif {font-family: sans-serif}

 

 

 

 

<p>To je odstavek v fontu curier.</p>

<p class="sansserif">To je odstavek v fontu sansserif.</p>

 

Izpuščanje imena HTML označbe pri definiciji kaskadnega stila

 

Primer:

.centriraj {text-align: center}

 

 

Če izpustimo ime HTML označbe pri definiciji kaskadnega stila, se ta definicija uporablja pri vseh HTML označbah skupaj s selektorjem “class”. Poglejmo si dva primera:

<h1 class="centriraj">

     Ta naslov je centriran.

      </h1>

 

   <p class="centriraj">

            Ta odstavek je centriran.

      </p>

  

Uporaba oznak (label) v kaskadnih stilih

Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno pojavitev nekega elementa, imamo dve možnosti. Ali to naredimo pri samem elementu z uporabo lastnosti “style”, vendar to ni priporočljivo, ker se vsebina in oblika preveč mešata. Druga možnost je, da izbrano pojavitev elementa posebej poimenujemo, kar storimo tako, da elementu definiramo lastnost id, katere vrednost je (enolična) oznaka tega elementa. Oznako si lahko poljubno izberemo, paziti pa moramo, da ne bodo različni elementi imeli enakih oznak.

      

Primer oznake:

   
 

      Stil se uporabi, vsepovsod, kjer naletimo na oznako para1 v HTML označbi <p>

<p id="para1">Tekst v odstavku</p>

    

      Primer oznake, ki se uporabi v vseh elementih HTML z oznako zeleno :

*#zeleno   {color: green}

  

      V dokumentu HTML se na to oznako sklicujemo, kot je podano na primerih:

<h1 id="zeleno">Naslov</h1>

   <p id="zeleno">Odstavek</p>

  
 
   
 

Skupine elementov HTML z enakimi lastnostmi

Večim elemetom, razredom ali enotam lahko predpišemo iste oblikovne lastnosti v enem koraku, tako da njihove selektorje naštejemo enega za drugim, pri čemer jih ločimo z vejicami. Za vejico zaradi preglednosti običajno naredimo še presledek. V spodnjem primeru nastavimo rdečo barvo in centriramo besedilo za vse glavne naslove ( h1), elemente, ki uporabljajo razred “centriraj” in elemente z oznako “opis”. V drugem primeru vsem elementom nastavimo desno poravnavo besedila in modro barvo

 

Primera:

h1, .centriraj, #opis  { text-align: center; color: red  }

*     { text-align: right; color: blue  }