Your SlideShare is downloading. ×
Css hva er det
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css hva er det

518
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
518
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×