Tekst
Du kan endre størrelse og form på tekst på en nettside med en rekke egenskaper
font-family
Dette er tekstypen (fonten) som for eksempel Times New Roman, Arial eller Verdana
De som kommer inn på nettsiden din må også ha den fonten som du skal bruke. Det kan med andre ord være at du har noen fete fonter på din datamaskin, men det er altså liten vits i å bruke de, så lenge ikke andre får tak i de. Det er noen få «trygge» fonter (de mest brukte er de tre som er nevnt over), men du kan spesifisere flere fonter på en gang. Poenget med det er at dersom ikke brukeren har den første fonten du har spesifisert, så vil den prøve den neste fonten, helt til den finner en font som den har. Det er nyttig siden forskjellige datamaskiner gjerne har forskjellige fonter installert.
Vi kan se på et eksempel:
font-family: arial, helvetica, serif;Hvis brukeren har arial, så blir den brukt. Hvis ikke ser den etter Helvetica, og hvis den ikke finnes bruker den den første og beste serif-fonten den finner.
Dersom navnet på fonten er flere enn ett ord skal det skrives med anførselstegn, slik som «Times New Roman».
Det skal nevnes at det finnes et lass med andre fonter vi kan bruke enn de «trygge» fontene, men det skal vi se på litt senere. For nå holder vi oss til disse.
font-size
font-size setter (ikke overraskende) størrelsen på fonten. Pass på at du fortsatt skiller mellom hva et avsnitt er og hva en heading er, selvom du i praksis kan sette en veldig høy font-størrelse på en p-tag å få det samme resultatet visuelt.
font-weight
Fontvekten bestemmer hvor fet en skrifttype er. Det finnes altså nyanseforskjeller, og noen fonter har opptil 9 forskjellige fontvekter. De kan enten defineres ved navn, som «bold», eller «normal», eller de kan defineres ved tall, hvor 700 tilsvarer bold, og 400 tilsvarer normal.
font-style
Font-style definerer ene og alene om fonten er kursiv eller ikke. Den kan derfor settes til enten italic (kursiv) eller normal:
font-style: italic;text-decoration
Med text-decoration kan du ha en linje over, gjennom eller under teksten
- text-decoration: overline gir altså en strek over teksten
- text-decoration: line-through gir en strek gjennom teksten
- text-decoration: underline gir en strek under teksten
Denne egenskapen brukes gjerne til å dekorere linker. Om du ønsker å ikke ha noen linje under linken kan du bruke text-decoration: none;
Understreker skal helst kun brukes til linker. Det er en kjent konvensjon på nett at man forventer at linker har understreker.
text-transform
text-transform vil endre om teksten har store eller små bokstaver
- text-transform: capitalize gjør første bokstav i hvert ord til stor bokstav
- text-transform: uppercase gjør alle bokstaver om til store bokstaver
- text-transform: lowercase gjør alle bokstaver om til små bokstaver
Hvis vi skal bruke noen av reglene vi har sett på i stilarket vårt, kan det f.eks se sånn ut:
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}Tekstavstand
Før vi går videre fra stiler som kan settes på tekst, tar vi en rask kikk på tekstavstand.
letter-spacing og word-spacing-egenskapene setter avstanden mellom henholdsvis bokstaver, og mellom ord. Verdien kan være enten en lengde, eller settes til normal.
line-height setter høyden fra en tekstlinje til neste uten å endre størrelsen på teksten. Det kan være et tall, som vil være en multippel av font-størrelsen, (så f.eks 2 vil være dobbelt av font-størrelsen), en lengde, en prosent, eller settes til normal.
text-align justerer teksten inni et element, enten til left, right, center eller justify.
text-indent setter et inntrykk på den første linja av et avsnitt, til en gitt lengde, eller prosent. Dette brukes ofte i trykte medier, men sjelden på nett.