Pomoć:Primjer uporabe jedinica dužine u jeziku CSS
Ovo je stranica s primjerima uporabe jedinica dužine u jeziku CSS.
Primjeri su opći i nisu vezani samo za Wikipediju, osim ako to nije istaknuto.
Pri otvaranju neke web stranice, a to vrijedi i za stranice Wikipedije, preglednik učitava vanjske CSS datoteke (vanjske u smislu da nisu dio HTML koda, kao na primjer common.css) u kojima je definiran izgled mnoštva svojstava (na primjer, boja pozadine, boja, veličina i font teksta, debljina okvira, itd.) i te definicije vrijede za sadržaj svih stranica. U nekim slučajevima te "zadane definicije" iz vanjskih datoteka treba promijeniti, i to se postiže tzv. in-line definiranjem stila, odnosno njegovim umetanjem u kôd. Opći oblik definicije je
- <tag style="svojstvo : vrijednost;">
gdje je tag neki tag (npr. div, pre, span...), svojstvo je neko svojstvo u jeziku CSS (npr. border, color, width...) a vrijednost odgovarajuća jedinica (engleska riječ ili broj, npr. yellow, 250px, left). Kod nekih elemenata mogu se jedinice i združivati, npr. 1px solid #c3c3c3 ili italic bold 12px/30px Georgia, serif;.
Na Wikipediji se najčešće rabe tri jedinice dužine, em, px i %, ali za usporedbu su u primjerima navedene i druge jedinice.
Ovaj primjer pokazuje definiranje veličine dvaju često rabljenih svojstava, "margin" i "padding":
- margin - vanjski prostor plavog okvira definiran je u odnosu na referentni zeleni prostor kao
margin: 1cm 2cm 1cm -1.5cm;(gore, desno, dolje, lijevo); zbog negativne vrijednosti lijeve margine, prostor slijeva izlazi iz zelenog prostora. - padding - unutarnji prostor od plavog okvira do crvene granice teksta definiran je kao
padding: 0.5cm 2cm 1cm 2cm;(gore, desno, dolje, lijevo).
U ovom primjeru su jedinice združene u zajedničko svojstvo, ali se isto može postići posebnim svojstvima, ili definirati samo pojedino svojstvo, jer ih je CSS previdio, na primjer margin-top, margin-left, padding-right...
U primjeru su navedeni centimetri kao apsolutna jedinica, ali ona nije prikladna za prikazivanje na zaslonu (za njenu uporabu treba kalibrirati zaslon), jer 1 centimetar po visini nije jednak 1 centimetru po širini, a obje dimenzije ovise o veličini zaslona.
U ovom primjeru različitim jedinicama definirana je ista veličina fonta (vidjeti napomenu uz posljednji primjer), otprilike jednu trećinu većeg od osnovnog fonta.
Wikipedija - osnovni font na Wikipediji
Wikipedija - font-size: 1.3em;
Wikipedija - font-size: 17px;
Wikipedija - font-size: 0.4cm;
Wikipedija - font-size: 130%;
Wikipedija - font-size: 1.6vw; - Veličina fonta definirana u ovom primjeru ista je kao i gornjim definicijama, ali samo na rezoluciji prozora (viewporta) 1024 × 768 piksela. Da biste shvatili djelovanje ove jedinice, proširite ili smanjite prozor vašeg preglednika, ili pokušajte s većim ili manjim zumiranjem stranice.
Jedan od najčešćih primjera uporabe jedinica za dužinu je kod određivanja veličine slika.
Na Wikipediji softver brine o tome da se u tom slučaju ne mora rabiti definiranje preko stila, već je dovoljno samo navesti veličinu u odgovarajućoj jedinici. Kod takvog označavanja javlja se također izuzetak da se za lebdjeću sliku mogu rabiti hrvatske riječi "lijevo" i "desno". Primjer pokazuje razliku u postavljanju slike preko HTML-a i wikisintakse:
- <img src="primjer.jpg" style="width: 150px; float: right;"> (tag "img" onemogućen je na Wikipediji, zbog moguće zloporabe)
- [[Datoteka:primjer.jpg|150px|desno]].