CSS Tutorial - Kapitel 6: Textformatering

Nu när vi har fastställt vad CSS är och hur vi använder det på våra sidor, ska vi börja titta på vad vi kan göra med det. Eftersom den mest grundläggande beståndsdelen hos de flesta hemsidor är deras text-innehåll, ska jag börja med att beskriva de vanligaste metoderna (obs: inte alla metoder) för att formatera och ändra utseendet på text.



Välja typsnitt

En av de första detaljer vi oftast vill besluta om är om sidan ska använda det typsnitt som är default i webbläsaren eller något vi själva väljer. Om vi själva väljer typsnitt gör vi det via egenskapen font-family. En smart grej med font-family är att den låter oss lista många typsnitt på samma gång. Det är för att webbläsaren ska ha något att falla tillbaka på om det första typsnittet inte hittades i besökarens dator, och detta är ett smidigt sätt att få texten kompatibel med både PC och Mac.

Till exempel så är Helvetica en vanlig Mac-motsvarighet till typsnittet Arial på en Windows PC. För att täcka in båda dessa i vårt dokuments body, kan vi definiera den såhär:

body{ font-family: Arial, Helvetica, sans-serif; }

Som du märker så har jag också lagt till den generella typsnitts-sorten "sans-serif" på slutet, som en "sista utväg" så att webbläsaren åtminstone förstår vad vi är ute efter i runda drag, om ingen av de andra två typsnitten hittades.



Välja teckenstorlek

Valet av teckenstorlek sköts via egenskapen font-size. Teckenstorlekar på webben och deras olika enheter kan dock vara en ganska snårig djungel eftersom de kan anges i såväl pixlar (px), punkter (pt), procent (%) och något som kallas em's (em). Jag kommer att prata mer om detta i ett annat kapitel, men tillsvidare nöjer vi oss med att sätta en storlek på 14 skärmpunkter till vår body ovan.

body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}




Typsnittets stil - Kursiv text

För att visa texten kursivt ("lutande" till höger) använder vi egenskapen font-style. Font-style kan också användas för att göra texten "oblique" som är snarlikt italic, men med mindre globalt stöd.

Eftersom vi förmodligen aldrig skulle vilja att all text i vår body visades i kursiv stil, så skapar vi en klass för detta istället:

.kursivera{
  font-style: italic;
}

Klassen kan sedan appliceras till vilket element som helst där vi vill visa texten kursivt, som i detta lilla HTML-exempel nedan:

Nu skriver vi lite <span class="kursivera">kursiv text!</span>

Dessutom, för att "nollställa" en redan kursiv inställning, används font-style: normal;



Typsnittets "vikt" - Fet text

För att göra vår text fet, använder vi egenskapen font-weight. Precis som font-style hade andra val än "italic", har font-weight också andra val förutom "bold" (eng. för fet stil) som "bolder", "lighter" eller en serie av nummer för att uppnå ett mer exakt resultat. Det är dock i regel bara "bold" man främst använder för att göra texten fetare:

.fetaKlassen{
  font-weight: bold;
}

Precis som med font-style finns det hos font-weight också ett "normal"-värde för nollställning.



Textfärg

Textfärg i CSS kan anges antingen med de engelska namnen på färgerna som "red", "green" och "blue", men också mer precisa värden antingen i formatet "hex" eller som "rgb-värden" för mängden av Red, Green och Blue.

Hex-värden är egentligen bara den hexadecimala (nummersystem baserat på talet 16) motsvarigheten till RGB. Om du vill lära dig mer om hex-räkning måste jag referera till Google, eftersom det ligger utanför ämnesområdet här. För att avsluta detta med textfärger ska vi ta ett exempel med alla tre metoderna för färgval:

.rodText{ color: red; }

.blaText{ color: #0000ff; }

.gronText{ color: rgb(0, 255, 0); }

Kom också ihåg att vara försiktig med att välja alltför crazy färgkombinationer eftersom det kan vara lätt hänt att de mest bara irriterar besökarna. Tänk på att intensiva röda färger t.ex. bör undvikas då de blivit synonyma med varningar och felmeddelanden, precis som en djup blå textfärg i regel förväntas vara en klickbar länk.



Textdekorationer - Understruken, Blinkande etc

Det sista vi ska ta upp i det här kapitlet är egenskapen text-decoration. Den används för att t.ex. stryka under ("underline") text på samma sätt som hos webblänkar. Den har dock fler funktioner som "overline", "line-through" och "blink", men dessa är mindre vanliga och används mycket sällan.

Följande lilla klass demonstrerar hur man skapar understruken text:

.underline{
  text-decoration: underline;
}

Om du inte vill ha någon av valen hos text-decoration, används "none" för nollställning.





Fler kapitel är på gång men de är tyvärr inte färdigskrivna än.

< Tidigare: CSS-filen

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl