zxz |
17.02.2015 14:05 |
Predmet:CSS Box
Na slici imate pregled sta je sta odnosno na sta se odnosi koja naredba.
PreuzmiIzvorni kôd (HTML):
div {
background-color: #C0C0C0;
width: 450px ;
padding: 15px;
border: 15px solid #800080;
margin: 25px;
}
Nepoznavanje pravila, izbjegavanje
itanja pravila i openito izbjegavanje sa njihovim upoznavanjemm, <b>NE OSLOBAA </b> vas odgovornosti i obaveze da se u skladu s navedenim pravilima ponašate.
|
Prilozi: css1.gif (Velicina datoteke:4.13 KB)
|
zxz |
18.02.2015 11:15 |
Predmet:Border
PreuzmiIzvorni kôd (HTML):
p.prvi {
border-style: solid;
border-width: 6px;
border-color: #FF0000;
}
p.drugi {
border-style: solid;
border-width: 1px;
}
<p class="prvi">Prvi border stil. </p>
<p class="drugi">Drugi border stil. </p>
<p><b>Napomena: </b><br> border-width nema ucinka ukoliko ne dodamo i border-style. </p>
|
zxz |
18.02.2015 11:47 |
Predmet:Outline-Stil
Primjer kada je sve u jednom redu boja stil i debljina.
PreuzmiIzvorni kôd (HTML):
p {
border: 1px solid green;
outline: red dotted thick;
}
<p><b>Napomena: </b><br> IE8 podrzava samo ako je naveden tip dokumenta </p>
|
zxz |
19.02.2015 10:35 |
Predmet:Margine
Primjer za margine.
PreuzmiIzvorni kôd (HTML):
p {
background-color: yellow;
}
p.marg {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
background-color: red;
}
<p>Ovo je bez margina tekst samo sa zutom pozadinom </>
<p class="marg">E ovo je sa mrginama sa sve cetiri strane. Donja margina se i nemoze primijetiti ako nemamo neki tekst ispod ovoga teksta </p>
<p> Tekst bez margina </p>
|
zxz |
20.02.2015 09:40 |
Predmet:Padding
PreuzmiIzvorni kôd (HTML):
p {
background-color: #D8E4F8;
}
p.pd {
padding-top: 85px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 150px;
}
<p>Ovo je klasican tekst sa bojom pozadine </p>
<p class="pd">Ovo je sa padding i sa bojom pozadine da bi se moglo bolje uociti </p>
|
zxz |
20.02.2015 10:43 |
Predmet:Skriveno-visibility
PreuzmiIzvorni kôd (HTML):
p.skriveno {
visibility: hidden;
}
<p class="skriveno">Ovo je tekst koji se ne vidi </p>
<p>Ovo je tekst koji se vidi </p>
|
zxz |
21.02.2015 12:41 |
Predmet:Pozicija objekta
PreuzmiIzvorni kôd (HTML):
p.poz_a {
position: absolute;
left: 120px;
top:500px;
color: green;
}
p.poz_r {
position: relative;
left: 15px;
top: 25px;
}
p.poz_f {
position: fixed;
top: 5px;
right: 5px;
color: red;
}
<p class="poz_a">Ovaj tekst ima apsolutnu poziciju </p>
<p>Ovo je klasican tekst. Znaci tekst koji nema odredeni stil </p>
<p>Ni ovaj tekst nema odredjeni stil </p>
<p class="poz_f">Ovo je fiksna pozicija. Znaci bilo sta da radite tekst ostaje na istom mjestu. </p>
<p class="poz_r">Ovo je tekst sa relaticnom pozicijom. Znaci pozicija u odnosu na predhodni objekat" </p>
|
zxz |
22.02.2015 13:28 |
Predmet:Floating-poravnanje
PreuzmiIzvorni kôd (HTML):
img {
float: right;
}
<p>Ovo je tekst koji je van poravnanja i on ce ici preko cijele stranice, zavsno samo od duzine teksta.
Ako vam je monitor veliki morat cete se nakucati teksta da vidite ucinak ili pak smanjite prozor Borowsera </p>
<p><img src="nekaslika.gif" width="300">
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
Ovdje treba nakucati puno teksta isto da bi se vidjelo da se on nalazi sa lijeve strane vase slike.
Znaci ovaj tekst bi se morao nalaziti sa lijeve strane slike a slika ostaje na desnoj strani.
|
zxz |
24.02.2015 23:13 |
Predmet:Poravnanje
PreuzmiIzvorni kôd (HTML):
.centar {
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: #D4D0C8;
}
<p>Ovo je div sa klasom Centar. Znaci tekst ce se pokazivati negdje u serdini stranice </p>
<p>Koliko gog kucali teksta izmedju otvorenog taga div i zatvorenog taga div tekst ce se ponasati kao sto je odredjeno u klasi centar </p>
<p><b>Napomena: </b>Ovo nece raditi na IR8 </p>
|
zxz |
24.02.2015 23:18 |
Predmet:Poravnanje-Desno
PreuzmiIzvorni kôd (Visual Basic):<HTML>
<HEAD>
<style>
.desno {
position: absolute;
right: 5px;
width: 300px;
background-color: #ECE9D8;
}
</style>
<TITLE>Poravnanje u centar</TITLE>
</HEAD>
<BODY>
<div class="desno">
<p>Ovo je div sa klasom desno. Znaci tekst ce se pokazivati na desnoj strani i duzini od 300px</p>
<p>Desna margina je samo 5px. Vije mozete staviti na nulu ili pak povecati</p>
</div>
</BODY>
</HTML>
|