Poglavlje 11

<div>:

<div> divide (HTML element), razdvaja označene celine strane u logičke sekcije ili grupe. Može da sadrži druge <div>-ove, kao grupe u grupi. <div> je kao korpa za BLOCK elemente (u koje i sam spada). Najčešće se koristi sa id i class atributom. Zatim može da se stilizuje kao bilo koji drugi element u CSS-u (jer je sam po sebi nevidljiv).

Primer kako izgledaju nekoliko elemenata koji su grupisani u <div>, koji je zatim stilizovan u CSS-u:

div#primerdiv {
	padding-right: 25px;
	border-width: 15px;
	border-color: #0066ff;
	border-style: inset;
	margin-right: 250px;
	margin-bottom: 10px;
	margin-left: 30px;
	font-size: 1.3em;
	font-family: times, "times new roman", georgia, serif;
	background-image: url(images/128-219.jpg);
	text-align: right;
}

Pozicioniranje sadržaja:

text-align property određuje poziciju texta (left, center, right). Imajte u vidu da on utiče na SAV INLINE sadržaj u BLOCK elementu. Dakle, ako je npr. za ceo <div>, utiče i na SLIKE! Takođe, text-align se koristi SAMO za BLOCK elemente. Ako se primeni direktno na inline element (tipa <img>), nema nikakvog rezultata. Kao što vidimo iz gornjeg primera, osobina je nasledna (prenela se sa <div>-a na sve elemente koji su u njemu).

Nasledni selektori:

Descendant selector koristimo kada želimo da primenimo pravilo na element SAMO ako je naslednik drugog (npr. <h2> u <div> ne utiče na ostale <h2> na istoj strani).

• div h2 {bla-bla} Selektori su SAMO <h2> koji se nalaze bilo gde u okviru <div>-a. Ostali <h2> elementi koji su VAN <div>-a se ne diraju.
• Zbog preciznosti (za slučaj da ima više <div>-ova na stranici), uvek pišemo id ili class ime kao parent. div.IME h2 {bla-bla} isto kao i gore, utiče se na SVE <h2>, bilo gde da su u div.IME.
• Još veća preciznost - ako hoćemo da se primenjuje samo na DIREKTNO dete elementa: div.IME > h2
• Najpreciznije - tačno određeni elementi na koji se primenjuje pravilo: div.IME blockquote h2

Napomena: ako bi selektor glasio samo .IME h2 to bi značilo da se primenjuje na sve <h2> u BILO KOM elementu kome je dodeljen class IME (dakle, nije određeno KOJI element, važno je samo da ima class="IME").

Skraćivanje vrednosti:

Za padding i margin, ako su sve vrednosti iste, može samo da se napiše

padding: 20px;

Za različite vrednosti je dovoljan jedan red

margin: 0px 20px 30px 10px;

Red je UVEK clockwise direction (u smeru kazaljke na satu): top, right, bottom, left. Ako su top & bottom iste, i right & left iste (npr. margin: 0px 20px 0px 20px;) može da se piše

margin: 0px 20px;

Kod bordera je red NEBITAN: border-width, border-style i border-color mogu da se pišu bilo kojim redom (i nisu obavezne sve vrednosti).

border: thin solid #007e7e;
border: solid thin #007e7e;
border: #007e7e solid;
border: solid;

Za background-color, background-image, background-repeat i background-position, red je takođe NEBITAN (i nisu obavezne sve vrednosti).

background: white url(images/cocktail.gif) repeat-x top left;

Za font i text red je BITAN, a OBAVEZNI su samo size i family (dovoljan 1, ako ih ima više, razdvajaju se zarezima).
font: font-style font-variant font-weight font-size/line-height font-family;

font: oblique bold small/0.6em verdana, sans-serif;

Dakle, ako primenimo sve ovo na onaj ogromni CSS kod za p#boxmodel iz prošlog poglavlja, dobili bismo:

p#boxmodel {
	width: 400px;
	padding: 30px 10px 80px 150px;
	border: thick navy dashed;
	border-right: 20px red solid;
	margin: 50px 0px 10px 300px;
	font: italic bold 1.2em/1.6em times, "times new roman", georgia, serif;
	background: silver url(thumbnails/Superman_Shield_thumb.jpg) no-repeat top left;
}

Ili na div#primerdiv iz ovog poglavlja:

div#primerdiv {
	padding: 0px 25px 0px 0px;
	border: 15px #0066ff inset;
	margin: 0px 250px 10px 30px;
	font: 1.3em times, "times new roman", georgia, serif;
	background: url(images/128-219.jpg);
	text-align: right;
}

Fantastično, zar ne? Ipak, imajte u vidu da se greške (ako postoje), teže uočavaju u ovako skraćenim pravilima, tako da sami odlučite kada da ih koristite, a kada ne.

<span>:

<span> je kao <div>, ali je INLINE i koristi se za inline sadržaj (npr. kad hoćete da boldujete deo texta, ili promenite boju jednoj reči). Kao i <div>, najčešće se koristi sa id i class atributom.

Napomena: osobine width i background-color dodeljene u CSS-u se ne bi ni videle za inline sadržaj.

Pseudo-klase:

Pseudo-classes se ne dodeljuju u HTML-u, već se samo pišu u CSS-u. Postoji 5 selektora za izgled linka (svakom je property color, a vrednost željena boja):

• a:link (link na koji još nije kliknuto, neotvoreni link)
• a:visited (već otvoreni, posećeni link)
• a:focus (kad se uz pomoć tab-a pozicionirate na link, dakle bez miša)
• a:hover (kad mišem pređete preko linka)
• a:active (kad se prvi put klikne na link)