Položaj

display - vrsta elementa

position - položaj elementa

left - položaj levega roba

right - položaj desnega roba

top - položaj zgornjega roba

bottom - položaj spodnjega roba

float - postavitev elementa ob strani

clear - izogibanje elementom ob straneh

z-index - prekrivanje elementov – uporaba več plasti

vertical-align definira poravnavo vrstičnega elementa znotraj starševskega elementa

overflow - definira, kaj narediti, če prekoračimo območje namenjeno elementu

direction - smer besedila

visibility - določa ali bo element viden ali ne

Display

S to oblikovno lastnostjo določimo vrsto elementa.

Vrednost - Pomen

block - bločni element

inline-block - blok v vrstici

inline - vrstični element

list-item - točka seznama

none - prazen element

run-in - element, ki bo prikazan (če bo to možno) znotraj naslednjega elementa

table - tabela

inline-table - vrstična tabela

table-row-group - skupina vrstic v tabeli

table-column - stolpec v tabeli

table-column-group - skupina stolpcev v tabeli

table-header-group - glava tabele

table-footer-group - noge tabele

table-row - vrstica tabele

table-cell - celica v tabeli

table-caption - opis tabele

Primer uporabe lastnosti display

<html>

            <head>                
                        <style type="text/css">

                            p {display: inline}

                       div {display: none}

                       span {display:block}

               </style>

       </head>

       <body>

               <p>Uporaba lastnosti display, ki je v tem primeru

               omogočila, da bosta odstavka (p) postala vrstična elementa, sekcija

               div bo nevidna, sekcija span pa bo postala bločni element. </p>

               <p>Ta odstavek se nadaljuje v isti vrstici. </p>

               <div>Sekcija div ni vidna. </div>

               <span> Sekcija span je postala bločni element. </span>

       </body>

</html>

Position

S to oblikovno lastnostjo določimo način postavitve elementa. V vseh primerih (razen pri statični postavitvi) z lastnostmi left, right, top in bottom določimo, za koliko naj bo kateri rob elementa odmaknjen od roba drugega elementa.

Vrednost Pomen

static - običajna postavitev – ignorira nastavljanje pozicije

relative - relativno glede na trenutno postavitev elementa (primer: position:relative; left:100px; top:150px – 100 pikslov levo in 150 pikslov navzdol),

absolute - relativno glede na bločni element, v katerem je vsebovan (primer: position:absolute; left:100px;t op:150px – 100 pikslov levo in 150 pikslov navzdol – od začetka elementa, v katerem je ta element vsebovan)

fixed - relativno glede na okno brskalnika (primer: position:fixed, left:100px; top:150px – 100 pikslov levo in 150 pikslov navzdol – od vrha okna brskalnika- ko se z drsnikom pomikamo navzdol, vsebina tega elementa ostane na isti poziciji) – ne deluje v IE.

Preizkusite to lastnost!

float

S to oblikovno lastnostjo lahko element prestavimo na levi ali desni rob. Pri tako postavljenem elementu se vsebina drugih elementov odmika od njegovih robov. V tem se tudi razlikuje od absolutne postavitve, kjer se vsebina drugih elementov ne odmika.

Vrednost Pomen

none običajna postavitev

left element je ob levem robu

right element je ob desnem robu

Primer uporabe lastnosti float

Stil:

div.glava {background-color: #bbddff;

                 text-align: center;

                 font-family: arial, helvetica, sans-serif;

                 padding: .2em }

p             { text-align: justify;

                font-family: verdana, geneva, sans-serif;

                margin: .5em }

div.tekst { background-color: #00eeee;

                font-size: 1.5em;

                font-family: arial, helvetica, sans-serif;

                padding: .2em;     

                margin-left: .5em; 

                margin-bottom: .5em;

                float: right;      

                text-align: right;

                width: 50% }

div.sekcija {  border: 1px solid #bbddff }

HTML za stil iz zgornjega primera sloga

<div class = "glava">Na Fakulteti za elektrotehniko, raèunalništvo in informatiko smo v šolskem letu 2007/2008

                       začeli izvajati dva študijska programa, ki sta nastala iz študijskega programa "Računalništvo in informatika":

</div>

  <div class = "sekcija">

         <div class = "tekst">Računalništvo in informacijske tehnologije</div>

          <p>Osnovno vodilo pri prenovljenem študijskem programu Računalništvo in informacijske tehnologije je

         uvajanje projektnega načina izvajanja predavanj in vaj, in sicer v povezavi z industrijskimi partnerji
 in institucijami           družbenega pomena. V zaèetku drugega letnika se razpišejo predvidoma trije projekti.
 Vsak projekt vsebuje po osem izbirnih strokovno računalniških predmetov,  ki se izvajajo v letnem semestru
drugega letnika in v zimskem semestru tretjega letnika.

          </p>

  </div>

  <div class = "sekcija">

          <div class = "tekst">Informatika in tehnologije komuniciranja</div>

           <p>Študijski program Informatika in tehnologije komuniciranja (ITK)
je nastal zaradi razvoja tehnologij in zahtev informacijske družbe.  Ustvarjen je z namenom pripraviti
svoje diplomante za sodobna, v informacijsko tehnologijo usmerjena delovna mesta prihodnosti, ki zahtevajo
 znanja razvoja informacijskih rešitev, vodenja projektov, upravljanja omrežij in obvladovanja informacij.

           </p>

</div>

Izgled v brskalniku

Zanimiva primera s float

Izdelava horizontalnega menija s pomočjo CSS.
Izdelava domače strani brez tabel.
Zanimivi primeri z uporabo CSS so na:

http://www.dynamicdrive.com/style/

z-index

S to lastnostjo določimo plat, na kateri bo narisan element. Brskalnik vse elemente, ki so vsebovani v istem bločnem elementu, riše po plasteh od najnižje proti najvišji. Tako lahko določimo, kateri element bo na površju, ko pride do prekrivanja. Do prekrivanja elementov lahko pride, kadar imamo relativno, absolutno ali fiksno postavljene elemente. Če za plast elementa določimo celo število, se za v njem vsebovane elemente vzpostavi lokalni sistem plasti, v kateri je ta element na plasti 0.

Primer:

<html>
<head>

<style type="text/css">

img.x {position:absolute;

              left:20px;

              top:10px;

              z-index:1}

</style>

</head>

<body>

<h1>Demonstracija lepljenja vecih plasti</h1>

<img class="x" src="bulbon.gif" width="100" height="180">

<p>Privzeta vrednost za  z-index je 0. Z vrednostjo z-indexa 1

za element img (naša slika žarnice)  damo sliko pred ta tekst.

</p>

</body>

</html>

overflow

Z lastnostjo overflow določimo, kaj se naj zgodi, če vsebina elementa prekorači območje, ki mu je namenjeno. Možne lastnosti so scroll (pojavita se horizontalni in vertikalni drsnik), visible (vidi se celotna vsebina - območje se prekorači), hidden (prikaže samo del vsebine, ki je vidna v tem območju) in auto (pojavi se samo horizontalni drsnik –avtomatsko, ko vsebina elementa prekorači območje).

Primer:

<html>

       <head>

               <style type="text/css">

                       div {background-color:#00FFFF; width:150px; height:150px;overflow: scroll}

               </style>

       </head>

       <body>

               <p>Z lastnostjo overflow dolocimo, kaj se naj zgodi, ce vsebina elementa prekoraci obmocje, ki mu je namenjeno.

               Možne lastnosti so scroll (pojavita se horizontalni in vertikalni drsnik), visible (vidi se celotna vsebina - obmoèje se prekoraci),

               hidden (prikaže samo del vsebine, ki je vidna v tem obmocju) in auto (pojavi se samo horizontalni drsnik).</p>

                <div>HTML (HyperText Markup Language) je jezik, s katerim opišemo gradiva, ki jih želimo objaviti na spletu. </div>

       </body> 

</html>

visibility

<html>

       <head>

               <style type="text/css">

                  h1.viden {visibility:visible}

                         h1.neviden {visibility:hidden}              

                </style>

       </head>

       <body>

               <h1 class="viden">Ta naslov poglavja je viden.</h1>

               <h1 class="neviden">Ta naslov poglavja ni viden</h1>

       </body>
</html>

Brskalnik

cursor vrsta kurzorja

outline-color barva obrobe - ne deluje v IE

outline-style oblika obrobe - ne deluje v IE

outline-width debelina obrobe - ne deluje v IE

outline obroba - ne deluje v IE