CSS - farger og fonter
Farger, fonter (bokstavtype) og fontstørrelse (bokstavstørrelse) er eksempler på attributter på html-elementene.
Her er eksempel på å gi en farget bakgrunn bak teksten, lagt inn som CSS:
I stedet for å ha en farget bakgrunn bak teksten kan du også velge å ha en ramme rundt. Det angis som border. Skal du ha en ramme rundt som er 2 piksler tykk og fargen rød vil den angis som
border:2px solid red
Bredden kan også angis til noen faste størrelser ved hjelp av border-width - som kan ha verdiene thin, medium eller thick. Du kan velge om du skal ha alle sider eller bare noen, f.eks. velge kun border-left - som gir kant på venstre side.
I tillegg til tykkelse og farge kan Border-style f.eks. ha følgende typer verdier:
- dotted - stiplet (prikker)
- dashed - stiplet (linje)
- solid - heltrukket linje
- double - doble linjer
- none - ingen linje
- border-radius - kan lage avrundede hjørner (jo høyere tall jo mer avrundet. En vanlig ramme er 2px, og avrundet ligger mellom 5 og 12 px)
Det finnes også noen som angir 3D-effekter o.l. Bruk denne lenka for å teste hvordan disse ser ut på nettsiden.
Skal du ha farget tekst angis det som color, f.eks. hvis vi ønsket å ha overskriften i bildet over som hvit tekst på blå bakgrunn ville vi skrevet:
De mest brukte attributter som angår bakgrunnseffekter for html-elementene er:
- background-color - bakgrunnsfarge
- background-image - bakgrunnsbilde, enten ved å laste bilde opp på nettside og lenke til det eller ved å angi en URL for bilder på andre nettsider
- background-repeat - at bakgrunn skal gjentas eller ikke for å fylle ut siden
- background-attachment - om bakgrunnen skal stå fast eller scrolle med resten av siden
- background-position - plasserer bakgrunnen på siden (posisjon)
Når det gjelder background-image kan man også velge at det skal være mer transparent. Først og fremst gjøres det ved å sette opacity-attributt på, og hvor verdien kan være fra 0.0 til 1.0 - og hvor 1.0 er standard. For eldre nettlesere (IE8 eller tidligere) må man angi filter for å gjøre bildet transparent: alpha(opacity=x) - og hvor x kan ha en verdi mellom 1 og 100, og jo lavere verdi, jo mer transparent blir bildet. Koden alt="Forest" angir at dersom bildet ikke kan vises, f.eks. ved bruk av leselist for blinde så skal bildet beskrives som Forest (Skog). Dette er i tråd med universell utforming.