Embed Size (px)
Citation preview
©IGM, Stig Aasen.
CSS Verdier
CSS innholder mange verdibenevnelser• Ikke alle er beregnet tilskjerm.• Det kan også lages stiler til andre medier som
utskrifter.
Eksempler på hva som egner seg til skjermbruk
fredag 1. oktober 2010
©IGM, Stig Aasen.
Heksadesimale verdier
Forklaring på Heksadesimale farger er (hentet fra dataleksikonet)• tallsystem basert på16 sifre (og ikke 10 som i 10-
tallssystemet). I dette systemet beskrives de desimale verdiene 0 til 15 med sifrene 0 til 9 og bokstavene A til F (A=desimal 10, B=desimal 11, osv.). Det heksadesimale tallsystemet brukes ofte av programmerere, da det er mye lettere beskrive adresser i datamaskinens minne med dette systemet. Dette kommer av at datamaskiner arbeidet med det binære tallsystemet bestående av kun to verdier. Ganger man opp tallet 2 flere ganger, få vi 2, 4, 8, 16, 32, osv. Tallet 16 er dermed et mer "rundt" tall for programmerere enn det tallet 10 er.
fredag 1. oktober 2010
©IGM, Stig Aasen.
Heksadesimale farger
RGB heksadesimale farger med område mellom #000000 (sort) til #FFFFFF (hvit)
Websikre farger defineres med bokstavene F og C samt tallene 3,6 og 9 satt parvis som FF 33 66
De parvise tallene er fra venstre Rød Grønn Blå I CSS kan forkorte parvis like heksadesimale
verdier. For eksempel: En blå #3300FF kan skrives #30F.
fredag 1. oktober 2010
©IGM, Stig Aasen.
Farger i RGB og med navn
I tillegg kan du skrive inn verdiene som RGB som er bedre kjent for grafisk bransje. Rød som er #FF0000 i heksadesimale farger kan skrives som rgb (100%, 0%, 0%) eller rgb(255, 0,0).
Farger kan navngis med disse 16 nøkkelordene aqua, black, blue, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white og black
fredag 1. oktober 2010
©IGM, Stig Aasen.
Absolutte verdier
Absolutte verdier er enklest å forstå, men nesten ubrukelige til webdesign
Inches (in) Centimeters (cm)
• Det er 2,54 cm i en inch, så 1 cm er 0.394 inches
Millimeters (mm) Point (pt)
• Per definisjon er det 72 points til en inch • F.eks er p {font-size: 18pt;} lik p {font-size: 0.25in;}
Picas (pc)• En picas er lik 12 point som igjen vil si det er 6 picas i en
inch.
fredag 1. oktober 2010
©IGM, Stig Aasen.
Konklusjon på absolutte verdier
Disse verdier er kun interessante hvis netteleseren, som skal brukes, kjenner alle detaljer om monitoren der siden vises. Ved utkjøring til utskrift, eller andre utenheter som skal brukes kan det være mer aktuelt med absolutte verdier.
Som Windows bruker kan du sette din maskin til vise mål brukt i den virkelige verden, mens på Mac er det ingen steder å sette denne informasjonen.
fredag 1. oktober 2010
©IGM, Stig Aasen.
Relative verdier
Prosent, ex (x-høyden) og em (em-høyden) er relative verdier
Primært vil du bruke prosent (%), piksler (px) eller em
1 piksel er det samme som et punkt på skjermen. Om du bruker lupe vil du kunne se dem
Piksler er relativ da det er avhengig av skjermoppløsningen
fredag 1. oktober 2010
©IGM, Stig Aasen.
% (prosent)
#container {width: 50%} Ved bruk av prosent kalkulerer nettleseren
størrelsen ut fra elementets opphavs verdi. Prosenten styres gjerne etter verdier i <html> og <body>. Om en boks (DIV) bredde er 50% og du legger en ny box inne i denne som også er 50% vil denne bli 50% av boksen den ligger i.
Om Body har font-size er på 12 px vil en H1 med font-size 200% bli 24 piksler.
fredag 1. oktober 2010
©IGM, Stig Aasen.
ex (x-høyden)
Ex regnes ut fra x-høyden på små bokstaver.
Om du tenker deg x-høyden som halvparten av den totale fonthøyden stemmer ikke dette ved alle fonttyper• Verdana: x og Impact: x
body{font-size: 1ex;} skal normalt tilsvare body{font-size: 0.5em;}
Ex er lite brukt da ikke alle fonter har innlagt informasjon om x-høyden
fredag 1. oktober 2010
©IGM, Stig Aasen.
Eksempel em
Om grunnfonten (satt i BODY) er satt til 10 piksler og en heading er satt til 2 em h1 {font-size: 2em;} tilsvarer dette 20 pikslers høyde
1em er lik gjeldende font-størrelse på det aktuelle taggen. Hvis du ikke har satt skriftstørrelse, så det ville være nettleserens standard, som sansynlig er 16px. Så ved standard er 1em = 16px. Hvis du skulle gå og sette en font-størrelse på 20px i BODY, så 1em = 20px.
Historisk virker det som "em" verdien er basert på bredden på store M, men dette er ikke helt sikkert.
fredag 1. oktober 2010
©IGM, Stig Aasen.
EM fortsettelse
Den mest populære metoden i arbeidet med em verdier er å angi font-size i body til 62,5%. Fordi standard nettleser font-size er 16px, blir nå verdien 10px . Ved hjelp av 10 som multiplikator er det nå mye enklere, enn å bruke 16. Trenger du en skrift størrelse på 18px, kan du bruke font-size: 1.8em.
fredag 1. oktober 2010
©IGM, Stig Aasen.
En bra side for testing
http://typetester.maratz.com/ Har også forum og informative sider
vedrørende typografi
fredag 1. oktober 2010
