Dokument https://www.zenaccount.com/007/maps.html, je prijevod i može sadržati pogreške. Originalni službeni dokument može se vidjeti na https://www.w3.org/Style/Examples/007/maps.html. Pogreške možete prijaviti na moj e-mail matthewjon75@yahoo.com
Cabins For Sale In Gatlinburg Cabins For Sale in Pigeon Forge Homes for Sale in Safety Harbor

 

Web Style Sheet
CCS savjeti i trikovi

(This page uses CSS style sheets)

Konfeti meni

Šareni meni koji se vidi ispod jednostavno je DIV element sa nekoliko P elemenata unutra. Vizualni efekt je zbog toga što je svaki P element pozicioniran pojedinačno i svaki ima svoj font i boju. Najbolje je sa kratkim tekstovima, jer se vizualni efekt bazira na preklapanju, ali ako je tekst suviše dug, onda se preklapa previše te postaje teško za čitati.

Style sheet dozvoljava meni sa najviše 10 elemenata, a gornji primjer koristi 8. Ovo je HTML kod za gornji primjer:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>

<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>

<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Uočite klasu "map" u DIV elementu, koja ga pravi sadržavačem za meni, kao i ID obilježja za svako P. Svaki P element mora imati (različit) ID, nazvan p1, p2, ... ili p10. Nije neophodno korstiti ID po redu (kao u primjeru). Ovaj style sheet možete korstiti tako što ćete ga kopirati u vaš style sheet ili možete koristiti @import ili LINK element za unošenje map.css direktno sa W3C stranice:

@import "https://www.w3.org/Style/map.css";

ili

<link rel="stylesheet" href="https://www.w3.org/Style/map.css">

Objasnjenje style sheet-a

Evo kako style sheet funkcionira. Style sheet najprije određuje DIV sa klasom "map". On kreira prostor visine 190px u kojem će se postaviti P elementi. Svaki element sa ID p1 do p10 zatim dobija svoju boju i font, i svaki je element postavljen unutar prostora kreiranog sa DIV pomoću svojstva "margin": negativna gornja granica pomjera element naviše u DIV prostoru a pozitivna donja granica obezbjeđuje da sljedeći element počinje ponovo od dna DIV.

(Manjkavost stzle sheet-a je da sve radi u px. Ovo se može promjeniti tako da se koriste procenti, ukoliko imate preglednik koji dovoljno dobro implementira CSS.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Naravno, vi možete slobodno mijenjati style sheet da biste probali različite fontove, boje i pozicije, ili da kreirate dodatna pravila za više od 10 elemenata. Takodjer pogledajte lijeve i desne granice DIV: one su negativne, te je meni širi od okolnoga teksta, ali u vašoj stranici granica može biti nedovoljno široka, te biste morali ukloniti ova pravila.

Ako probate ovaj style, vidjet ćete da ne funkcionira baš dobro u Netscape 4. Naravno, pogeška je u Netscape 4. Ipak, map-ns.css je sličan style sheet koji dobro funkcionira u tom pregledniku. Sljedeći će trik pri vrhu vašega HTML dokumenta omogućiti da verzija za Netscape 4 i gornja verzija sa boljom primjenom CSS koegzistiraju:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Pravilno primjenjivanje CSS će čitati oba style sheet-a, ali pravila u drugome poništavaju prvi, te osim nešto nepotrebna posla, nema promjene. Međutim, Netscape 4 neće učitavati drugi style sheet zbog "media" svojstva koje ne razumije.

Također, možete se pitati zašto su elementi pozicionirani pomoću (negativnih) granica, pošto ovo izgleda kao glavni kandidat za apsolutna pozicionirajuća svojstva. Doista, isto se može uraditi i sa "position" i "left & right". Razlog zašto ovaj style sheet koristi granice je da na ovaj način funkcionira u preglednicima koji primjenjuju samo CSSI.

CSS Valid CSS!

Bert Bos
Dokumnet sastavljen 17 siječnja 2001
Posljednja izmjena $Data: 2009/02/03 14:39:10 $GMT