The box model:
CSS vidi SVAKI element kao kutiju (box). Čak i inline elemente i linkove. Za padding, margins i borders, CSS ima property za SVAKI pravac: top, right, bottom, left. Box se sastoji od:
- content area: sadržaj kutije (tekst ili slika). Oblast je taman dovoljno velika za sadržaj u njoj. width property kontrolise širinu content area-e (u px ili %).
- optional transparent PADDING: opcioni providni prostor uokviruje sadržaj. Prostor između sadržaja i bordera. Nalazi se U elementu. Providan, bez dekoracija i boje (u px ili %).
- optional BORDER: opciona granica može postojati oko tog prostora. Ima oblik linije različitih boja, širine i stilova. none vrednost za isključivanje.
- border-width, debljina granice (thin, medium, thick ILI u px)
- border-color, boja granice (ime, rgb vrednost ili hex kod)
- border-style, ima ih 8 (solid, double, groove, outset, dotted, dashed, inset, ridge)
- optional transparent MARGIN: opciona providna margina zaokružuje sve. Određuje prostor između elemenata. Nalazi se VAN elementa. Providna, bez dekoracija i boje (u px ili %).
Primer jednog boxa kome smo menjali različite osobine i vrednosti u CSS-u na sledeći način:
p#boxmodel {
width: 400px;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 80px;
padding-left: 150px;
border-width: thick;
border-color: navy;
border-style: dashed;
border-right-width: 20px;
border-right-color: red;
border-right-style: solid;
margin-top: 50px;
margin-bottom: 10px;
margin-left: 300px;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
line-height: 1.6em;
font-family: times, "times new roman", georgia, serif;
background-color: silver;
background-image: url(thumbnails/Superman_Shield_thumb.jpg);
background-repeat: no-repeat;
background-position: top left;
}
Ovaj text je sadržaj <p> elementa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pozadina elementa:
background-color određuje boju pozadine elementa (ime, rgb vrednost ili hex kod).
background-image, slika kao pozadina elementa. Piše se: background-image: url(LOKACIJA/background.gif); slika je po default-u "tiled", ponavlja se.
- background-repeat, kontroliše ponavljanje slike (no-repeat, repeat-x, repeat-y, inherit) x, y su horizontalno i vertikalno. inherit nasleđuje vrednost u parent elementu.
- background-position, pozicionira sliku (kombinacija reči: top, left, right, bottom, center ILI u % i px).
Više Style Sheet-ova:
HTML može da ima linkove ka više CSS fajlova. U tom slučaju, bitno je kako su linkovi poređani u HTML-u. Onaj ISPOD nadjačava onaj iznad njega.
media atribut je opcioni atribut za <link> element. Koristi se kako biste specifikovali za koje uređaje je poseban stil namenjen.
- screen, naznačava da je za ekran PC-a.
- print, da je za štampanje.
- handheld, da je za uređaje sa malim ekranima i ograničenim internet protokom (mobilni).
- aural, da je za govorne browsere.
- Braille, za slabovide ljude kojima su potrebni čitači osetljivi na dodir.
- projection, za projektore, prezentacije i slajdove.
- tty, za teleprintere i terminale.
- tv, za televizore.
<link type="text/css" href="main.css" rel="stylesheet" /> <link type="text/css" href="main-print.css" rel="stylesheet" media="print" /> <link type="text/css" href="main-mobile.css" rel="stylesheet" media="handheld" />