35 CSS linkimine HTML dokumendiga

Nagu eespool mainitud, saab kasutada välist stiililehte (css fail), HTML dokumendi sisemist stiili ja reastiili. Järgnevalt vaatame, kuidas neid veebilehega seotakse.

Reastiili rakendamine

Harvematel juhtudel, kui on tarvis mingit ühte, konkreetset veebilehe elementi eriliselt kujundada, kasutatakse reastiili (Inline Style).

Reastiili kasutamisel läheb palju CSS võimalusi raisku, sest stiil luuakse konkreetse HTML elemendi algusmärgendisse.

Reastiili kasutamiseks tuleb vastava HTML elemendi algusmärgendisse lisada atribuut style järgmisel kujul:

<elemendinimi style="css stiil">

Näiteks määrame ühe tekstilõigule erilise värvi:

<p style="color: sienna">
  See on üks lõik
</p>

Sisemiste stiili rakendamine

Olukorras, kus on tarvis kujundada vaid üks konkreetne veebileht, võib kasutada sisemist stiili (Internal Style Sheet). Selleks lisatakse HTML-dokumendi päisesse (elemendi <head> sisse) element <style>:

<style>
  veebilehe erinevate elementide kujundusreeglid
</style>

Kõik päises loodud stiilid rakenduvad automaatselt kõigile vastavatele elementidele. Erandiks on vaid need, millele on määratud kindel kujundusklass! Kujundusklasside (class) kasutamisel peab HTML dokumendis soovitud elementide algusmärgendisse soovitud klassi kirja panema. Näiteks:

<span class="markeriga">Rõhutamist vajav fraas</span>

Selleks, et ühele html-elemendile rakendada korraga mitu defineeritud klassi, tuleb nad jutumärkide vahele kirjutades üksteisest tühikuga eraldada. Näiteks:

<p class="keskel paks">
  See on lõik. 
</p>

Selles näites on lõigule rakendatud klassid keskel ja paks!

HTML-elementidele võib näiteks hiiresündmustele reageerides erinevaid klasse (kujundusi) rakendada! Selleks lisatakse html-koodis elemendile vastavad väärtused sündmuste atribuutidele. Näiteks määrame pildielemendile erinevad klassid hiirega pildile liikumisel ja pildilt väljumisel:

<img src=“pilt.jpg“ alt=“ilus pilt“ onmouseover="this.className='klass1'" onmouseout="this.className='klass2'">

NB! Klassi nimi on paigutatud ülakomade vahele, sest jutumärgid ümbritsevad tervet atribuudi väärtust!

Välise stiililehe rakendamine

Välise stiili (External Style Sheet) tarvitamine on kasulik, kui on tarvis kujundada tervet veebilehestikku (mitmeid erinevaid lehti).

Välise stiili kasutamiseks tuleb HTML-dokumendi päisesse (elemendi <head> sisse) lisada kindlal kujul link vajalikule CSS failile:

<link rel="stylesheet" href="stiililehe_URL">

Seega võiks vastav element välja näha näiteks:

<link rel="stylesheet" href="omastiil.css">

Kujundusklasside kasutamine toimub välise stiililehe puhul samamoodi kui sisemise stiili korralgi!

Mitme välise CSS faili ühendamine

Üsna sageli on tarvis ühendada kujundus, mis pannakse kirja mitmes erinevas css failis. Selleks on võimalik lisada HTML-dokumenti viited mitmele CSS-failile kuid on võimalik ka importida ühe faili sisu teise! Selleks tuleks CSS-faili lisada import reegel (rule)!

Näiteks:

@import url("teinecssfail.css")

NB! See käsk tuleb paigutada CSS-failis kõige esimeseks reegliks!

Lisada saab ka komadega eraldatud loendi erinevatest väljundseadmetest (media queries), mille jaoks vastav css-fail loodud on.

Näiteks:

@import url("suurekraan.css") projection, tv;

NB! Kui veebilehitseja ei toeta ühtki loetletud väljundseadet, siis vastavat css-faili üldse ei laetagi.

 

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut