e-gradiva				HTML	CSS	JavaScript	Načrtovanje
						SERŠ Maribor		Iskanje	Primeri

Ustvarjanje plasti s pomočjo sintakse CSS

Ustvarjanje plasti z atributom style

Atribut style lahko uporabimo, da ustvarimo plasti v večini HTML elementov. Vse kar je potrebno narediti je to, da uporabimo pozicisko lastnost in določimo ali bo element prikazan relativno ali absolutno. Relativno določena plast bo sledila poteku elementov, kot so prikazani v dokumentu HTML, absolutno določena plast pa bo prikazana, kjer smo jo določli položaj glede na lastnosti left (levo) in top (zgoraj), ne glede na ostale elemente.

Lastnost left določa, kje se bo plast začela glede na x koordinato in in se meri iz zgornega levega kota. Lastnost top določa koordinato y in jo merimo od zgornjega levega kota.

Pri tem ne smemo pozabiti, da uporabljamo sintakso CSS znotraj elementov, zato je potrebno uporabljati primerne oznake znotraj kot: dvojni narekovaji (" ") morajo biti desno od znaka za enakost (), ki je desno od imena atributa style. Primer:

<div style="position:absolute; left:50; top:100; color:red;"></div>

Spodnja tabela prikazuje še nekaj možnih lastnosti, ki jih lahko uporabimo, ko kreiramo plasti v elementih s pomočjo sintakse CSS .

ime lastnosti	ime lastnosti : možna vrednost
position	position:absolute | relative
left	left: celoŠtevilopx | 1%-100% (celo število)
top	top: celoŠtevilopx | 1%-100% (celo število)
width	width: celoŠtevilopx | 1%-100% (celo število)
height	height: celoŠtevilopx | 1%-100% (celo število)
clip	clip: rect("Y1,X2,Y2,X1")
z-index	z-index: celoŠtevilo
visibility	visibility:show | hide | podedovana vrednost
background-color	background-color:vrednostBarve
background-image	background-image:url("URL");

Lastnost position

Lastnost position povzroči, da element postane plast, saj mu določimo pozicijo. Ko določimo pozicijo kot absolutno, opozorimo brskalnik, da določi specifično lokacijo, ki je neodvisna od vseh ostalih elementov. Tako omogočimo da se elementi ne prekrivajo. Prav tako moramo tudi določiti levo in zgornjo vrednost, če jih pa ne, pa bo enako kot če bi določili relativno pozicijo plasti. Če določimo relativno pozicijo, določimo levi in zgornji odmik plasti glede na privzeto vrednost na strani in ne od roba kakor pri absolutni vrednosti.

Lastnost left

Lastnost left vsebuje horizontalne koordinate, ki se začnejo v zgornjem-levem kotu PLASTI. Plast se potem pomakne navzdol in na desno od tiste točke. Vključiti je potrebno merske kratice desno od številke, ki se jo izbere. Številka mora biti pozitivno ali negativno celo število ali nič. Piksli so naravna merska enota in se okrajšajo s px. Spominjajoč se osnovne geometrije se par (x,y) koordinatnih točk v 2D ravnini da primerjati z levo lastnostjo kot x-koordinato in sledeča zgornja lastnost kot y-koordinata. Uporaba mer v odstotkih vrača manjšo nadzornost, se pa najde čas ko je to bolj primerno.

Lastnost top

Lastnost top vsebuje vertikalne koordinate, ki se začnejo v zgornjem-levem kotu PLASTI. Plast se potem pomakne navzdol in na desno od tiste točke. Vključiti je potrebno merske kratice na desno od številke, ki se jo izbere. Številka mora biti pozitivno ali negativno celo število ali nič. Piksli so naravna merska enota in se okrajšajo s px. Spominjajoč se osnovne geometrije se par (x,y) koordinatnih točk v 2D ravnini da primerjati z levo lastnostjo kot x-koordinato in sledeča zgornja lastnost kot y-koordinata. Uporaba mer v odstotkih vrača manjšo nadzornost, se pa najde čas ko je to bolj primerno.

Lastnost width

Lastnost width se uporablja za določitev horizontalne širine plasti. Določi se jo s številko, ki sledi enoti mere kot je palec ali piksel, z uporabo ključnih besed ali z odstotki v plasti, ki jih zapišemo z znakom za odstotke (%). Napačna vrednost za to lastnost je 100% možnega prostora v uporabnikovem oknu, ki je vpisana kot plast. Enota se bo pomaknila na desni rob plasti.

Lastnost height

Lastnost height se uporablja za določitev višine plasti. Določimo jo lahko z številko, ki sledi enoti mere kot je inch ali pixel, uporabo ključnih besed ali z odstotki v plasti, ki, jih zapišemo z znakom za odstotke (%). Če višina ni določena, potem bo plasti določena najmanjša višina potrebna za prikaz elementov. Če določimo neustrezno višino, potem bo plast samodejno nastavila vsebino.

 Gor     e-gradiva     JavaScript      CSS in JavaScript   Predmet window 

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart