CSS/Ühikud

Allikas: Vikiõpikud
< CSS
(Ümber suunatud leheküljelt CSS:Ühikud)

Arvud[muuda]

Arv võib olla nii positiivne kui negatiivne ja ka kümnendmurd (komakohta tähistatakse punktiga). Arvud on osa mõõtühikutest ning samuti kasutatakse neid mõningate parameetrite väärtustena.

Pikkusühikud[muuda]

Pikkused tähistatakse CSS-is arvuga, millele järgneb mõõtühik. Mõõtühikud jaotatakse suhtelisteks ja absoluutseteks.

Suhtelised pikkusühikud[muuda]

  • px - ekraanipiksel
  • em - fondi suurus
  • ex - tähe 'x' kõrgus

Antud pikkusühikud sobivad hästi pikkuste määramiseks ekraanil. Pikselid 'px' sobivad hästi kasutamiseks koos rastergraafikaga, näiteks sättimiseks tekstiblokki sama laiaks kui taustapilt. Teksti suurusega seotud ühikud nagu 'em' sobivad sinna, kus mõõtmed peavad olema proportsionaalsed tekstiga. Eriti oluline on arvestades seda, et enamik brausereid pakuvad võimalust teksti suurust vastavalt soovile muuta. Nii näiteks jääb taandrida, mille suuruseks '2em' ka siis, kui fonti suurendada 5 korda, ikka kahe tähepikkuse laiuseks samas, kui mõõduga '20px' määratud taane kahaneb vaevumärgatavaks.

p { width: 400px }
p { text-indent: 3em }
p { font-size: 2.5em }

Absoluutsed pikkusühikud[muuda]

  • mm - millimeeter
  • cm - sentimeeter
  • in - toll (ingl. k. inch) = 2.54cm
  • pt - punkt = 1/72 tolli
  • pc - pica = 12 punkti

Absoluutseid ühikuid on mõistlik kasutada vaid seal, kus võib nende peale kindel olla. Näiteks kasutada punkti 'pt' trükkimiseks mõeldud kujunduses teksti fondi suuruse ja reavahe määramisel ning millimeetrit 'mm' ja sentimeetrit 'cm' piltide suuruse määramisel.

p { font-size: 12pt }
body { margin: 2cm }

Protsendid[muuda]

Protsentidega saab määrata mitmeid suhtelisi mõõte. Näiteks muuta fondi suurust kahekordseks, vähendada tekstibloki laiust kolmandiku võrra. Formaat on põhimõtteliselt sama, mis pikkuste puhul: arv, millele järgneb protsendimärk '%'.

a { font-size: 150% }
p { width: 75% }

URI-d[muuda]

URI = URL + URN

URI (Uniform Resource Identifier) on põhimõtteliselt suvalise ressursi (näiteks faili) täisaadress, mis koosneb URL-ist (Uniform Resource Location) ja URN-ist (Uniform Resource Name).

CSS-is tõlgitakse kõik osalised ja suhtelised aadressid läbi funktsiooni 'url()' absoluutseteks URI-deks:

body { background-image: url("../taust.jpg") }
p { background-image: url("http://www.myimages.com/images/024.png") }

Värvid[muuda]

Värve võib CSS-is esitada värvinimena või punase, rohelise ja sinise kombinatsioonina kas siis kümnend- või kuueteistkümnendsüsteemis või protsendina. CSSis kasutatakse aditiivset (kiirgav) RGB värvisüsteemi, erinevalt trükis kasutatavast substraktiivsest (peegeldav) CMYK systeemist.

Värvinimed[muuda]

Seitsmeteistkümne põhivärvi jaoks on olemas vastavad inglisekeelsed nimed, mida saab koodis kasutada.

Värvid funktsioonina[muuda]

Värvuse võib esitada kasutades funktsiooni

rgb(red, green, blue)

kus 'red' tähistab punase, 'green' rohelise ja 'blue' sinise värvi hulka. Hulk märgitakse kas täisarvuna vahemikus 0 kuni 255

p { color: rgb(255, 0, 0) }
em { color: rgb(255, 0, 255) }
h1 { color: rgb(127, 127, 127) }

või protsendina

p { color: rgb(100%, 0, 0) }
em { color: rgb(100%, 0, 100%) }
h1 { color: rgb(50%, 50%, 50%) }

Näidetes on elemendi 'p' värviks punane, 'em' värviks violetne ning 'h1' värviks hall.

Värvid kuueteistkümnendsüsteemis[muuda]

Kõige sagedamini esitatakse värve kuueteistkümnendsüsteemi arvudena. Põhimõtteliselt on see sama mis 'rgb()' funktsiooni kasutamine, aga kirjutatuna lühemalt. Kuueteistkümnendsüsteemi arvud esitatakse järgneval kujul:

#RRGGBB

Kus 'RR' tähistab punase, 'GG' rohelise ja 'BB' sinise värvi hulka 16-nd süsteemis vahemikus '00' kuni 'FF', mis on samaväärne kümnendsüsteemi vahemikuga 0 kuni 255. Iga 16-nd süsteemi arvu ette kirjutatakse trellid '#'. Arvud võib kirjutada nii suurte kui võikeste tähtedega.

p { color: #FF0000 }
em { color: #ff00ff }
h1 { color: #7f7f7f }

Kuueteistkümnendsüsteemi arve võib märkida ka lühendatult, kasutades vaid kolme numbrit.

#RGB

Sellisel juhul tähistab iga number tegelikult kahte sedasama numbrit. Järgnev näide on võrdväärne eelnevatega:

p { color: #F00 }
em { color: #f0f }
h1 { color: #7f7f7f }

Selliselt kujul on värve hea kasutada juba näiteks seetõttu, et enamik graafikaprogramme pakub võimalust sellises formaadis värvikoode lihtsalt kopeerida ja muuta.