CSS/Ühikud
Arvud
muudaArv 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
muudaPikkused 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
muudaProtsentidega 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
muudaURI = 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
muudaVä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
muudaSeitsmeteistkümne põhivärvi jaoks on olemas vastavad inglisekeelsed nimed, mida saab koodis kasutada.
Värvid funktsioonina
muudaVä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
muudaKõ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.