Css hva er det
- 1. 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
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 2. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 3. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 4. 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
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 5. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 6. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 7. 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
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 8. % (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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 9. 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
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 10. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 11. 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.
©IGM, Stig Aasen.
fredag 1. oktober 2010
- 12. En bra side for testing
http://typetester.maratz.com/
Har også forum og informative sider
vedrørende typografi
©IGM, Stig Aasen.
fredag 1. oktober 2010
