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.

Uvod

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.

Širina prostora

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).

Lorem ipsum dolor sit amet consectetuer vel odio elit ac tincidunt. Leo id pretium eros consequat dignissim consequat ipsum eu parturient pretium. Ante Vestibulum lacinia accumsan amet wisi Vestibulum odio sagittis fermentum convallis.

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.

Veličina fonta

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.

Veličina slike

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]].