Smisao generičkih kontejnera je strukturirano obuhvaćanje i formatiranje raznih
elemenata koje mogu sadržavati. Za razliku od oznaka koje su predefinirane –
<p>, <h1>, ... – definiranje
zadaće generičkih kontejnera prepušteno je dizajneru.
Element span
Element span je linijski generički kontejner. Tipičan
primjer span kontejnera je formatiranje nekolicine
riječi u tekstu.
p {
font-size: 11px;
}
.istaknuto {
font-size: 18px;
font-weight: bold;
border: 1px solid #000;
}
<p>Lorem <span class="istaknuto">ipsum
dolor</span>, sit amet.</p>
Lorem
ipsum
dolor sit amet...
Element div
Element div je blok generički kontejner. Najčešće
služi za obuhvaćanje više blok ili linijskih elemenata unutar jedne strukture koja
dijeli zajedničko formatiranje. Primjer uporabe ovog elementa su prikazi CSS i HTML
kôda u ovom tečaju.
/* ovaj je kod prikazan u kontejneru
definiranim sljedećim stilom */
.csskod {
padding: 5px;
margin: 0;
width: 380px;
color: #CC0000;
background-color: #FFFFCC;
font-family: courier, mono;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color: #455372;
}
-
Zbog
jednostavnosti uporabe i velike fleksibilnosti pri formatiranju raznog sadržaja,
pri izradi stranica se generički kontejneri često koriste i tamo gdje to nije
potrebno.
- Nemojte pretjerati s uporabom. Primjerice, ukoliko želite formatirati tekst
s okvirom, nemojte postavljati tekst u span ili
div kontejner kojem ste dodali okvir – sjetite
se da se okvir može definirati i u paragrafu, koji je već ionako predviđen za
formatiranje teksta (vidi primjer CSS-a i ispis iz lekcije
Što to točno CSS radi HTML-u?).
|